*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;touch-action:manipulation;background:#102127;color:#eee7d4;font-family:"Avenir Next",Avenir,system-ui,sans-serif}body{background:linear-gradient(#0d20202b,#06181a55),url('./assets/drawn-v2/background.webp') center center/cover no-repeat}button{font:inherit}#game{width:100%;height:100%;height:100dvh;position:relative}slot-game-shell{width:100%;height:100%;display:block}
.mine-board{position:relative;isolation:isolate;container-type:inline-size}.mine-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(var(--grid-cols,6),minmax(0,1fr));grid-template-rows:repeat(var(--grid-rows,5),minmax(0,1fr));gap:3px;background:#08171be8;border-radius:4px;overflow:hidden;position:relative;padding:3px}.mine-cell{position:relative;min-width:0;min-height:0;background:linear-gradient(150deg,#254044df,#14292ff5);border:1px solid #61827820;border-radius:3px;isolation:isolate}.cell-underlay{position:absolute;inset:0;border-radius:2px;transition:background .25s;z-index:-1}.exposed .cell-underlay{background:radial-gradient(ellipse at 50% 55%,#ffc9473d,#ffb52e14 70%);box-shadow:inset 0 0 0 1.5px #ffd76ab8,inset 0 0 10px #ffc34a55}.cell-mult{position:absolute;top:2px;left:4px;z-index:6;font-size:clamp(8px,2.7cqw,15px);font-weight:850;color:#ffdf87;text-shadow:0 1px 3px #000}.tile{width:100%;height:100%;display:grid;place-items:center;position:relative;will-change:transform}.tile img{display:block;width:91%;height:91%;object-fit:contain;filter:drop-shadow(0 4px 3px #0006);pointer-events:none}.tile.special img{width:88%;height:88%}.tile-value{position:absolute;bottom:5%;left:0;right:0;text-align:center;font-weight:900;font-size:clamp(10px,3.4cqw,20px);letter-spacing:-.7px;color:#fff1ba;text-shadow:0 2px 2px #261b05,0 0 5px #2a1b04,1px 0 #2a1b04,-1px 0 #2a1b04;line-height:1.1}.tile[data-kind=coin] img{width:92%;height:92%}.stored-badge{font-size:clamp(5px,1.5cqw,8px);position:absolute;top:4%;right:2%;padding:1px 2px;color:#e0ecc1;background:#31544b;border-radius:2px;letter-spacing:.3px}.mine-cell.target{box-shadow:inset 0 0 0 2px #efd889,0 0 15px #ffe1884b;z-index:4}.mine-cell.source{background:radial-gradient(#f9d67688,#bea25822);box-shadow:inset 0 0 0 2px #ffda76,0 0 30px #efb94780;z-index:5}.cluster-win{background:#3c8273!important;box-shadow:inset 0 0 0 2px #a8e9bd,0 0 18px #adf9c177;z-index:4}.mine-effects{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:8}.ore-flight{position:absolute;width:11px;height:11px;border-radius:2px;background:#fff2b7;box-shadow:0 0 9px 4px #f1bc64b8,0 0 24px #cba94f;pointer-events:none}.ore-flight.dynamite{background:#ff8a4d;box-shadow:0 0 12px 5px #ffae3d}.ore-flight.multiplier{background:#95ffe1}.mine-hud{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;font-size:10px;line-height:1.2;color:#c7d7ca;text-align:center;text-transform:none;letter-spacing:.15px}.hud-lamp{width:5px;height:5px;flex-shrink:0;background:#e5c77f;border-radius:50%;box-shadow:0 0 7px #fce685}.feature-counter{white-space:nowrap;color:#ffdb83;font-size:12px}.mine-rail{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;width:100%;height:100%;padding:0 0 16px}.game-logo{width:220px;max-width:125%;height:auto;filter:drop-shadow(0 6px 5px #0008)}.rail-kicker{font-size:8px;letter-spacing:2px;color:#93aca4;text-align:center;margin-top:-20px;white-space:nowrap}.seam-meter{width:100%;padding:16px 12px;border-top:1px solid #c6bf822f;border-bottom:1px solid #c6bf822f;background:linear-gradient(90deg,transparent,#132e3177,transparent)}.meter-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.meter-top>span,.expedition-meter>span{font-size:9px;font-weight:750;letter-spacing:1.6px;color:#bccebb}.exposed-count{font-size:24px;color:#f9db91;font-weight:800}.exposed-count small{font-size:10px;color:#8fa9a2;font-weight:500}.meter-cells{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin:12px 0}.meter-cells i{height:10px;background:#223b3e;border:1px solid #5a767053;border-radius:1px}.meter-cells i.lit{background:#d6af59;box-shadow:0 0 5px #e5c76645;border-color:#eed68c}.seam-meter p,.expedition-meter p{font-size:10px;line-height:1.7;color:#99b0a6;text-align:center;margin:10px 0 0}.rail-source{display:flex;flex-direction:column;align-items:center;text-align:center}.rail-source>img{width:104px;filter:drop-shadow(0 0 15px #f0b85535)}.rail-source strong{display:block;font-size:11px;letter-spacing:1.8px;color:#e5c77d}.rail-source span{font-size:10px;color:#9eb6ab;line-height:2.5}.expedition-meter{width:100%;font-size:10px}.expedition-meter[hidden]{display:none}.dig-count{float:right;color:#f1d582}.dig-track{height:5px;border-radius:3px;background:#233e3e;margin-top:10px}.dig-track i{height:100%;display:block;background:#c1da92;transition:width .4s}
.mine-journal{width:100%;max-height:100%;display:flex;flex-direction:column;background:linear-gradient(145deg,#142c31c9,#0e2227bd);border:1px solid #9baa7e38;border-radius:7px;padding:18px 16px;box-shadow:0 12px 28px #0002;position:relative}.journal-title{font-size:10px;letter-spacing:2.1px;font-weight:750;display:flex;align-items:center;gap:7px;color:#c2d2b7}.journal-light{width:5px;height:5px;background:#eec672;border-radius:50%;box-shadow:0 0 6px #e7c378}.journal-total{padding:20px 0 18px;border-bottom:1px solid #bec58e25;display:flex;flex-direction:column;gap:4px}.journal-total>span{font-size:8px;letter-spacing:1.8px;color:#839e99}.journal-total strong{font-size:33px;color:#f6dda3;letter-spacing:-.7px;font-variant-numeric:tabular-nums}.wave-order{padding-top:18px}.wave-order>span{font-size:8px;letter-spacing:1.8px;color:#819f99}.wave-order ol{padding:0;margin:10px 0;list-style:none;display:flex;flex-direction:column;gap:4px}.wave-order li{font-size:9px;color:#6e8c85;border-radius:3px;padding:6px 8px}.wave-order b{font-size:10px;letter-spacing:.8px;color:#c6d4be;margin-left:15px}.wave-order li.active{background:#d9b56420;color:#f8dc8e}.wave-order li.active b{color:#f4d68e}.wave-order p{font-size:9px;line-height:1.6;color:#8eaaa0;margin:12px 8px 17px}.journal-entries{height:112px;overflow:auto;border-top:1px solid #bec58e25;scrollbar-width:thin;scrollbar-color:#3b5954 transparent;padding-top:8px}.journal-empty{font-size:10px;line-height:1.8;color:#77938a;text-align:center}.journal-entry{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:9px;border-bottom:1px solid #d1d6ad0b;padding:7px 0;color:#aabfb3}.journal-entry>span{max-width:120px;line-height:1.4}.journal-entry strong{font-size:10px;color:#e8cf90;white-space:nowrap}.journal-footer{display:flex;justify-content:space-between;font-size:7px;letter-spacing:2px;color:#617e76;padding-top:15px}.mine-bridge{position:absolute;inset:0;z-index:20;background:repeating-linear-gradient(0deg,#17282c 0,#17282c 10%,#0a1a1f 10%,#0a1a1f 10.8%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .2s;border:4px solid #9b864b}.mine-bridge.visible{visibility:visible;opacity:1}.mine-bridge span{font-size:9px;letter-spacing:2px;color:#a2bbb0}.mine-bridge strong{font-size:clamp(20px,7cqw,40px);letter-spacing:2px;color:#f7d58a;text-shadow:0 4px #060e14}.mine-bridge i{width:50%;height:4px;background:#384b44;overflow:hidden}.mine-bridge i:after{content:'';display:block;width:40%;height:100%;background:#edcd80;animation:bridge 1s infinite ease-in-out}.mine-board[data-feature=motherlode]{border-color:#f3d177;box-shadow:0 0 0 4px #241e15,0 0 0 5px #c9a754,0 0 60px #f6be5933}
.intro{position:fixed;z-index:40;inset:0;background:linear-gradient(#061419b5,#061419e8),url('./assets/drawn-v2/background.webp') center/cover;display:flex;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(8px)}.intro-inner{width:min(850px,100%);text-align:center}.intro-logo{width:min(440px,80%);height:auto}.intro-tag{font-size:10px;letter-spacing:4px;color:#b9cdbb;margin:16px 0 30px}.intro-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:32px}.intro-cards article{padding:20px 18px;background:#163035b3;border:1px solid #829b6f50;border-radius:8px}.intro-cards img{width:90px;height:90px}.intro-cards h2{font-size:15px;letter-spacing:1px;color:#f4d18a;margin:12px 0 8px}.intro-cards p{font-size:12px;line-height:1.7;color:#a8c0b6;margin:0}.intro{cursor:pointer}.intro:focus{outline:none}.intro-continue{margin:0;padding:12px 0;color:#ffe09a;font-size:15px;font-weight:850;letter-spacing:2px;text-shadow:0 2px 5px #0009}.intro-foot{font-size:9px;color:#809e91;letter-spacing:1px;margin-top:19px}.intro-brand{display:block;width:120px;height:40px;object-fit:contain;margin:16px auto 0}
@keyframes cluster-breathe{50%{transform:scale(1.12);filter:brightness(1.3)}}@keyframes bridge{to{transform:translateX(250%)}}
@container gold-viewport (max-height:680px) and (min-width:700px){.mine-rail{gap:18px}.rail-source img{width:66px}.rail-kicker{font-size:6px}.mine-journal{padding:12px}.journal-total{padding:12px 0}.wave-order{padding-top:10px}.wave-order li{padding:4px}.wave-order p{margin:8px 4px}.journal-entries{height:78px}.game-logo{width:190px}.seam-meter{padding:10px}.meter-cells i{height:7px}.journal-footer{padding-top:8px}}
@container gold-viewport (max-width:600px){.mine-grid{gap:2px;padding:2px}.mine-hud{font-size:9px;gap:5px}.feature-counter{font-size:10px}.intro{padding:18px}.intro-cards{gap:9px;grid-template-columns:1fr;margin-bottom:22px}.intro-cards article{text-align:left;position:relative;padding:12px 12px 12px 87px;min-height:91px}.intro-cards img{position:absolute;left:12px;top:15px;width:60px;height:60px}.intro-cards h2{font-size:12px;margin:3px 0 4px}.intro-cards p{font-size:10px}.intro-tag{margin:8px 0 18px;font-size:8px;letter-spacing:2px}.intro-foot{font-size:8px}.intro-brand{width:90px;height:30px;margin-top:10px}.intro-logo{width:260px}.cell-mult{top:1px;left:2px}}
/* Reduced motion is the game's setting (the system's Reduce Motion only sets its default): it calms the effects in script and
   stops the looping CSS decoration below, instead of freezing every animation and transition on the page. */
slot-game-shell[data-reduced=true] .tile{animation:none!important}slot-game-shell[data-reduced=true] .mine-bridge i:after{animation:none!important}
.supply-count{font-size:8px;color:#efd488;white-space:nowrap;border:1px solid #b9a77355;border-radius:3px;padding:3px 5px}.supply-count[hidden]{display:none}.full-journal{font-size:8px;color:#a2b7a4;margin-top:12px;border-top:1px solid #d1d6ad18;padding-top:9px}.full-journal summary{cursor:pointer;min-height:32px;display:flex;align-items:center;letter-spacing:1px}.full-journal-entries{max-height:160px;overflow:auto}.full-journal[open]{position:absolute;inset:0;background:#142b2f;padding:15px;margin:0;border:1px solid #8eaa79;border-radius:6px;z-index:5}.full-journal[open] .full-journal-entries{max-height:calc(100% - 38px)}
slot-game-shell[data-layout=compact] .mine-journal{max-height:var(--mine-content-height,400px);padding:10px 12px;overflow:hidden}slot-game-shell[data-layout=compact] .mine-rail{max-height:var(--mine-content-height,400px);gap:15px;overflow:hidden}slot-game-shell[data-layout=compact] .rail-source{display:none}slot-game-shell[data-layout=compact] .journal-total{padding:10px 0}slot-game-shell[data-layout=compact] .wave-order{padding-top:10px}slot-game-shell[data-layout=compact] .wave-order li{padding:3px 5px}slot-game-shell[data-layout=compact] .wave-order p{margin:8px 4px;font-size:8px}slot-game-shell[data-layout=compact] .journal-entries{min-height:40px;height:75px}slot-game-shell[data-layout=compact] .journal-footer{display:none}slot-game-shell[data-layout=compact] .full-journal{margin-top:6px;padding-top:0}.meter-top>span{white-space:nowrap}.exposed-count{white-space:nowrap;display:inline!important}.exposed-count small{display:inline!important}.supply-count{font-family:system-ui,sans-serif}.tile-factor{position:absolute;bottom:6%;left:0;right:0;text-align:center;font-size:clamp(10px,3.4cqw,20px);font-weight:900;color:#fff0ba;text-shadow:0 2px 4px #251403,1px 0 #251403,-1px 0 #251403}
slot-game-shell[data-layout=mini] .mine-rail{overflow:hidden;gap:12px;padding:0}slot-game-shell[data-layout=mini] .game-logo{width:135px}slot-game-shell[data-layout=mini] .rail-kicker,slot-game-shell[data-layout=mini] .rail-source,slot-game-shell[data-layout=mini] .seam-meter p{display:none}slot-game-shell[data-layout=mini] .seam-meter{padding:8px}slot-game-shell[data-layout=mini] .mine-journal{height:var(--mine-content-height,200px);padding:9px;overflow:hidden}slot-game-shell[data-layout=mini] .journal-title{font-size:8px;letter-spacing:1px}slot-game-shell[data-layout=mini] .journal-total{padding:7px 0}slot-game-shell[data-layout=mini] .journal-total strong{font-size:24px}slot-game-shell[data-layout=mini] .wave-order,slot-game-shell[data-layout=mini] .journal-footer{display:none}slot-game-shell[data-layout=mini] .journal-entries{height:65px}slot-game-shell[data-layout=mini] .full-journal{padding:0;margin-top:5px}
.game-logo,slot-game-shell[data-layout=compact] .game-logo{width:100%;max-width:100%}.rail-kicker{display:none}

/* The blue play-area texture spans the full grid (src/frame.css). Transparent cells keep it continuous; dark outlines retain the grid. */
.mine-grid{gap:3px}
/* Restore the original rounded cells; the shared surface mask keeps their corner cutouts dark. */
.mine-cell{background:transparent;border:1px solid #0f2433;border-radius:5px}
/* Keep the gap outline below the priority of winning-cluster and special-cell glows. */
:where(.mine-cell){box-shadow:0 0 0 1.5px #0f2433}

.tile img{filter:drop-shadow(0 3px 1px #08233370);width:94%;height:94%}
@container gold-viewport (max-width:600px){.mine-grid{gap:2px}.intro-logo{max-height:24vh;object-fit:contain}.intro-tag{margin-top:4px}}

.mine-rail{height:auto;padding:0;gap:0}.mine-journal,.seam-meter,.rail-source{display:none!important}

/* Large readable bonus emblems. */
.tile[data-kind="golden-seam"] img{width:100%;height:100%}
/* The Super Bonus sign fills about 91% of its canvas (its shimmer and flip need the rest), like the suitcase. */
.tile[data-kind="super-bonus"] img{width:100%;height:100%}
/* The rainbow gem is drawn at about 73% of its canvas (the shine's halo needs the rest), so its box overhangs the cell to match the other symbols. */
.tile[data-kind="seam"] img{inset:-50%;width:112%;height:112%}
/* The wild's mine entrance fills about 84% x 74% of its canvas (headroom for the lettering's hop). */
.tile[data-kind="wild"] img{inset:-50%;width:104%;height:104%}
/* Baskets fill only 75% of their canvas width (the pile grows upward from a shared baseline), so they get the full cell as their
   box: about 75% of the cell wide. The collector fill overlay uses the same box (inset:-50% keeps any box centred in WebKit). */
.tile[data-kind=basket] img,.tile[data-kind=basket] img.collector-fill{inset:-50%;width:100%;height:100%}

.tile[data-kind="scatter"] img{width:100%;height:100%}

.feature-counter{display:none}

.mine-cell.star-cell{border:2px solid #63dcff;box-shadow:inset 0 0 0 1px #c0f6ff,inset 0 0 14px #38bfff45,0 0 8px #38bfff70}

.tile[data-kind=multiplier] img,.tile[data-kind=golden-multiplier] img{width:100%;height:100%;transform:scale(1.08)}
.tile[data-kind=multiplier] .tile-factor,.tile[data-kind=golden-multiplier] .tile-factor{top:50%;bottom:auto;transform:translateY(-50%);font-size:clamp(18px,5cqw,32px);font-weight:950;paint-order:stroke fill;-webkit-text-stroke:3px #174d43;text-shadow:0 3px #113b32;color:#baffeb;z-index:3}
.tile[data-kind=golden-multiplier] .tile-factor{color:#ffe879;-webkit-text-stroke-color:#784015;text-shadow:0 3px #643515}

/* The dynamite art is drawn small on a big canvas (room for its explosion frames), so its image box overhangs the cell;
   live and spent share one box, exactly the size of the explosion sprite that plays over them (animations.js). */
/* The sticks sit at a jaunty angle. One setting tilts the static art, the spent art and the explosion sprite alike
   (the rotate property, around each one's centre), so the hand-overs stay seamless; the strength number stays upright. */
.mine-board{--dynamite-tilt:35deg}
.tile[data-kind=dynamite] img{inset:-50%;width:134%;height:134%;rotate:var(--dynamite-tilt,0deg)}
.tile[data-kind=cart] img{width:100%;height:100%;transform:scale(1.08)}
.tile .tile-value,.tile .tile-factor{z-index:4}
/* Coin values and dynamite strength sit dead centre on the symbol (coin art is fitted: drawing = 96% of a square canvas, centred).
   Centred with the translate property rather than transform, so the pop and count-up animations (which animate transform)
   scale the number in place. Baskets and carts keep their amounts along the bottom. */
.tile[data-kind=coin] .tile-value,.tile[data-kind=dynamite] .tile-factor{top:50%;bottom:auto;translate:0 -50%;font-size:clamp(12px,3.7cqw,24px);font-weight:950;line-height:1;letter-spacing:-.4px;paint-order:stroke fill;-webkit-text-stroke:clamp(2.5px,.55cqw,4px) #3a1d05;text-shadow:0 2px 0 #2a1403,0 3px 7px #000a}
.tile[data-kind=coin] .tile-value{color:#fff8e0}
.tile[data-kind=coin] .tile-value.boosted-value{color:#fff0ad}
.tile[data-kind=dynamite] .tile-factor{color:#ffe7b0;-webkit-text-stroke-color:#5a1906;text-shadow:0 2px 0 #3d1004,0 3px 7px #000a}

/* Ambient scene layers (src/ambience.css) stay behind the opaque board and controls. */
#game{z-index:1}

/* Floating celebration lettering keeps the winning board fully visible. */
.mine-win-celebration{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;border:0;border-radius:0;padding:20px;cursor:pointer;background:none;box-shadow:none;color:#ffda4b;text-align:center;overflow:visible;appearance:none}
.mine-win-title{font-size:clamp(calc(28px * var(--k,1)),8cqw,calc(64px * var(--k,1)));font-weight:950;font-style:italic;line-height:1.08;letter-spacing:-1px;color:#ffe17b;-webkit-text-stroke:2px #583017;paint-order:stroke fill;text-shadow:0 4px #472518,0 7px 12px #0008;transform:rotate(-4deg);max-width:100%}
.mine-win-amount{font-size:clamp(calc(34px * var(--k,1)),10cqw,calc(80px * var(--k,1)));font-weight:950;line-height:1.15;color:#fff2be;-webkit-text-stroke:2px #583017;paint-order:stroke fill;text-shadow:0 4px #472518,0 6px 14px #0009;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;max-width:100%}
.mine-win-celebration[data-tier=epic] .mine-win-title{color:#9fe9ff}
.mine-win-celebration[data-tier=maximum] .mine-win-title{color:#ffdc48;text-shadow:0 4px #472518,0 0 24px #ffd86580}

/* One virtual desktop canvas for all landscape Engine preview sizes. */
#game{position:absolute;transform-origin:top left;container:gold-viewport / size}
.intro{position:absolute;padding:20px;overflow:hidden}
.intro-inner{display:flex;flex-direction:column;align-items:center;max-height:100%;width:min(850px,100%);min-height:0}
.intro-logo{display:block;flex:0 1 auto;width:auto;max-width:80%;height:165px;max-height:25cqh;object-fit:contain;min-height:0}
.intro-tag{margin:8px 0 16px;flex:none}
.intro-cards{width:100%;gap:18px;margin:0 0 14px;min-height:0}
.intro-cards article{padding:12px 14px}
.intro-cards img{width:64px;height:64px;object-fit:contain}
.intro-cards h2{margin:8px 0 6px;font-size:14px}
.intro-cards p{font-size:12px;line-height:1.45}
.intro-continue{font-size:14px;margin:0;padding:8px 0;flex:none}
.intro-foot{margin:6px 0 0;flex:none}
.intro-brand{margin:6px auto 0;height:28px;width:100px;flex:none}
@container gold-viewport (max-width:600px){
 .intro{padding:12px}.intro-logo{width:auto;height:120px;max-height:18cqh;max-width:80%}
 .intro-tag{font-size:7px;letter-spacing:1.4px;margin:6px 0 12px}
 .intro-cards{gap:8px;margin-bottom:10px}.intro-cards article{padding:10px 10px 10px 70px;min-height:82px}
 .intro-cards img{left:8px;top:14px;width:52px;height:52px}
 .intro-cards h2{font-size:11px;margin:0 0 4px}.intro-cards p{font-size:10px;line-height:1.4}
 .intro-continue{font-size:12px;letter-spacing:1px;padding:8px 0}.intro-foot{font-size:7px;margin:4px 0 0}.intro-brand{height:24px;margin-top:4px}
}
/* The layout computes the board's size (theme.js fit(): --mine-width x --mine-height at 6:5). Holding the height here
   keeps the grid rows fixed, so symbol art of any proportions fits its cell instead of stretching the rows. */
.mine-board{height:var(--mine-height,auto)}
/* Symbol art is laid out from its cell, never the other way round: centred, sized by the tile rules, aspect kept by object-fit. */
.tile img{position:absolute;inset:0;margin:auto}

/* The logo and max-win caption sit slightly higher and float as one group. */
.game-logo-lockup{position:relative;top:-10px;width:100%;display:flex;flex-direction:column;align-items:center}
.logo-max-win{margin:-4px 0 0;max-width:100%;font-size:15px;font-weight:850;line-height:1.2;letter-spacing:.6px;white-space:nowrap;text-align:center;color:#ffe5a6;text-shadow:0 2px 3px #241305,0 0 8px #0009}
.game-logo-lockup.logo-motion-active{animation:logo-float 5.2s ease-in-out infinite;will-change:transform}
@keyframes logo-float{0%,100%{transform:translate(0,0)}50%{transform:translate(1.5px,-6px)}}
slot-game-shell[data-layout] .mine-rail{overflow:visible}

/* Intro screen polish: visuals only (the layout rules above and the wording are unchanged). A warm lantern glow behind the logo,
   gold-rimmed mine plaques with modal-style headings, glowing icons, a gold call to action, and a short staggered entrance. */
.intro{background:radial-gradient(ellipse 72% 62% at 50% 42%,#0b1f2466 0%,#051216d9 62%,#020709f5 100%),url('./assets/drawn-v2/background.webp') center/cover}
.intro-inner{position:relative;isolation:isolate}
.intro-inner::before{content:'';position:absolute;z-index:-1;left:50%;top:-6%;width:min(760px,130%);aspect-ratio:2/1;translate:-50% 0;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,#ffc2573d 0%,#ff9d2e1c 34%,transparent 68%);animation:intro-glow 4.5s ease-in-out infinite alternate}
.intro-logo{filter:drop-shadow(0 12px 16px #000b) drop-shadow(0 0 26px #ffb52e4d);animation:intro-drop .75s cubic-bezier(.2,1.35,.4,1) both}
.intro-tag{display:flex;align-items:center;justify-content:center;gap:14px;white-space:nowrap;font-weight:800;color:transparent;background:linear-gradient(90deg,#c9a45a,#fff3c8 50%,#c9a45a);-webkit-background-clip:text;background-clip:text;animation:intro-rise .6s .2s both}
.intro-tag::before,.intro-tag::after{content:'';flex:0 1 70px;height:1px;background:linear-gradient(90deg,transparent,#e9c46acc)}
.intro-tag::after{background:linear-gradient(270deg,transparent,#e9c46acc)}
.intro-cards article{position:relative;background:linear-gradient(180deg,#1f3d42f0 0%,#10252af5 52%,#0a171bfa 100%);border:2px solid transparent;border-image:linear-gradient(160deg,#fff3c4,#e9b54a 24%,#7e5216 50%,#f1c65a 76%,#fff0b8) 1;border-radius:0;box-shadow:0 12px 26px #000a,inset 0 1px 0 #ffffff1f,inset 0 0 26px #0009;animation:intro-rise .6s both}
.intro-cards article:nth-child(1){animation-delay:.3s}.intro-cards article:nth-child(2){animation-delay:.4s}.intro-cards article:nth-child(3){animation-delay:.5s}
.intro-cards img{object-fit:contain;filter:drop-shadow(0 6px 7px #000b) drop-shadow(0 0 14px #ffc85a4d)}
.intro-cards article:nth-child(1) img{scale:1.15;filter:drop-shadow(0 6px 7px #000b) drop-shadow(0 0 14px #5fd8ff66)}
.intro-cards article:nth-child(2) img{scale:1.5;rotate:35deg}
.intro-cards h2{font-style:italic;font-weight:950;letter-spacing:.06em;color:#ffe27a;text-shadow:0 2px 0 #5a2c0c,1px 0 0 #5a2c0c,-1px 0 0 #5a2c0c,0 -1px 0 #5a2c0c,0 0 12px #ffb52e59}
.intro-cards p{color:#d6e4dc;text-shadow:0 1px 2px #000d}
.intro-continue{display:inline-block;padding:10px 28px;border-radius:999px;background:linear-gradient(#fff2b8,#ffcb45 55%,#e39a1c);color:#4a2208;text-shadow:0 1px 0 #fff4c8;box-shadow:0 0 0 2px #7a4310,0 6px 18px #0009,0 0 26px #ffb52e59;animation:intro-rise .6s .65s both,intro-cta 1.8s ease-in-out 1.4s infinite}
.intro-foot{animation:intro-rise .6s .75s both}.intro-brand{opacity:.9;animation:intro-rise .6s .8s both}
@keyframes intro-drop{from{opacity:0;transform:translateY(-28px) scale(.86)}to{opacity:1;transform:none}}
@keyframes intro-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes intro-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes intro-cta{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes intro-glow{from{opacity:.75}to{opacity:1}}
body.mine-motion-off .intro *,body.mine-motion-off .intro *::before,body.mine-motion-off .intro *::after{animation:none!important}

/* Welcome screen: a second row under the three main cards ("DIG DEEPER": the Powder Keg, Upgrade Coin, gem counter and ante), each a
   compact card with its symbol. It rises in after them. Phones take a 2 x 2 grid; short screens drop the lines and keep titles. */
.intro-new{width:100%;margin:0 0 14px;flex:none;animation:intro-rise .6s .55s both}
.intro-new-title{display:flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;margin:0 0 8px;font-size:11px;font-weight:900;letter-spacing:.32em;color:#ffe27a;text-shadow:0 1px 0 #5a2c0c,0 0 10px #ffb52e66}
.intro-new-title::before,.intro-new-title::after{content:'';flex:0 1 90px;min-width:12px;height:1px;background:linear-gradient(90deg,transparent,#e9c46acc)}
.intro-new-title::after{background:linear-gradient(270deg,transparent,#e9c46acc)}
.intro-new-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.intro-new-cards article{display:flex;align-items:center;gap:10px;padding:9px 10px;text-align:left;background:linear-gradient(180deg,#1f3d42e6,#0b1a1ef2);border:1px solid #e9b54a99;border-radius:6px;box-shadow:0 8px 18px #0009,inset 0 1px 0 #ffffff17;animation:intro-rise .6s both}
.intro-new-cards article:nth-child(1){animation-delay:.6s}.intro-new-cards article:nth-child(2){animation-delay:.68s}.intro-new-cards article:nth-child(3){animation-delay:.76s}.intro-new-cards article:nth-child(4){animation-delay:.84s}
.intro-new-cards img{flex:none;width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 4px 5px #000b)}
.intro-new-cards img.intro-keg{rotate:20deg}
/* The Upgrade Coin shines every few seconds (its own strip over its still; the strip's first and resting frame is the still). */
.intro-upgrade{position:relative;flex:none;display:block;width:48px;height:48px}
.intro-upgrade img{width:100%;height:100%}
.intro-upgrade i{position:absolute;inset:0;background:url('./assets/drawn-v2/upgrade-shine.webp') 0 0/4400% 100% no-repeat;animation:intro-upgrade-shine 3.4s steps(44,jump-none) 1.6s infinite}
/* Frame by frame (steps) through the first 30% of the cycle, then it rests on the last frame, identical to the still. */
@keyframes intro-upgrade-shine{0%{background-position:0 0}30%,100%{background-position:100% 0}}
.intro-new-cards h3{margin:0 0 3px;font-size:12px;font-style:italic;font-weight:950;letter-spacing:.05em;color:#ffe27a;text-shadow:0 2px 0 #5a2c0c,1px 0 0 #5a2c0c,-1px 0 0 #5a2c0c}
.intro-new-cards p{margin:0;font-size:10.5px;line-height:1.35;color:#d6e4dc;text-shadow:0 1px 2px #000d}
.intro-ante{position:relative;flex:none;width:48px;height:48px}
.intro-ante img{width:100%;height:100%}
.intro-ante b{position:absolute;right:-6px;bottom:-4px;padding:1px 5px;border-radius:999px;font-size:11px;font-weight:950;color:#4a2208;background:linear-gradient(#fff2b8,#ffcb45 55%,#e39a1c);box-shadow:0 0 0 1px #7a4310,0 2px 4px #0009}
@container gold-viewport (max-width:600px){
 .intro-new{margin-bottom:10px}.intro-new-title{font-size:8px;letter-spacing:.24em;margin-bottom:6px}
 .intro-new-cards{grid-template-columns:1fr 1fr;gap:6px}
 .intro-new-cards article{gap:7px;padding:6px 7px}
 .intro-new-cards img,.intro-ante,.intro-upgrade{width:34px;height:34px}
 .intro-new-cards h3{font-size:9.5px;margin-bottom:2px}.intro-new-cards p{font-size:8.5px;line-height:1.3}
 .intro-ante b{font-size:8px;padding:0 4px}
}
/* Short screens (a landscape phone, a small popout, a phone under 700 px tall): titles only, so everything fits above Continue. */
@container gold-viewport (max-width:600px) and (max-height:700px){.intro-new-cards p{display:none}.intro-new-cards img,.intro-ante,.intro-upgrade{width:28px;height:28px}.intro-new-cards article{padding:5px 7px}.intro-new-cards h3{margin:0}}
@container gold-viewport (max-height:560px){.intro-new-cards p{display:none}.intro-new-cards img,.intro-ante,.intro-upgrade{width:30px;height:30px}.intro-new-cards article{padding:5px 8px}.intro-new-title{margin-bottom:4px}}
/* The smallest phones (under 600 px tall): a smaller logo, tighter cards and gaps, so the new row still fits. */
@container gold-viewport (max-width:600px) and (max-height:600px){
 .intro{padding:8px 10px}.intro-logo{max-height:14cqh}.intro-tag{margin:3px 0 8px}
 .intro-cards{gap:6px;margin-bottom:8px}.intro-cards article{min-height:0;padding:7px 8px 7px 60px}
 .intro-cards img{left:8px;top:50%;translate:0 -50%;width:42px;height:42px}
 .intro-cards h2{font-size:10px;margin:0 0 2px}.intro-cards p{font-size:9px;line-height:1.3}
 .intro-new{margin-bottom:8px}.intro-new-cards{gap:5px}.intro-continue{padding:6px 18px;font-size:11px}
}

/* Drawn, bounded effects. WAAPI drives all motion using the shared speed policy. */
.mine-fx{position:absolute;display:block;pointer-events:none;opacity:0}
.ore-chip{width:7px;height:10px;border:1px solid #764221;border-radius:2px;background:#ffda73;box-shadow:1px 1px #fff0b8}
.blast-ring{width:var(--cell-size);height:var(--cell-size);border:4px solid #ffe49a;border-radius:50%;box-shadow:0 0 0 3px #784a2740,inset 0 0 12px #fff2a788}
.blast-ring.fire{border-color:#ffb54c;box-shadow:0 0 0 7px #f17b3544,inset 0 0 16px #ffdc8188}
.landing-dust{width:calc(var(--cell-size)*.85);height:calc(var(--cell-size)*.3);border-radius:50%;background:radial-gradient(ellipse,#edd69a99,transparent 70%);margin-top:calc(var(--cell-size)*.3)}
.blast-flash{width:var(--cell-size);height:var(--cell-size);background:#ffe08a;clip-path:polygon(50% 0,61% 29%,85% 10%,76% 39%,100% 50%,73% 61%,87% 89%,60% 74%,50% 100%,40% 74%,12% 89%,27% 60%,0 50%,28% 39%,14% 10%,40% 29%)}
.seam-sweep{inset:0 auto 0 0;width:35%;background:linear-gradient(90deg,transparent,#c2fff955,#d9fff7cc,#c2fff955,transparent);border-right:3px solid #b7ffed;mix-blend-mode:screen}
.mine-fx.sweep-clip{inset:0;overflow:hidden;opacity:1}
.seam-sweep.golden{background:linear-gradient(90deg,transparent,#ffd97355,#fff1b9cc,#ffd97355,transparent);border-color:#fff4c0}
.cell-flare{width:calc(var(--cell-size) + 2px);height:calc(var(--cell-height) + 2px);transform:translate(-50%,-50%);border-radius:6px;z-index:10}
/* Crystal covers (COVER_STYLE 'crystal' in animations.js). */
.cell-flare.crystal{overflow:hidden;--hi:#c9f8ff;--c1:#4fd8f5;--c2:#1aa6d6;--c3:#0d6fa8;--c4:#083f6e;--rim:#9ff2ff;--edge:#04284a;--glow:#39d6ff;
  background:linear-gradient(135deg,#ffffff4d 0 16%,transparent 17%),var(--facets) center/100% 100% no-repeat,linear-gradient(225deg,var(--hi) 0%,var(--c1) 26%,var(--c2) 52%,var(--c3) 78%,var(--c4) 100%);
  box-shadow:inset 0 0 0 1px var(--edge),inset 0 0 0 3px var(--rim),inset 0 -9px 14px color-mix(in srgb,var(--c4) 75%,transparent),inset 0 9px 12px #ffffff55,0 0 14px var(--glow)}
/* Low-poly facet textures (three variations so neighbouring cells differ); a glint sweeps across every crystal. */
.cell-flare.v0{--facets:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M0.0%200.0L17.0%200.0L28.7%2025.5Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.11'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M0.0%200.0L28.7%2025.5L0.0%2020.4Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.34'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M17.0%200.0L56.7%200.0L47.3%2029.0Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.02'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M17.0%200.0L47.3%2029.0L28.7%2025.5Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.04'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M56.7%200.0L71.6%200.0L79.1%2025.7Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.01'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M56.7%200.0L79.1%2025.7L47.3%2029.0Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.28'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M71.6%200.0L100.0%200.0L79.1%2025.7Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.16'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M100.0%200.0L100.0%2028.0L79.1%2025.7Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.20'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M0.0%2020.4L28.7%2025.5L30.1%2045.9Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.03'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M0.0%2020.4L30.1%2045.9L0.0%2052.2Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.17'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M28.7%2025.5L47.3%2029.0L30.1%2045.9Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.06'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M47.3%2029.0L48.0%2053.3L30.1%2045.9Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.07'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M47.3%2029.0L79.1%2025.7L48.0%2053.3Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.15'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M79.1%2025.7L78.2%2042.9L48.0%2053.3Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.04'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M79.1%2025.7L100.0%2028.0L100.0%2052.9Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.06'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M79.1%2025.7L100.0%2052.9L78.2%2042.9Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.19'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M0.0%2052.2L30.1%2045.9L0.0%2074.5Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.05'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M30.1%2045.9L31.8%2079.9L0.0%2074.5Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.02'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M30.1%2045.9L48.0%2053.3L44.0%2075.2Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.02'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M30.1%2045.9L44.0%2075.2L31.8%2079.9Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.00'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M48.0%2053.3L78.2%2042.9L81.8%2078.0Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.00'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M48.0%2053.3L81.8%2078.0L44.0%2075.2Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.04'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M78.2%2042.9L100.0%2052.9L100.0%2077.3Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.13'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M78.2%2042.9L100.0%2077.3L81.8%2078.0Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.08'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M0.0%2074.5L31.8%2079.9L0.0%20100.0Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.11'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M31.8%2079.9L26.2%20100.0L0.0%20100.0Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.08'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M31.8%2079.9L44.0%2075.2L26.2%20100.0Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.01'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M44.0%2075.2L56.6%20100.0L26.2%20100.0Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.07'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M44.0%2075.2L81.8%2078.0L56.6%20100.0Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.09'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M81.8%2078.0L81.5%20100.0L56.6%20100.0Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.01'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M81.8%2078.0L100.0%2077.3L100.0%20100.0Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.07'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M81.8%2078.0L100.0%20100.0L81.5%20100.0Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.18'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M36.4%2037.3L37.4%2040.3L40.4%2041.3L37.4%2042.3L36.4%2045.3L35.4%2042.3L32.4%2041.3L35.4%2040.3Z'%20fill%3D'%23fff'%20fill-opacity%3D'.9'%2F%3E%3Cpath%20d%3D'M73.6%2076.2L74.6%2079.2L77.6%2080.2L74.6%2081.2L73.6%2084.2L72.6%2081.2L69.6%2080.2L72.6%2079.2Z'%20fill%3D'%23fff'%20fill-opacity%3D'.9'%2F%3E%3Cpath%20d%3D'M18.9%2071.5L19.9%2074.5L22.9%2075.5L19.9%2076.5L18.9%2079.5L17.9%2076.5L14.9%2075.5L17.9%2074.5Z'%20fill%3D'%23fff'%20fill-opacity%3D'.9'%2F%3E%3C%2Fsvg%3E")}
.cell-flare.v1{--facets:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M0.0%200.0L18.2%200.0L32.9%2020.5Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.37'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M0.0%200.0L32.9%2020.5L0.0%2018.2Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.01'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M18.2%200.0L48.5%200.0L52.1%2019.3Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.09'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M18.2%200.0L52.1%2019.3L32.9%2020.5Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.33'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M48.5%200.0L69.5%200.0L52.1%2019.3Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.31'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M69.5%200.0L74.3%2026.5L52.1%2019.3Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.14'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M69.5%200.0L100.0%200.0L74.3%2026.5Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.08'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M100.0%200.0L100.0%2019.2L74.3%2026.5Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.25'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M0.0%2018.2L32.9%2020.5L0.0%2056.7Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.23'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M32.9%2020.5L31.2%2056.2L0.0%2056.7Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.00'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M32.9%2020.5L52.1%2019.3L56.2%2056.5Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.05'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M32.9%2020.5L56.2%2056.5L31.2%2056.2Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.10'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M52.1%2019.3L74.3%2026.5L79.2%2046.4Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.17'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M52.1%2019.3L79.2%2046.4L56.2%2056.5Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.13'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M74.3%2026.5L100.0%2019.2L79.2%2046.4Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.01'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M100.0%2019.2L100.0%2042.2L79.2%2046.4Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.23'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M0.0%2056.7L31.2%2056.2L18.2%2067.0Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.28'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M0.0%2056.7L18.2%2067.0L0.0%2071.0Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.07'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M31.2%2056.2L56.2%2056.5L18.2%2067.0Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.23'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M56.2%2056.5L51.9%2070.7L18.2%2067.0Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.18'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M56.2%2056.5L79.2%2046.4L51.9%2070.7Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.17'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M79.2%2046.4L78.9%2074.8L51.9%2070.7Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.21'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M79.2%2046.4L100.0%2042.2L78.9%2074.8Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.09'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M100.0%2042.2L100.0%2078.0L78.9%2074.8Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.10'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M0.0%2071.0L18.2%2067.0L20.8%20100.0Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.16'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M0.0%2071.0L20.8%20100.0L0.0%20100.0Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.22'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M18.2%2067.0L51.9%2070.7L56.1%20100.0Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.12'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M18.2%2067.0L56.1%20100.0L20.8%20100.0Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.04'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M51.9%2070.7L78.9%2074.8L56.1%20100.0Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.01'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M78.9%2074.8L70.8%20100.0L56.1%20100.0Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.14'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M78.9%2074.8L100.0%2078.0L70.8%20100.0Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.02'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M100.0%2078.0L100.0%20100.0L70.8%20100.0Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.19'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M68.0%2039.8L69.0%2042.8L72.0%2043.8L69.0%2044.8L68.0%2047.8L67.0%2044.8L64.0%2043.8L67.0%2042.8Z'%20fill%3D'%23fff'%20fill-opacity%3D'.9'%2F%3E%3Cpath%20d%3D'M25.9%2030.9L26.9%2033.9L29.9%2034.9L26.9%2035.9L25.9%2038.9L24.9%2035.9L21.9%2034.9L24.9%2033.9Z'%20fill%3D'%23fff'%20fill-opacity%3D'.9'%2F%3E%3Cpath%20d%3D'M88.8%2085.5L89.8%2088.5L92.8%2089.5L89.8%2090.5L88.8%2093.5L87.8%2090.5L84.8%2089.5L87.8%2088.5Z'%20fill%3D'%23fff'%20fill-opacity%3D'.9'%2F%3E%3C%2Fsvg%3E")}
.cell-flare.v2{--facets:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M0.0%200.0L27.1%200.0L27.3%2019.2Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.31'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M0.0%200.0L27.3%2019.2L0.0%2020.2Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.34'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M27.1%200.0L56.0%200.0L27.3%2019.2Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.34'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M56.0%200.0L50.0%2025.9L27.3%2019.2Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.20'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M56.0%200.0L81.7%200.0L50.0%2025.9Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.12'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M81.7%200.0L79.3%2032.1L50.0%2025.9Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.18'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M81.7%200.0L100.0%200.0L79.3%2032.1Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.15'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M100.0%200.0L100.0%2024.7L79.3%2032.1Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.20'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M0.0%2020.2L27.3%2019.2L24.1%2044.7Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.02'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M0.0%2020.2L24.1%2044.7L0.0%2045.0Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.05'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M27.3%2019.2L50.0%2025.9L52.6%2050.3Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.10'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M27.3%2019.2L52.6%2050.3L24.1%2044.7Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.13'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M50.0%2025.9L79.3%2032.1L52.6%2050.3Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.25'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M79.3%2032.1L76.0%2050.1L52.6%2050.3Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.13'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M79.3%2032.1L100.0%2024.7L100.0%2054.1Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.15'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M79.3%2032.1L100.0%2054.1L76.0%2050.1Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.07'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M0.0%2045.0L24.1%2044.7L29.0%2067.4Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.08'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M0.0%2045.0L29.0%2067.4L0.0%2072.8Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.32'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M24.1%2044.7L52.6%2050.3L46.8%2075.7Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.13'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M24.1%2044.7L46.8%2075.7L29.0%2067.4Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.18'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M52.6%2050.3L76.0%2050.1L70.2%2078.6Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.05'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M52.6%2050.3L70.2%2078.6L46.8%2075.7Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.21'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M76.0%2050.1L100.0%2054.1L100.0%2071.7Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.09'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M76.0%2050.1L100.0%2071.7L70.2%2078.6Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.17'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M0.0%2072.8L29.0%2067.4L20.8%20100.0Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.24'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M0.0%2072.8L20.8%20100.0L0.0%20100.0Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.05'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M29.0%2067.4L46.8%2075.7L52.6%20100.0Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.14'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M29.0%2067.4L52.6%20100.0L20.8%20100.0Z'%20fill%3D'%23fff'%20fill-opacity%3D'0.05'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M46.8%2075.7L70.2%2078.6L73.9%20100.0Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.24'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M46.8%2075.7L73.9%20100.0L52.6%20100.0Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.16'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M70.2%2078.6L100.0%2071.7L73.9%20100.0Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.05'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M100.0%2071.7L100.0%20100.0L73.9%20100.0Z'%20fill%3D'%23021a33'%20fill-opacity%3D'0.12'%20stroke%3D'%23fff'%20stroke-opacity%3D'.28'%20stroke-width%3D'.7'%2F%3E%3Cpath%20d%3D'M89.5%2012.0L90.5%2015.0L93.5%2016.0L90.5%2017.0L89.5%2020.0L88.5%2017.0L85.5%2016.0L88.5%2015.0Z'%20fill%3D'%23fff'%20fill-opacity%3D'.9'%2F%3E%3Cpath%20d%3D'M43.1%2031.2L44.1%2034.2L47.1%2035.2L44.1%2036.2L43.1%2039.2L42.1%2036.2L39.1%2035.2L42.1%2034.2Z'%20fill%3D'%23fff'%20fill-opacity%3D'.9'%2F%3E%3Cpath%20d%3D'M10.3%206.5L11.3%209.5L14.3%2010.5L11.3%2011.5L10.3%2014.5L9.3%2011.5L6.3%2010.5L9.3%209.5Z'%20fill%3D'%23fff'%20fill-opacity%3D'.9'%2F%3E%3C%2Fsvg%3E")}
.cell-flare.crystal::after{content:'';position:absolute;top:-20%;bottom:-20%;left:-60%;width:38%;background:linear-gradient(90deg,transparent,#ffffffd9,transparent);transform:skewX(-20deg);animation:crystal-glint 1.3s ease-in-out infinite}
.cell-flare.crystal.golden{--hi:#fff6c8;--c1:#ffd95c;--c2:#f5b12a;--c3:#c97d10;--c4:#7a4306;--rim:#ffeaa0;--edge:#3f2104;--glow:#ffc93c}
@keyframes crystal-glint{0%{left:-60%}55%,100%{left:130%}}
.ore-chip.crystal{background:#c8f7ff;border-color:#1b6f9a;box-shadow:1px 1px #ffffff,0 0 4px #5fe3ff}
.ore-chip.wood{width:9px;height:4px;border-color:#3d220c;border-radius:1px;background:#c98a4a;box-shadow:1px 1px #f2c58c}
/* A star that found nothing stays gray until the next spin. */
.mine-cell.star-dead .tile{filter:grayscale(.9) brightness(.6);opacity:.6;transform:scale(.9)}
.mine-cell.star-cell.star-dead{border-color:#6f7c80;box-shadow:inset 0 0 0 1px #9aa6a9}
.mine-board[data-reduced-motion=true] .cell-flare.crystal::after{animation:none}
.scooped-symbol{position:absolute!important;display:grid;place-items:center;z-index:3;pointer-events:none;opacity:0}
.mine-cell .tile-value,.mine-cell .cell-mult{font-variant-numeric:tabular-nums}
/* The multiplier joins the nugget while its own value counts upward. */
.tile-value.boosted-value{color:#fff0ad;text-shadow:0 2px 1px #382212,0 0 5px #8c561a}
.cell-boost-flight,.dynamite-boost-flight{z-index:9;font-style:normal;font-weight:950;font-size:clamp(12px,calc(var(--cell-size)*.24),26px);line-height:1;color:#a7ffdf;text-shadow:0 2px 2px #183c31,1px 0 #183c31,-1px 0 #183c31,0 0 8px #5ef1b8;white-space:nowrap}
.tile.absorbing-boost .tile-value,.tile.absorbing-boost .tile-factor{z-index:7;color:#fff5c8}

/* Share the source tile's geometry during the empty-to-full crossfade. */
.tile img.collector-fill{position:absolute;inset:0;margin:auto;z-index:1}
/* A coin's old tier fading out over its new one (animations.js tierChange): the same box, under its value. */
.tile img.tier-fade{position:absolute;inset:0;margin:auto;pointer-events:none}

.dynamite-boost-flight{color:#ffe0a0;text-shadow:0 2px 2px #622710,1px 0 #622710,-1px 0 #622710,0 0 8px #ff943e}

.cell-award-flight{z-index:10;font-style:normal;font-weight:950;font-size:clamp(18px,calc(var(--cell-size)*.36),32px);line-height:1;color:#baffeb;paint-order:stroke fill;-webkit-text-stroke:2px #174d43;text-shadow:0 2px #113b32,0 0 8px #5ef1b8;white-space:nowrap}.cell-award-flight.golden{color:#ffe879;-webkit-text-stroke-color:#784015;text-shadow:0 2px #643515,0 0 8px #ffc323}
/* Plank covers (COVER_STYLE 'planks', animations.js PLANKS): sprite strips from the plank-cover kit, sized and centred on the
   cell in JS. Board-up holds its resting cover while the reward swaps in; the break starts on that same image. */
.mine-fx.plank-fx{z-index:9;background:0 0/100% 100% no-repeat}
.plank-fx.up{background-image:url('./assets/drawn-v2/plank-up.webp')}.plank-fx.up.gilded{background-image:url('./assets/drawn-v2/plank-up-gilded.webp')}
.plank-fx.break{background-image:url('./assets/drawn-v2/plank-break.webp')}.plank-fx.break.gilded{background-image:url('./assets/drawn-v2/plank-break-gilded.webp')}
/* Symbol animations inside a cell: sprite strips stepped with background-position (animations.js stripFrames), each starting on a
   frame identical to the symbol's static art. Sized in JS to the art's drawn square (object-fit: contain), strip size from its frame count.
   inset:-50% keeps it centred when it is larger than the cell: with inset:0, WebKit left-aligns an oversized box instead of centring it. */
.sprite-fx{position:absolute;inset:-50%;margin:auto;width:91%;height:91%;z-index:2;pointer-events:none;opacity:0;background:0 0/100% 100% no-repeat}
.sprite-fx.glow{background-image:url('./assets/drawn-v2/scatter-glow.webp')}
.sprite-fx.burst{background-image:url('./assets/drawn-v2/scatter-burst.webp');z-index:3;transform-origin:50% 50%}
.sprite-fx.gem-shine{background-image:url('./assets/drawn-v2/seam-shine.webp')}
.sprite-fx.wild-bounce{background-image:url('./assets/drawn-v2/wild-bounce.webp')}
.sprite-fx.gold-bounce{background-image:url('./assets/drawn-v2/golden-seam-bounce-v2.webp')}
/* The lift lets the full explosion spill over neighbouring cells. */
.mine-cell.scatter-bursting{z-index:7}
/* Winning symbols breathe over a soft glow; two small, dim sparkles sit behind the symbol and only peek out around it. */
.win-aura{position:absolute;inset:8%;z-index:0;pointer-events:none;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff3c499 0%,#ffcf5a55 34%,#ffb13b1c 58%,transparent 72%)}
.win-aura:before,.win-aura:after{content:'';position:absolute;width:11%;aspect-ratio:1;background:radial-gradient(circle,#fff 0 18%,#ffe08a 40%,transparent 66%);clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);animation:win-twinkle 1.3s ease-in-out infinite}
.win-aura:before{left:24%;top:26%}.win-aura:after{right:22%;bottom:26%;animation-delay:.65s}
@keyframes win-twinkle{0%,100%{opacity:0;scale:.4}50%{opacity:.55;scale:1}}
.mine-board[data-reduced-motion=true] .win-aura::before,.mine-board[data-reduced-motion=true] .win-aura::after{animation:none}
/* A cleared symbol's gold burst (animations.js clearPop). */
.mine-fx.clear-pop{z-index:9;transform:translate(-50%,-50%);background:url('./assets/drawn-v2/clear-burst.webp') 0 0/1200% 100% no-repeat}
/* Dynamite: sprite strip on the effects layer, sized in JS to the art's drawn square and centred with negative margins (so
   rotate and the swell's scale both turn about its centre). At rest it shows the spent frame, tilted like the symbol,
   with the symbol's own shadow, so it matches the cell underneath at both ends of the animation. */
.mine-fx.dynamite-sprite{opacity:1;z-index:9;rotate:var(--dynamite-tilt,0deg);filter:drop-shadow(0 4px 3px #0006);background:url('./assets/drawn-v2/sym-dynamite-blast-v1.webp') 100% 0/5700% 100% no-repeat}

/* Full-art 3D beats share the still image's contain box. Value badges stay above this layer. */
.sprite-fx.symbol-motion-3d{filter:drop-shadow(0 3px 1px #08233370)}
.tile[data-kind=cart] .symbol-motion-3d{transform:scale(1.08)}
/* A basket or cart loading up a stage (animations.js loadUp: as it collects, or as dynamite, a keg or a boost counts it up): the
   load's frames play in its cell under the tile, so the value stays on top, and the tile's own art is hidden until the load ends
   on the new look, with its value glow (the silhouette, the lit pocket, the motes: they sit above the load and would cover it
   in gold). The glow then fades back in. */
.mine-cell.collector-loading>.tile :is(img,.value-aura),.mine-cell.collector-loading>.tile::before,.mine-cell.collector-loading>.tile::after{visibility:hidden}
/* (Specific enough to win over the glow's own breath in specials-fx.css, which loads later.) */
.mine-board .mine-cell.collector-loaded>.tile.value-light .value-aura,.mine-board .mine-cell.collector-loaded>.tile.value-light.gl-pocket::before{animation:glow-return .4s ease-out both}
@keyframes glow-return{from{opacity:0}}
.mine-cell>.collector-load{position:absolute;left:50%;top:50%;z-index:0;pointer-events:none;opacity:0;background:0 0/2400% 200% no-repeat}

/* Gold Ore presentation (gold-ore-fx.js, gold-ore-tally.js). */
/* A landed Gold Ore symbol's cell turns to gold and stays gold while the symbol sits there: a warm gold fill, a bright rim and a
   glow round the cell (it breathes gently). The cell is lifted so the symbol and its light can spill over the neighbours. The
   symbol settles larger and richer; gold-ore-fx.js animates to and from exactly this scale and filter (GOLD_STRIKE.rest). */
.mine-cell.gold-ore-cell{z-index:3;border-color:#ffe7a0;box-shadow:0 0 0 1px #8a560f,0 0 12px 2px #ffc53d99,0 0 26px 4px #ffb02e44;animation:gold-ore-breathe 1.6s ease-in-out infinite alternate}
.mine-cell.gold-ore-cell .cell-underlay{border-radius:4px;background:radial-gradient(ellipse at 50% 36%,#ffeaa6 0%,#f5c042 28%,#d0891b 60%,#7c480b 100%);box-shadow:inset 0 0 0 1.5px #fff1b8,inset 0 2px 7px #fff8dd99,inset 0 -7px 14px #5a300670}
.mine-cell.gold-ore-cell .tile{scale:1.16;filter:brightness(1.04) contrast(1.14) saturate(1.22)}
@keyframes gold-ore-breathe{to{box-shadow:0 0 0 1px #8a560f,0 0 18px 4px #ffd35fbb,0 0 34px 8px #ffb02e66}}
/* Behind the symbol, inside its cell: sunburst rays (the strike and the bonus entry) and a pulsing halo (every celebration). */
.gold-ore-rays,.gold-ore-halo{position:absolute;left:50%;top:50%;width:270%;aspect-ratio:1;translate:-50% -50%;z-index:0;pointer-events:none;opacity:0;border-radius:50%}
.gold-ore-rays{background:repeating-conic-gradient(from 4deg,#fff2c000 0deg 6deg,#fff0b8d0 9.5deg,#fff2c000 13deg 22.5deg);-webkit-mask:radial-gradient(circle,#000 10%,#0009 34%,transparent 68%);mask:radial-gradient(circle,#000 10%,#0009 34%,transparent 68%)}
.gold-ore-halo{width:190%;background:radial-gradient(circle,#fff3c2d0 0%,#ffd35f8c 30%,#ffb02e38 52%,transparent 70%)}
/* A light sweep over the static art (masked to it), for a strike with no strip playing over it: a soft warm band with a bright core. */
.tile .gold-ore-sheen{position:absolute;inset:-50%;margin:auto;width:100%;height:100%;z-index:3;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(110deg,transparent 40%,#ffe9a044 45%,#fff6d6c0 49%,#fffdf4e6 50%,#fff6d6c0 51%,#ffe9a044 55%,transparent 60%) 100% 0/300% 100% no-repeat;
  -webkit-mask:url('./assets/drawn-v2/golden-seam.png') center/contain no-repeat;mask:url('./assets/drawn-v2/golden-seam.png') center/contain no-repeat}
/* On the effects layer: the spotlight dim (clear over the symbol), a ring and star sparks. */
.mine-fx.gold-ore-dim{inset:0;z-index:1;background:radial-gradient(circle at var(--x,50%) var(--y,50%),transparent 0,transparent var(--r,40px),#020a0f9e calc(var(--r,40px) * 2.6))}
.mine-fx.gold-ore-ring{z-index:5;width:var(--cell-size);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,transparent 56%,#fff3c0e0 64%,#ffc93c99 69%,transparent 74%)}
.mine-fx.gold-ore-spark{z-index:6;width:calc(var(--cell-size) * .24);aspect-ratio:1;translate:-50% -50%;background:radial-gradient(circle,#fff 0 12%,#fff1b0 26%,#ffc53a 46%,transparent 64%);clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%)}
.mine-board[data-reduced-motion=true] .mine-cell.gold-ore-cell{animation:none}

/* The multiplier tally (Gold Ore finale and special-symbol collections): the running multiplier floats over the dimmed board, no
   box, with a soft dark halo behind it for contrast. Each cell's value flies into it. */
.mine-fx.gold-tally-dim{inset:0;z-index:10;background:radial-gradient(ellipse at 50% 46%,#020a0f66,#020a0fb8 70%)}
.mine-fx.gold-tally{z-index:12;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:0;padding:.2em .6em;font-size:clamp(12px,4.6cqw,38px);font-style:normal;white-space:nowrap}
.mine-fx.gold-tally::before{content:'';position:absolute;z-index:-1;inset:-18% -8%;border-radius:50%;background:radial-gradient(closest-side,#000000b3,#0000005c 58%,transparent)}
/* The label reads on its own: heavy cream capitals with a dark outline. */
.gold-tally-label{font-size:.66em;font-weight:950;font-style:italic;letter-spacing:.2em;line-height:1.1;color:#fff4d2;-webkit-text-stroke:max(2px,.14em) #2a1203;paint-order:stroke fill;text-shadow:0 .1em 0 #2a1203}
/* The figure is the bonus-headline style: heavy italic, solid bright gold, a thick dark outline, a hard drop and a warm glow (the
   molten-gold gradient was hard to read). Sized for its final length so it never reflows while counting. */
.gold-tally-value{--size:clamp(46px,19cqw,168px);font-size:min(var(--size),calc(88cqw / (var(--len,6) * .6)));line-height:1.02;font-weight:950;font-style:italic;font-variant-numeric:tabular-nums;padding:0 .12em;letter-spacing:.005em;
  color:#ffe45e;-webkit-text-stroke:max(4px,.09em) #2a1203;paint-order:stroke fill;text-shadow:0 .07em 0 #2a1203,0 .1em .25em #000b,0 0 .45em #ffb52eb3}
/* Special-symbol collections use the same tally, a little smaller and over a lighter dim, as it plays through ordinary spins. */
.mine-fx.gold-tally-dim.quick{background:radial-gradient(ellipse at 50% 46%,#020a0f40,#020a0f8c 70%)}
.mine-fx.gold-tally.quick{font-size:clamp(11px,3.8cqw,30px)}
.mine-fx.gold-tally.quick .gold-tally-value{--size:clamp(40px,15cqw,132px)}
.mine-fx.gold-tally-chip{z-index:11;translate:-50% -50%;font-style:normal;font-weight:950;font-size:clamp(11px,calc(var(--cell-size) * .3),28px);line-height:1;white-space:nowrap;color:#ffe45e;paint-order:stroke fill;-webkit-text-stroke:max(3px,.12em) #2a1203;text-shadow:0 2px #2a1203,0 0 .3em #000b}
.mine-fx.gold-tally-flash{inset:-4%;z-index:11;border-radius:12px;background:radial-gradient(circle at 50% 46%,#fff8dcee,#ffd35f88 30%,transparent 62%);mix-blend-mode:screen}

/* Dynamite blast (animations.js dynamite, blast-fx.js). The big fireball is a second copy of the strip, in step with the
   stick-sized one; it shares its z-index and comes after it, so the strength badges (added later) still fly over it. */
.mine-fx.dynamite-fireball{z-index:9;rotate:var(--dynamite-tilt,0deg);background:url('./assets/drawn-v2/sym-dynamite-blast-v1.webp') 0 0/5700% 100% no-repeat}
.mine-fx:is(.dyn-flash,.dyn-shock,.dyn-spark,.dyn-ember,.dyn-smoke){translate:-50% -50%}
.mine-fx.dyn-flash{z-index:11;width:var(--cell-size);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fffef5 0 18%,#ffe98acc 34%,#ffae3a66 55%,transparent 72%);mix-blend-mode:screen}
.mine-fx.dyn-light{inset:-10%;z-index:2;background:radial-gradient(circle at var(--x,50%) var(--y,50%),#ffb44a80,#ff7a1a2e 32%,transparent 62%);mix-blend-mode:screen}
.mine-fx.dyn-shock{z-index:8;width:var(--cell-size);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,transparent 54%,#fff3c8d8 63%,#ffb14a8c 69%,transparent 75%)}
.mine-fx.dyn-spark{z-index:10;width:max(2px,calc(var(--cell-size) * .055));height:calc(var(--cell-size) * .42);border-radius:50%;background:linear-gradient(#fff 0,#ffe27a 30%,#ff8a1e 70%,transparent);transform-origin:50% 50%}
.mine-fx.dyn-ember{z-index:10;width:calc(var(--cell-size) * .08);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff6c8 0 25%,#ffb13a 55%,transparent 72%)}
.mine-fx.dyn-smoke{z-index:8;width:calc(var(--cell-size) * .9);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#6f6b67c0 0,#57534f80 38%,#3f3c3a30 60%,transparent 72%)}

/* Anticipation, tumble-chain heat, star-ready pulse and hot cells. */
/* Scatter tease: the board dims around one spotlit column. */
.tease-dim{inset:0;z-index:1;background:#020a0fb8}
.tease-column{z-index:2;border:2px solid #ffe08a;border-radius:6px;transform-origin:50% 50%;background:linear-gradient(0deg,#ffc94a38,#ffe8a00c 60%,transparent);box-shadow:0 0 18px #ffc94acc,0 0 42px #ff9f2e77,inset 0 0 22px #ffd97a66}
.tease-spark{z-index:3;width:5px;height:5px;border-radius:50%;background:#fff3c2;box-shadow:0 0 6px 2px #ffc94a,0 0 14px #ff9f2e}
.mine-cell.tease-scatter{z-index:9}
.trigger-flash{inset:-6px;z-index:4;border-radius:12px;background:radial-gradient(ellipse at 50% 50%,#fff6d6ee,#ffd35f99 38%,transparent 72%);mix-blend-mode:screen}
.exposure-glint{z-index:2;width:var(--cell-size);height:var(--cell-height);border-radius:5px;background:radial-gradient(ellipse,#fff2b0aa,#ffc94a44 60%,transparent);box-shadow:inset 0 0 0 2px #ffe08a,0 0 16px #ffc94a99}

/* Tumble chains heat the grid's edge: warm, then orange, then a pulsing fire glow. */
.mine-grid{transition:box-shadow .4s ease-out}
.mine-board[data-chain="1"] .mine-grid{box-shadow:inset 0 0 14px #ffc94a55}
.mine-board[data-chain="2"] .mine-grid{box-shadow:inset 0 0 20px #ffb13b88,0 0 10px #ffb13b55}
.mine-board[data-chain="3"] .mine-grid{box-shadow:inset 0 0 26px #ff8b2aaa,0 0 16px #ff8b2a77}
.mine-board:is([data-chain="4"],[data-chain="5"]) .mine-grid{box-shadow:inset 0 0 32px #ff5a1fcc,0 0 22px #ff5a1f99;animation:chain-fire .5s ease-in-out infinite alternate}
@keyframes chain-fire{to{box-shadow:inset 0 0 40px #ff7a2aee,0 0 30px #ffb13bbb}}

/* A star on the board breathes in time with the gold cells it will open. */
.mine-board[data-star-ready=true] .mine-cell.star-cell{animation:star-call 1s ease-in-out infinite alternate}
.mine-board[data-star-ready=true] .exposed .cell-underlay{animation:star-answer 1s ease-in-out infinite alternate}
@keyframes star-call{from{box-shadow:inset 0 0 0 1px #c0f6ff,inset 0 0 14px #38bfff45,0 0 8px #38bfff70}to{box-shadow:inset 0 0 0 2px #e6fcff,inset 0 0 22px #63dcffaa,0 0 20px #63dcffcc}}
@keyframes star-answer{from{filter:brightness(1)}to{filter:brightness(1.45) drop-shadow(0 0 4px #9eeaff)}}

/* Exposed seam cells grow richer as more of the board opens. */
.mine-board[data-exposure="2"] .exposed .cell-underlay{background:radial-gradient(ellipse at 50% 55%,#ffc94752,#ffb52e24 70%);box-shadow:inset 0 0 0 2px #ffd76acc,inset 0 0 12px #ffc34a66}
.mine-board[data-exposure="3"] .exposed .cell-underlay{background:radial-gradient(ellipse,#ffd36a70,#c99a2a55);box-shadow:inset 0 0 0 2px #ffe08acc,inset 0 0 14px #ffd35f77;animation:seam-shimmer 1.6s ease-in-out infinite alternate}
@keyframes seam-shimmer{to{filter:brightness(1.35)}}
/* Super Bonus: gold cells are locked in for the whole bonus; a firmer gold edge shows they will not reset. */
.mine-board[data-feature=super-shift] .exposed .cell-underlay{box-shadow:inset 0 0 0 2px #ffd978cc,inset 0 0 12px #ffc94a55}

/* Boosted cells show their boost in the corner label only: no red glow from 8x up, no outline (it read as a stray border) and
   no warm tint (in an empty cell it read as a coin's glow left behind), 2026-10-05. */

.mine-board[data-reduced-motion=true] :is(.mine-grid,.mine-cell,.cell-underlay),.mine-board[data-reduced-motion=true] .cell-underlay:after{animation:none!important}

/* Winning clusters are traced as one glowing contour before they burst. */
.cluster-outline{left:0;top:0;overflow:visible;z-index:5}
.cluster-outline path{fill:none;stroke-linecap:square;stroke-linejoin:miter}
.cluster-outline .outline-glow{stroke:#ffc94a;stroke-width:7;opacity:.55;filter:blur(3px)}
.cluster-outline .outline-core{stroke:#fff4c8;stroke-width:2.5}

/* A star with nothing to open fizzles. */
.fizzle-puff{z-index:3;width:calc(var(--cell-size)*.7);height:calc(var(--cell-size)*.45);border-radius:50%;background:radial-gradient(ellipse,#9fb6c088,transparent 70%)}

/* Free Spins depth: each spin darkens a little more; the last spin opens a glowing gem cavern. */
.mine-depth{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .8s ease;--depth:0;
  background:radial-gradient(ellipse 75% 70% at 50% 45%,transparent 35%,rgb(2 8 22/calc(.25 + var(--depth)*.45)) 100%),
    radial-gradient(ellipse 40% 35% at 8% 100%,rgb(99 220 255/calc(var(--depth)*.35)),transparent 70%),
    radial-gradient(ellipse 40% 35% at 92% 100%,rgb(160 120 255/calc(var(--depth)*.3)),transparent 70%);
  transition:opacity .8s ease,background .9s ease}
.mine-depth[data-active=true]{opacity:1}
.mine-depth[data-final=true]{background:radial-gradient(ellipse 70% 65% at 50% 45%,transparent 40%,rgb(4 10 30/.55) 100%),
  radial-gradient(ellipse 55% 45% at 5% 100%,#63dcff88,transparent 70%),radial-gradient(ellipse 55% 45% at 95% 100%,#b58cff77,transparent 70%),
  radial-gradient(ellipse 50% 30% at 50% 0%,#ffe08a44,transparent 70%);animation:gem-cavern 2.4s ease-in-out infinite alternate}
@keyframes gem-cavern{to{filter:brightness(1.35) saturate(1.2)}}
body.mine-motion-off .mine-depth{animation:none!important}

/* A fixed scaffold lets illustrations accumulate while their existing timelines keep playing. */
@property --glow{syntax:'<color>';inherits:true;initial-value:#ffc93c}
@property --secondary{syntax:'<color>';inherits:true;initial-value:#fff3b0}
.mine-win-celebration{--glow:#ffc93c;--secondary:#fff3b0;--title-top:0%;--title-height:39%;--title-left:5%;--title-width:90%;--win-cart-size:clamp(70px,min(20vw,30vh),220px);isolation:isolate;-webkit-tap-highlight-color:transparent;overflow:hidden;background:rgb(3 9 11/.45);transition:--glow .45s,--secondary .45s}
.mine-win-celebration[data-stage=super]{--glow:#ff9a1c;--secondary:#ffe18a}
.mine-win-celebration[data-stage=mega]{--glow:#ff4a14;--secondary:#ffad36}
.mine-win-celebration[data-stage=epic]{--glow:#2fdcff;--secondary:#9cf7ff}
.mine-win-celebration[data-stage=maximum]{--glow:#ffd84a;--secondary:#3ee9ff}
.mine-win-celebration[data-mount=page]{position:fixed;inset:0;z-index:2147482000;display:block;width:auto;height:auto;padding:0;background:radial-gradient(ellipse 80% 75% at var(--cx,50%) var(--cy,50%),rgb(3 9 11/.4),rgb(3 9 11/.72))}
/* Performance (2026-10-05): no live filter on anything that moves. The page is dimmed, not blurred (a full-screen blur was redone
   every frame over the moving board and video); the halos and rays are soft gradients without a blur; the title, gem, plaque and
   pickaxe shadows and tier glows are baked into their art (devtools/sprites/bake-win-glows.py); the spinning cog's glow is painted.
   The shines that sweep across get layers of their own. */
.mine-win-content{position:relative;z-index:4;width:var(--scene-width,100%);aspect-ratio:var(--scene-ratio,1.1);height:auto;container-type:inline-size;pointer-events:none;isolation:isolate}
.mine-win-celebration[data-mount=page] .mine-win-content{position:absolute;left:var(--art-x,var(--cx));top:var(--art-y,var(--cy));translate:-50% -50%}
.mine-win-art{position:absolute;display:block;background:center/contain no-repeat;pointer-events:none;filter:drop-shadow(0 5px 3px #170b06aa)}
.mine-win-art[hidden]{display:none!important}
.mine-win-piece,.mine-win-frames{display:block;position:absolute;inset:0;background:center/contain no-repeat}
.mine-win-frames{background-position:0 0}
.mine-win-prop-drift{position:absolute;inset:0;display:block;transform-origin:50% 65%}
.mine-win-halo{inset:-6%;z-index:-4;background:radial-gradient(ellipse,color-mix(in srgb,var(--glow) 70%,transparent),transparent 66%);}
.mine-win-halo-core{inset:15% 13%;z-index:-3;background:radial-gradient(ellipse,color-mix(in srgb,var(--secondary) 75%,transparent),color-mix(in srgb,var(--glow) 35%,transparent) 40%,transparent 70%)}
.mine-win-rays{left:8%;top:7%;width:84%;aspect-ratio:1;z-index:-2;border-radius:50%;opacity:.18;background:repeating-conic-gradient(from 0deg,transparent 0deg 13deg,var(--secondary) 15.5deg 20.5deg,transparent 23.5deg 30deg);mask-image:radial-gradient(circle,#0003 12%,#000 28%,transparent 67%)}
/* Both letter planes occupy the same box. Only lettering changes during a tier transition. */
.mine-win-celebration[data-stage] .mine-win-title{position:absolute;left:var(--title-left);top:var(--title-top);width:var(--title-width);height:var(--title-height);display:block;z-index:8;margin:0;padding:0;font-size:0;line-height:0;color:transparent;background:none;-webkit-text-stroke:0;text-shadow:none;animation:none;filter:none;transform-origin:50% 65%;transition:top .7s cubic-bezier(.22,.8,.22,1),left .7s cubic-bezier(.22,.8,.22,1),width .7s cubic-bezier(.22,.8,.22,1),height .7s cubic-bezier(.22,.8,.22,1)}
.mine-win-title-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.mine-win-title-art{display:block;width:100%;height:100%;position:relative;container-type:size}
/* Baked lettering (WIN_GLOW_PAD.title px of margin): the box grows by that margin at the art's own scale (contain), so the
   letters land exactly where the plain art did. */
.mine-win-title-plane{display:block;position:absolute;inset:calc(-40 * min(100cqw / var(--art-w,1200), 100cqh / var(--art-h,371)));background:var(--letter-art) center/contain no-repeat}
.mine-win-title-shine{position:absolute;inset:0;will-change:transform;background:linear-gradient(110deg,transparent 42%,#fff8 49%,transparent 56%) -100% 0/300% 100% no-repeat;mask:var(--title-art) center/contain no-repeat}
/* A small increase over the original frame gives the bounce room without hiding the gem. */
.mine-win-payout{position:absolute;left:14%;top:46%;width:72%;height:22%;z-index:7;display:flex;align-items:center;justify-content:center;background:center/100% 100% no-repeat;transform-origin:50% 50%}
/* The plaque art is stretched to the box: its baked margin (50 px on 1200 x 299) is that share of the box on each side. */
.mine-win-payout::before{content:'';position:absolute;inset:calc(-100% * 50 / 299) calc(-100% * 50 / 1200);z-index:-1;background:var(--plaque-art) center/100% 100% no-repeat}
.mine-win-amount-impact{display:flex;align-items:center;justify-content:center;width:100%;transform-origin:50% 50%}
.mine-win-celebration .mine-win-amount{--amount-size:9cqw;display:block;position:relative;max-width:82%;font-size:min(var(--amount-size),calc(57cqw / (var(--len,10) * .67)));line-height:1.05;white-space:nowrap;overflow-wrap:normal;padding:0;font-weight:950;font-variant-numeric:tabular-nums;color:transparent;background:linear-gradient(180deg,#fffef1 8%,#ffeca6 35%,#ffd65d 50%,#e8a52b 55%,#fff1ae 92%);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:max(.5px,.035em) #3d1b04;paint-order:stroke fill;text-shadow:none;filter:drop-shadow(0 .04em 0 #3d1b04)}
.mine-win-ground{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
/* A single cart travels below the central tools and payoff. */
.mine-win-cart-pass{left:0;bottom:-6px;width:100%;height:var(--win-cart-size);z-index:3;transform-origin:50% 100%;filter:none}
.mine-win-cart{position:absolute;left:0;bottom:0;display:block;width:var(--win-cart-size);height:var(--win-cart-size);will-change:transform;transform:translateX(calc(50vw - 50%))}
.mine-win-cart-body,.mine-win-cart-art,.mine-win-cart-ghost,.mine-win-cart-ghost-far{position:absolute;inset:0;display:block;background:center/contain no-repeat}
.mine-win-cart-art{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--secondary) 45%,transparent)) drop-shadow(0 6px 5px #0009)}
.mine-win-cart-ghost{opacity:.3;translate:-9% 0;filter:blur(2px) brightness(1.35)}
.mine-win-cart-ghost-far{opacity:.14;translate:-20% 0;filter:blur(4px) brightness(1.5)}
.mine-win-cart-streak{position:absolute;right:62%;top:14%;width:180%;height:70%;opacity:.5;background:repeating-linear-gradient(180deg,transparent 0 6%,#c9f8ffb0 6% 7.4%,transparent 7.4% 11%,#fff4c860 11% 11.8%,transparent 11.8% 17%);mask-image:linear-gradient(90deg,transparent,#000 85%)}
.mine-win-cart-grind{position:absolute;top:86%;width:14%;aspect-ratio:1;translate:-50% -50%;opacity:0;background:radial-gradient(circle,#fffbe0 0 7%,#ffc04ad0 18%,#ff7a1a50 40%,transparent 68%)}
.mine-win-pick-left,.mine-win-pick-right{top:31%;width:31%;aspect-ratio:256/320;z-index:0;transform-origin:50% 85%;filter:none}
.mine-win-pick-left{left:12%;rotate:-27deg}.mine-win-pick-right{right:12%;scale:-1 1;rotate:27deg}
/* Bundles share the central scaffold and sit behind both pickaxes and the gem. */
.mine-win-dynamite-left,.mine-win-dynamite-right{top:40%;width:18%;aspect-ratio:2/3;translate:-50% 0;z-index:-1;transform-origin:50% 80%}
.mine-win-dynamite-left{left:20%;rotate:-18deg}.mine-win-dynamite-right{left:80%;scale:-1 1;rotate:18deg}
/* Desktop bundles tuck into the gear's sides; phones retain the wider tool framing. */
.mine-win-celebration[data-mobile=none] .mine-win-dynamite-left{left:34%}
.mine-win-celebration[data-mobile=none] .mine-win-dynamite-right{left:66%}
.mine-win-celebration[data-mobile=none] :is(.mine-win-dynamite-left,.mine-win-dynamite-right){top:34%}
.mine-win-celebration[data-layout=wide][data-mobile=none] :is(.mine-win-dynamite-left,.mine-win-dynamite-right){top:28%}
.mine-win-fuse-glint{position:absolute;left:17%;top:7%;width:15%;aspect-ratio:1;translate:-50% -50%;background:radial-gradient(circle,#fffad9 12%,#ffdf70 25%,#ff851c66 55%,transparent 72%);filter:drop-shadow(0 0 5px #ffb63c)}
.mine-win-fuse-glint[data-fuse=rear]{left:86%;top:16%}
/* Dynamite: the sticks sway inside the node, so the shadow goes on the swaying image, not the node around it. */
.mine-win-dynamite-left,.mine-win-dynamite-right{filter:none}
:is(.mine-win-dynamite-left,.mine-win-dynamite-right)>.mine-win-piece{filter:drop-shadow(0 5px 3px #170b06aa)}
.mine-win-crest{left:22%;top:35%;width:56%;height:44%;z-index:2;filter:none}
/* The spinning cog's glow is painted (a ring behind it), as a drop-shadow on it would be redone every frame. */
.mine-win-gear::before{content:'';position:absolute;inset:-8%;border-radius:50%;background:radial-gradient(closest-side,transparent 52%,color-mix(in srgb,var(--glow) 60%,transparent) 64%,color-mix(in srgb,var(--glow) 30%,transparent) 86%,transparent)}
.mine-win-crest-impact{position:absolute;inset:0;display:block;transform-origin:50% 50%}
.mine-win-impact-flash,.mine-win-impact-ring{position:absolute;left:50%;top:57%;width:86%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;opacity:0;z-index:1}
.mine-win-impact-flash{background:radial-gradient(circle,#fff7c9 0%,color-mix(in srgb,var(--secondary) 75%,transparent) 22%,color-mix(in srgb,var(--glow) 50%,transparent) 38%,transparent 67%);mix-blend-mode:screen}
.mine-win-impact-ring{border-radius:50%;border:2px solid color-mix(in srgb,var(--secondary) 75%,transparent);box-shadow:0 0 12px var(--glow),inset 0 0 12px var(--glow);mask-image:conic-gradient(#000,transparent 12%,#000 24%,transparent 38%,#000 50%,transparent 64%,#000 76%,transparent 89%,#000)}
.mine-win-sparks{left:50%;top:57%;width:0;height:0;z-index:1;filter:none}
.mine-win-spark{position:absolute;left:0;top:0;width:var(--spark-length,1.5cqw);height:max(1px,.21cqw);border-radius:50%;opacity:0;background:linear-gradient(90deg,#ff841c00,#ffb32f 35%,#fff1a3 80%,#fff 100%);box-shadow:0 0 4px #ffbf48;transform-origin:100% 50%}
.mine-win-gear{left:11%;top:50%;width:78%;aspect-ratio:1;translate:0 -50%;z-index:0;filter:none}
.mine-win-gear-rotor{position:absolute;inset:0;display:block;background:center/contain no-repeat;transform-origin:50% 50%;will-change:transform}
.mine-win-crest-core{inset:0;z-index:1;filter:none;container-type:size}
.mine-win-core-plane{position:absolute;inset:calc(-52 * min(100cqw / 720, 100cqh / 465));display:block;background:center/contain no-repeat}
.mine-win-gem-shine{position:absolute;inset:0;will-change:transform;clip-path:polygon(50% 5%,70% 50%,50% 95%,30% 50%);background:linear-gradient(110deg,transparent 43%,#fff9 49%,transparent 55%) -100% 0/300% 100% no-repeat;mix-blend-mode:screen;opacity:.65}
.mine-win-glint{z-index:10;width:5%;aspect-ratio:1;background:radial-gradient(circle,#fff 0%,#fff 9%,transparent 55%);clip-path:polygon(50% 0,59% 40%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 40%);filter:drop-shadow(0 0 6px var(--secondary));opacity:0}
.glint-0{left:15%;top:48%;width:4%}.glint-1{left:81%;top:48%;width:4%}.glint-2{left:76%;top:31%}.glint-3{left:16%;top:47%}.glint-4{left:82%;top:42%}.glint-5{left:63%;top:40%;width:4%}.glint-6{left:36%;top:32%}.glint-7{left:61%;top:37%}
.mine-win-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}
.mine-win-shower{position:absolute;inset:0;pointer-events:none}
.mine-win-celebration[data-mount=page] .mine-win-shower{inset:auto;left:var(--cx);top:var(--cy);width:0;height:0}
.mine-win-coin{position:absolute;left:50%;top:50%;width:var(--s,44px);height:var(--s,44px);margin:calc(var(--s,44px)/-2) 0 0 calc(var(--s,44px)/-2);opacity:0;object-fit:contain;will-change:transform;user-select:none;image-rendering:auto}
.mine-win-celebration[data-motion=reduced] .mine-win-frames{background-image:var(--sprite-poster)!important;background-size:100% 100%!important;background-position:0 0!important}
.mine-win-celebration[data-motion=reduced] .mine-win-glint{opacity:.7}
.mine-win-celebration[data-motion=reduced] .mine-win-halo{opacity:.5}
.mine-win-celebration[data-motion=reduced] :is(.mine-win-title-shine,.mine-win-gem-shine,.mine-win-impact-flash,.mine-win-impact-ring,.mine-win-sparks){display:none}
.mine-win-celebration[data-motion=reduced] :is(.mine-win-title,.mine-win-payout,.mine-win-dynamite-left,.mine-win-dynamite-right){transition:none}
.mine-win-celebration[data-motion=reduced] :is(.mine-win-cart-streak,.mine-win-cart-ghost,.mine-win-cart-ghost-far,.mine-win-cart-grind){display:none}
/* Short landscape keeps the same layout for every stage, using the one-line Maximum title. */
.mine-win-celebration[data-layout=wide]{--title-top:0%;--title-height:35%}
.mine-win-celebration[data-layout=wide] .mine-win-title-plane[data-title=maximum]{background-image:var(--title-wide-glow);--art-w:1200;--art-h:274}
.mine-win-celebration[data-layout=wide] .mine-win-title[data-title=maximum] .mine-win-title-shine{mask-image:var(--title-wide-art)}
.mine-win-celebration[data-layout=wide] .mine-win-crest{top:29%;height:51%;width:50%;left:25%}
.mine-win-celebration[data-layout=wide] .mine-win-payout{top:42.5%;height:24%}
.mine-win-celebration[data-layout=wide] :is(.mine-win-impact-flash,.mine-win-impact-ring){top:54.5%}
.mine-win-celebration[data-layout=wide] :is(.mine-win-pick-left,.mine-win-pick-right){top:25%;width:27%}
.mine-win-celebration[data-layout=wide] .mine-win-sparks{top:54.5%}
.mine-win-celebration[data-layout=wide] :is(.mine-win-dynamite-left,.mine-win-dynamite-right){top:34%;width:16%}
/* Portrait lifts the tool heads above the gear, with dynamite peeking from behind. */
.mine-win-celebration[data-layout=portrait]{--title-top:8%;--title-height:28%;--title-left:0%;--title-width:100%;--spark-reach:1.65;--win-cart-size:clamp(105px,42vw,190px)}
.mine-win-celebration[data-layout=portrait] .mine-win-crest{left:-6%;top:30%;width:112%;height:50%}
.mine-win-celebration[data-layout=portrait] .mine-win-payout{left:-2%;top:48%;width:104%;height:14%}
/* Long totals leave side padding for the combined idle and final-impact stretch. */
.mine-win-celebration[data-layout=portrait] .mine-win-amount{--amount-size:13cqw;font-size:min(var(--amount-size),calc(72cqw / (var(--len,10) * .67)))}
.mine-win-celebration[data-layout=portrait] :is(.mine-win-pick-left,.mine-win-pick-right){top:20%;width:60%}
.mine-win-celebration[data-layout=portrait] .mine-win-pick-left{left:17%}
.mine-win-celebration[data-layout=portrait] .mine-win-pick-right{right:17%}
.mine-win-celebration[data-layout=portrait] :is(.mine-win-impact-flash,.mine-win-impact-ring,.mine-win-sparks){top:55%}
.mine-win-celebration[data-layout=portrait] :is(.mine-win-dynamite-left,.mine-win-dynamite-right){top:34%;width:32%}
.mine-win-celebration[data-mobile=landscape]{--title-top:-2%;--title-height:42%;--title-left:3%;--title-width:94%}
.mine-win-celebration[data-mobile=landscape] .mine-win-crest{left:23%;top:25%;width:54%;height:64%}
.mine-win-celebration[data-mobile=landscape] .mine-win-payout{left:9%;top:41%;width:82%;height:32%}
.mine-win-celebration[data-mobile=landscape] .mine-win-amount{--amount-size:10cqw;font-size:min(var(--amount-size),calc(56cqw / (var(--len,10) * .67)))}
.mine-win-celebration[data-mobile=landscape] :is(.mine-win-pick-left,.mine-win-pick-right){top:15%;width:32%}
.mine-win-celebration[data-mobile=landscape] :is(.mine-win-impact-flash,.mine-win-impact-ring,.mine-win-sparks){top:57%}
.mine-win-celebration[data-mobile=landscape] :is(.mine-win-dynamite-left,.mine-win-dynamite-right){top:29%;width:17%}

/* Ambient scene life, board sizing and feature moods. */
/* Scene layers paint over body's background and under #game (z-index 1), in this order:
   html::before Free Spins tint, body::before crystals, body::after lanterns, html::after glints,
   then inside #game: ::before dust, ::after Gold Ore tint. Cover-box layers size their gradients
   like body's background-size:cover (the art is 3:2), so percentages address points in background.webp. */
:root{--mine-cover:max(100vw,150vh) max(100vh,66.667vw)}
html::before,html::after,body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-repeat:no-repeat}
html::after,body::before,body::after{background-position:center;background-size:var(--mine-cover)}

/* Turquoise crystal clusters breathe slowly. */
body::before{opacity:.5;animation:mine-crystal 7s ease-in-out infinite alternate;background-image:
 radial-gradient(ellipse 7% 10.5% at 5% 57%,#6ff6ff5a,transparent),
 radial-gradient(ellipse 5% 7.5% at 9% 67%,#6ff6ff52,transparent),
 radial-gradient(ellipse 4.5% 6.75% at 24.5% 76%,#6ff6ff52,transparent),
 radial-gradient(ellipse 4% 6% at 22% 16%,#6ff6ff46,transparent),
 radial-gradient(ellipse 3.5% 5.25% at 30% 60%,#6ff6ff40,transparent),
 radial-gradient(ellipse 5% 7.5% at 93% 46%,#6ff6ff56,transparent),
 radial-gradient(ellipse 6% 9% at 87% 63%,#6ff6ff52,transparent),
 radial-gradient(ellipse 4% 6% at 97.5% 80%,#6ff6ff52,transparent),
 radial-gradient(ellipse 4% 6% at 68.5% 70%,#6ff6ff46,transparent),
 radial-gradient(ellipse 3% 4.5% at 78% 36%,#6ff6ff40,transparent)}
@keyframes mine-crystal{from{opacity:.35}to{opacity:.9}}
@keyframes mine-crystal-hot{from{opacity:.8}to{opacity:1}}

/* Lantern light: two large and two small lanterns hanging from the timbers. */
body::after{opacity:.8;animation:mine-flicker 4.7s linear infinite;background-image:
 radial-gradient(ellipse 3.4% 5.1% at 11.4% 22.6%,#fff1c2b0,#ffc56a50 45%,transparent),
 radial-gradient(ellipse 13% 19.5% at 11.4% 22.6%,#ffae4838,#ff963010 55%,transparent),
 radial-gradient(ellipse 2% 3% at 18.4% 37.6%,#fff0bca0,#ffc56a40 45%,transparent),
 radial-gradient(ellipse 7% 10.5% at 18.4% 37.6%,#ffae4828,transparent),
 radial-gradient(ellipse 3.4% 5.1% at 92.1% 23.8%,#fff1c2b0,#ffc56a50 45%,transparent),
 radial-gradient(ellipse 13% 19.5% at 92.1% 23.8%,#ffae4838,#ff963010 55%,transparent),
 radial-gradient(ellipse 2% 3% at 86.3% 32.8%,#fff0bca0,#ffc56a40 45%,transparent),
 radial-gradient(ellipse 7% 10.5% at 86.3% 32.8%,#ffae4828,transparent)}
@keyframes mine-flicker{0%,100%{opacity:.8}7%{opacity:.93}11%{opacity:.7}19%{opacity:.97}27%{opacity:.84}34%{opacity:.9}41%{opacity:.68}46%{opacity:.88}58%{opacity:.95}66%{opacity:.76}72%{opacity:.9}84%{opacity:.8}91%{opacity:.98}}
@keyframes mine-flicker-low{0%,100%{opacity:.4}11%{opacity:.32}19%{opacity:.48}41%{opacity:.3}58%{opacity:.46}72%{opacity:.38}91%{opacity:.5}}

/* Star glints on crystal tips: a quick double sparkle, then rest. */
html::after{opacity:0;animation:mine-glint 6.5s ease-in-out infinite;background-image:
 radial-gradient(ellipse 1.3% .22% at 4.4% 44%,#fff,#c8fbff80 35%,transparent),radial-gradient(ellipse .15% 2% at 4.4% 44%,#fff,#c8fbff80 35%,transparent),
 radial-gradient(ellipse 1% .18% at 17.6% 47.5%,#fff,#c8fbff80 35%,transparent),radial-gradient(ellipse .12% 1.5% at 17.6% 47.5%,#fff,#c8fbff80 35%,transparent),
 radial-gradient(ellipse 1% .18% at 25.3% 71.5%,#fff,#c8fbff80 35%,transparent),radial-gradient(ellipse .12% 1.5% at 25.3% 71.5%,#fff,#c8fbff80 35%,transparent),
 radial-gradient(ellipse 1% .18% at 68.3% 63%,#fff,#c8fbff80 35%,transparent),radial-gradient(ellipse .12% 1.5% at 68.3% 63%,#fff,#c8fbff80 35%,transparent),
 radial-gradient(ellipse 1.3% .22% at 91.6% 42%,#fff,#c8fbff80 35%,transparent),radial-gradient(ellipse .15% 2% at 91.6% 42%,#fff,#c8fbff80 35%,transparent),
 radial-gradient(ellipse 1% .18% at 23.2% 13%,#fff,#c8fbff80 35%,transparent),radial-gradient(ellipse .12% 1.5% at 23.2% 13%,#fff,#c8fbff80 35%,transparent)}
@keyframes mine-glint{0%,24%,40%,58%,72%,100%{opacity:0}30%{opacity:.95}64%{opacity:.6}}

/* Dust motes drift upward behind the shell; the 420px tile loops seamlessly. */
#game::before,#game::after{content:"";position:absolute;z-index:-1;pointer-events:none}
#game::before{inset:0 0 -420px;opacity:.75;background-size:340px 420px;animation:mine-dust-rise 48s linear infinite;background-image:
 radial-gradient(circle at 12% 18%,#ffe6a7b0 0 1.1px,transparent 2.2px),radial-gradient(circle at 71% 9%,#bff4ff90 0 .9px,transparent 1.9px),
 radial-gradient(circle at 38% 44%,#ffe6a790 0 1.4px,transparent 2.6px),radial-gradient(circle at 88% 57%,#ffd88aa0 0 1px,transparent 2px),
 radial-gradient(circle at 23% 79%,#bff4ff80 0 1.2px,transparent 2.4px),radial-gradient(circle at 60% 92%,#ffe6a780 0 .8px,transparent 1.8px),
 radial-gradient(circle at 52% 27%,#fff3d060 0 .7px,transparent 1.6px)}
@keyframes mine-dust-rise{0%{transform:translate3d(0,0,0)}25%{transform:translate3d(14px,-105px,0)}50%{transform:translate3d(0,-210px,0)}75%{transform:translate3d(-14px,-315px,0)}100%{transform:translate3d(0,-420px,0)}}

/* Warm breathing light around the timber frame (src/frame.js): an outer glow behind the timbers, so cells stay untouched. */
.mine-frame::before{content:"";position:absolute;z-index:-1;inset:1.5% 3.9%;border-radius:8px;pointer-events:none;box-shadow:0 0 18px 2px #ffc9704a,0 0 48px 6px #ffae4a1c;opacity:.6;animation:mine-frame 5.5s ease-in-out infinite alternate;transition:box-shadow .6s ease}
@keyframes mine-frame{from{opacity:.35}to{opacity:.95}}

/* Feature moods: Free Spins goes deeper and bluer under brighter crystals; Gold Ore turns warm and intense. */
html::before{opacity:0;transition:opacity .6s ease;background:
 radial-gradient(ellipse 30% 40% at 6% 88%,#35e4ff2c,transparent),radial-gradient(ellipse 30% 40% at 94% 88%,#35e4ff2c,transparent),
 radial-gradient(ellipse 62% 62% at 50% 46%,transparent 40%,#020c28c0),linear-gradient(#0a2a6a60,#041a4a78)}
#game::after{inset:-12% -30%;opacity:0;transition:opacity .6s ease;background:
 radial-gradient(ellipse 30% 36% at 50% 46%,#ffcf6a3c,transparent),
 radial-gradient(ellipse 44% 50% at 50% 48%,transparent 42%,#2a1200c8),linear-gradient(#ff9b2a1c,#c8641830)}
html:has(.mine-board:is([data-feature=shift],[data-feature=super-shift]))::before,body:has(.mine-board[data-feature=motherlode]) #game::after{opacity:1}
body:has(.mine-board[data-feature=motherlode]) #game::after{animation:mine-breathe 2.6s ease-in-out infinite alternate}
@keyframes mine-breathe{from{transform:scale(1)}to{transform:scale(1.06)}}
body:has(.mine-board:is([data-feature=shift],[data-feature=super-shift]))::before{animation:mine-crystal-hot 2.8s ease-in-out infinite alternate}
body:has(.mine-board:is([data-feature=shift],[data-feature=super-shift]))::after{animation-name:mine-flicker-low;animation-duration:6.5s}
html:has(.mine-board:is([data-feature=shift],[data-feature=super-shift]))::after{animation-duration:3.2s}
body:has(.mine-board:is([data-feature=shift],[data-feature=super-shift])) #game::before{animation-duration:22s}
body:has(.mine-board[data-feature=motherlode])::after{animation-duration:2.4s}
body:has(.mine-board[data-feature=motherlode]) #game::before{animation-duration:26s;opacity:1}
.mine-board:is([data-feature=shift],[data-feature=super-shift]) .mine-frame::before{box-shadow:0 0 20px 3px #5fe8ff70,0 0 56px 10px #2fb8ff30;animation-duration:3s}
.mine-board[data-feature=motherlode] .mine-frame::before{box-shadow:0 0 22px 4px #ffd36a88,0 0 64px 14px #ffb2383c;animation-duration:2s}

/* Pause while hidden; reduced motion (the game's setting, defaulting to the system's) freezes the lights and drops moving motes and glints. */
/* A hidden tab pauses every CSS loop (feature moods included, whose :has() rules would otherwise out-rank a narrower list). */
body.mine-hidden *,body.mine-hidden *::before,body.mine-hidden *::after,body.mine-hidden::before,body.mine-hidden::after,html:has(body.mine-hidden)::after{animation-play-state:paused!important}
body.mine-motion-off::before,body.mine-motion-off::after,body.mine-motion-off #game::after,body.mine-motion-off .mine-frame::before,body.mine-motion-off .mine-frame>i,body.mine-motion-off .mf-sweep::before,.mine-board[data-reduced-motion=true] .mine-frame>i,slot-game-shell[data-reduced=true] .mf-sweep::before,slot-game-shell[data-reduced=true] .mine-frame::before{animation:none!important}
html:has(body.mine-motion-off)::after,body.mine-motion-off #game::before{animation:none!important;opacity:0!important}
/* Portrait crops the art to its centre; skip the off-screen cover-box layers. */
@media(max-aspect-ratio:1/1){html::after,body::before,body::after{display:none}}

/* Native background owns the scene's lights, glints and dust. The existing frame and feature transitions keep their effects. */
body.mine-native-background::before,body.mine-native-background::after,html:has(body.mine-native-background)::after,body.mine-native-background #game::before{display:none}
body.mine-native-background #game::after{animation:none!important}
html:has(body.mine-native-background .mine-board[data-feature=super-shift])::before{background:radial-gradient(ellipse 62% 62% at 50% 46%,transparent 40%,#130729a6),linear-gradient(#4f166b30,#21083b50)}

/* Feature entry transition (src/feature-transition.js): a fixed full-viewport layer on body, above everything.
   --cx/--cy mark the board centre in viewport pixels. Sizes use viewport units, not the game canvas. */
.mine-feature-intro{position:fixed;inset:0;z-index:2147483000;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;overflow:hidden;contain:strict}
.mine-feature-intro:focus{outline:none}
.mine-feature-intro{cursor:default}
.mfi-dim{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse 75% 70% at var(--cx) var(--cy),#04141fd9 0,#020a12f7 100%)}
/* Gold Ore: an even dim, no spotlight pooling in the middle. */
.mine-feature-intro[data-feature=motherlode] .mfi-dim{background:#130a02ee}
.mfi-stage,.mfi-cam{position:absolute;inset:0;pointer-events:none}
.mfi-stage>*,.mfi-cam>*{position:absolute;opacity:0}
.mfi-stage>.mfi-cam{opacity:1}
.mfi-flash{inset:0;background:radial-gradient(circle at var(--cx) var(--cy),#fff 0,#c8fbffe6 18vmax,#5ee0ff55 42vmax,transparent 75vmax)}
.mine-feature-intro[data-feature=motherlode] .mfi-flash{background:radial-gradient(circle at var(--cx) var(--cy),#fff 0,#ffeaa0e6 18vmax,#ffc04a55 42vmax,transparent 75vmax)}
.mfi-title{display:block;font-size:min(13vw,15vh,150px);font-weight:950;font-style:italic;line-height:1;letter-spacing:-.01em;white-space:nowrap;color:#b8fff4;-webkit-text-stroke:max(3px,.035em) #0f4750;paint-order:stroke fill;text-shadow:0 .05em #0c3a42,0 0 .25em #5fe8ffc0,0 .1em .18em #000a}
.mfi-title-wrap{left:50%;top:clamp(32vh,var(--cy),68vh);display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2.5vh,22px);text-align:center;transform:translate(-50%,-50%);opacity:1}
.mfi-title-wrap>*{opacity:0}
.mfi-title-wrap,.mfi-gold-words{isolation:isolate;z-index:3}
.mfi-title-wrap>.mfi-text-sparks,.mfi-gold-words>.mfi-text-sparks{position:absolute;left:50%;top:50%;width:min(90vw,110vh,940px);aspect-ratio:1;translate:-50% -50%;container-type:inline-size;opacity:1;z-index:-1;pointer-events:none}
.mfi-text-sparks>.mine-win-spark{left:50%;top:50%}
.mfi-title-wrap>:is(.mfi-title,.mfi-award-count,.mfi-award-unit),.mfi-gold-words>:is(.mfi-title,.mfi-gold-sub){transform-origin:50% 65%}
.mfi-glow{left:var(--cx);top:var(--cy);width:130vmax;aspect-ratio:1;background:radial-gradient(circle,#8ff3ffb0 0,#34c8ff4a 22%,transparent 55%)}
/* Free Spins: a giant cart thunders along a rail across the whole screen. */
.mfi-track{left:-2%;right:-2%;height:max(10px,2.2vmin);margin-top:-.4vmin;border-radius:2px;background:linear-gradient(#e9fbff,#8fb4c4 35%,#3b5361 70%,#1a262e);box-shadow:0 0 0 2px #0b1418,0 0 3vmin #5fe0ffa0,0 3vmin 0 -.4vmin #5a3517,0 3vmin 0 1px #1b0f07}
.mfi-cart{left:0;opacity:1;will-change:transform}
.mfi-cart>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.mfi-cart-art{filter:drop-shadow(0 0 2.5vmin #6ee7ffa0) drop-shadow(0 2vmin 2vmin #000a)}
.mfi-grind{position:absolute;top:86%;width:20%;aspect-ratio:1;translate:-50% -50%;background:radial-gradient(circle,#fffbe0 0 7%,#ffc04ad0 18%,#ff7a1a50 40%,transparent 68%);animation:mfi-grind .08s steps(2) infinite alternate}
@keyframes mfi-grind{to{transform:scale(.72) rotate(40deg);opacity:.75}}
.mfi-ghost{opacity:.34;translate:-9% 0;filter:blur(1.2vmin) brightness(1.4)}
.mfi-ghost-far{opacity:.16;translate:-20% 0;filter:blur(2.4vmin) brightness(1.6)}
.mfi-streak{position:absolute;right:62%;top:14%;width:180%;height:70%;background:repeating-linear-gradient(180deg,transparent 0 6%,#c9f8ffd8 6% 7.4%,transparent 7.4% 11%,#fff4c880 11% 11.8%,transparent 11.8% 17%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 85%);mask-image:linear-gradient(90deg,transparent,#000 85%)}
.mfi-speed{border-radius:9px;background:linear-gradient(90deg,transparent,#dffbffb0 60%,#fff)}
.mfi-spark{height:max(4px,1vmin);border-radius:9px;background:linear-gradient(90deg,#ff5a1000,#ff9a2a 45%,#ffe48a 80%,#fff);box-shadow:0 0 1.4vmin .4vmin #ffa640c0}
.mfi-dust{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#b9a58ac0 0,#8a765d70 38%,transparent 68%)}
.mfi-rock{aspect-ratio:10/9}.mfi-rock svg{display:block;width:100%;height:100%}
.mfi-shard{aspect-ratio:1/2;filter:drop-shadow(0 0 1.2vmin #5fe8ffb0)}.mfi-shard svg{display:block;width:100%;height:100%}
/* Gold Ore: a golden burst that fills the screen. */
/* The transition's Gold Ore symbol: its 60 fps grid sheet over a soft static glow. The glow is a layer of its own (full size,
   so the frame stepping never moves it) instead of a drop-shadow filter, which had to be redrawn at full size on every frame. */
.mfi-seam{z-index:2;aspect-ratio:1;background:url('./assets/drawn-v2/golden-seam-transition.webp') 0 0/1000% 900% no-repeat,radial-gradient(circle,#ffd35a5c 0,#ffd35a26 40%,transparent 66%) 0 0/100% 100% no-repeat}
.mfi-gold-words{left:3%;right:3%;opacity:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.mfi-gold-words>*{opacity:0}
.mfi-gold-sub{display:block;margin-top:.35em;font-size:min(5.6vw,6.5vh,64px);font-weight:950;font-style:italic;line-height:1;letter-spacing:.03em;white-space:nowrap;color:#fff6d6;-webkit-text-stroke:max(2px,.06em) #6b3510;paint-order:stroke fill;text-shadow:0 .06em #5a2c0c,0 0 .3em #ffcf5ab0,0 .1em .2em #000a}
/* Super Bonus: the same cart ride in the Super Bonus violet (its buy confirmation's palette), with its award under the title. */
.mine-feature-intro[data-feature=super-shift] .mfi-dim{background:radial-gradient(ellipse 75% 70% at var(--cx) var(--cy),#170726d9 0,#0b0314f7 100%)}
.mine-feature-intro[data-feature=super-shift] .mfi-flash{background:radial-gradient(circle at var(--cx) var(--cy),#fff 0,#ecd2ffe6 18vmax,#b45cff55 42vmax,transparent 75vmax)}
.mine-feature-intro[data-feature=super-shift] .mfi-glow{background:radial-gradient(circle,#d7a6ffb0 0,#a855f74a 22%,transparent 55%)}
.mine-feature-intro[data-feature=super-shift] .mfi-title{color:#ecd2ff;-webkit-text-stroke-color:#3a0f5e;text-shadow:0 .05em #2b0b47,0 0 .25em #b45cffc0,0 .1em .18em #000a}
.mine-feature-intro[data-feature=super-shift] .mfi-track{box-shadow:0 0 0 2px #0b1418,0 0 3vmin #b45cffa0,0 3vmin 0 -.4vmin #5a3517,0 3vmin 0 1px #1b0f07}
.mine-feature-intro[data-feature=super-shift] .mfi-cart-art{filter:drop-shadow(0 0 2.5vmin #b86cffa8) drop-shadow(0 2vmin 2vmin #000a)}
.mine-feature-intro[data-feature=super-shift] .mfi-speed{background:linear-gradient(90deg,transparent,#efdcffb0 60%,#fff)}
.mine-feature-intro[data-feature=super-shift] .mfi-shard{filter:drop-shadow(0 0 1.2vmin #b45cffb0)}
.mfi-award-count{display:block;margin:0;font-size:min(15vw,12vh,100px);font-weight:950;line-height:1.1;letter-spacing:0;color:#fff4ff;-webkit-text-stroke:max(2px,.06em) #3a0f5e;paint-order:stroke fill;text-shadow:0 .06em #2b0b47,0 0 .3em #c98cffb0,0 .1em .2em #000a}
.mfi-gold-title{white-space:normal;text-align:center;font-size:min(11vw,13vh,130px);line-height:.95;color:#ffe46a;-webkit-text-stroke-color:#6b3510;text-shadow:0 .05em #5a2c0c,0 0 .25em #ffcf5ac0,0 .1em .18em #000a}
.mfi-coin{aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 .6vmin .6vmin #0008)}
.mfi-glint{aspect-ratio:1;background:radial-gradient(circle,#fff 0 12%,#fff4b0 20%,transparent 60%),conic-gradient(from 45deg,transparent 0 20deg,#fff8d0 25deg,transparent 30deg 110deg,#fff8d0 115deg,transparent 120deg 200deg,#fff8d0 205deg,transparent 210deg 290deg,#fff8d0 295deg,transparent 300deg);border-radius:50%}

/* One continuous texture, visible through rounded cell windows. The dark grid stays behind the corner cutouts and gaps. */
:is(.mine-grid,.surface-grid){
  --mine-gap:3px;
  --surface-radius:5px;
  position:relative;
  isolation:isolate;
  background-color:#0f2433;
  background-image:none;
}
:is(.mine-grid,.surface-grid)::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:linear-gradient(var(--surface-tint,#254a604d),var(--surface-tint,#254a604d)),var(--surface-image);
  background-position:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
  box-shadow:inherit;
  /* The mask period includes one cell and its following gap; its final gap sits just outside the grid. */
  --surface-cutouts:
    linear-gradient(90deg,#000 calc(100% - var(--mine-gap)),transparent 0),
    linear-gradient(180deg,#000 calc(100% - var(--mine-gap)),transparent 0),
    linear-gradient(90deg,transparent var(--surface-radius),#000 0 calc(100% - var(--mine-gap) - var(--surface-radius)),transparent 0),
    linear-gradient(180deg,transparent var(--surface-radius),#000 0 calc(100% - var(--mine-gap) - var(--surface-radius)),transparent 0),
    radial-gradient(circle var(--surface-radius) at var(--surface-radius) var(--surface-radius),#000 calc(100% - .5px),transparent 100%),
    radial-gradient(circle var(--surface-radius) at calc(100% - var(--mine-gap) - var(--surface-radius)) var(--surface-radius),#000 calc(100% - .5px),transparent 100%),
    radial-gradient(circle var(--surface-radius) at var(--surface-radius) calc(100% - var(--mine-gap) - var(--surface-radius)),#000 calc(100% - .5px),transparent 100%),
    radial-gradient(circle var(--surface-radius) at calc(100% - var(--mine-gap) - var(--surface-radius)) calc(100% - var(--mine-gap) - var(--surface-radius)),#000 calc(100% - .5px),transparent 100%);
  -webkit-mask-image:var(--surface-cutouts);
  mask-image:var(--surface-cutouts);
  -webkit-mask-size:calc((100% + var(--mine-gap)) / var(--grid-cols,6)) calc((100% + var(--mine-gap)) / var(--grid-rows,5));
  mask-size:calc((100% + var(--mine-gap)) / var(--grid-cols,6)) calc((100% + var(--mine-gap)) / var(--grid-rows,5));
  -webkit-mask-repeat:repeat;
  mask-repeat:repeat;
  -webkit-mask-position:0 0;
  mask-position:0 0;
  -webkit-mask-composite:source-in,source-in,source-over,source-over,source-over,source-over,source-over,source-over;
  mask-composite:intersect,intersect,add,add,add,add,add,add;
}
@container gold-viewport (max-width:600px){.mine-grid{--mine-gap:2px}}

/* Mine-timber frame (src/frame.js): the drawn frame kit laid around the board. Its clear opening is the board itself and the
   cells fill it right up to the timber (no padding or dark lip). The layout reserves room for the frame (theme.js fit(),
   from frameReach()). */
.mine-board{padding:0;background:none;border:0;border-radius:0;box-shadow:none}
/* Carved stone option C at 70% strength; rounded windows and dark gaps live in play-area-surface.css. */
.mine-grid{--surface-image:url('./assets/drawn-v2/play-area-carved-c-v1.webp');--surface-tint:#254a604d;padding:0;border:0;border-radius:0;background:#0f2433;box-shadow:inset 0 4px 8px #000b}
.mine-frame{position:absolute;z-index:7;pointer-events:none}
.mine-frame>i{position:absolute;display:block}
.mf-base,.mf-glow,.mf-sweep{inset:0;background:0 0/100% 100% no-repeat}
.mf-base{background-image:url('./assets/drawn-v2/frame-base.webp')}
/* Soft contact shadow behind the timber so the frame sits on the rock. */
.mine-frame::after{content:"";position:absolute;z-index:-2;inset:1% 3.6%;border-radius:10px;box-shadow:0 6px 18px 3px #000a,0 2px 5px #000c}

/* The lit parts breathe... */
.mf-glow{background-image:url('./assets/drawn-v2/frame-glow.webp');animation:mf-pulse 2.6s ease-in-out infinite alternate}
@keyframes mf-pulse{from{opacity:.45}to{opacity:1}}
/* ...while a band of light travels across them, left to right, every few seconds. The lit parts are a fixed mask and only the
   band moves (a transform), so the browser composites it on the GPU instead of repainting the frame on every frame. */
.mf-sweep{overflow:hidden;background:none;-webkit-mask:url('./assets/drawn-v2/frame-glow.webp') 0 0/100% 100% no-repeat;mask:url('./assets/drawn-v2/frame-glow.webp') 0 0/100% 100% no-repeat}
.mf-sweep::before{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;background:linear-gradient(105deg,transparent 20%,#fff6d8d9 50%,transparent 80%);
 transform:translateX(-110%);animation:mf-sweep 5.5s linear infinite;will-change:transform}
@keyframes mf-sweep{0%{transform:translateX(-110%)}55%,100%{transform:translateX(310%)}}
/* The breathing glow is a large layer: keep it on the GPU. */
.mf-glow{will-change:opacity}
/* Lantern flames: a 16-frame loop stepped whole frames at a time (frame k sits at k/15 of the strip). */
.mf-flame{background:url('./assets/drawn-v2/lantern-flame.webp') 0 0/1600% 100% no-repeat;animation:mf-flicker 2s steps(16) infinite}
@keyframes mf-flicker{to{background-position:106.6667% 0}}

/* Feature moods: Free Spins breathes a little quicker; Gold Ore burns hot and fast. */
.mine-board:is([data-feature=shift],[data-feature=super-shift]) .mf-glow{animation-duration:1.9s}
.mine-board[data-feature=motherlode] .mf-glow{animation-duration:1.2s}
.mine-board[data-feature=motherlode] .mf-sweep::before{animation-duration:3s}

/* The board's entrance (src/board-entrance.js): until the timbers have landed the real frame is hidden and copies of its art,
   each clipped to one timber, are thrown down in its place; the stone cells and the symbols wait their turn. */
.mine-board.entrance-frame .mine-frame>:is(.mf-base,.mf-glow,.mf-sweep,.mf-flame),.mine-board.entrance-frame .mine-frame::before,.mine-board.entrance-frame .mine-frame::after{visibility:hidden}
.mine-frame>.mf-timber{inset:0;background:0 0/100% 100% no-repeat;will-change:transform}
.mine-board.entrance-empty .mine-grid,.mine-board.entrance-tiles .mine-cell>.tile{visibility:hidden}
/* Dust kicked up where a timber lands (drawn once: no filter on it as it moves). */
.mine-fx.entrance-dust{z-index:9;width:var(--size,90px);aspect-ratio:2.4;border-radius:50%;
  background:radial-gradient(ellipse,#f1e2c6 0,#d8bb92e6 26%,#a8865fa6 48%,#6d52384d 62%,transparent 74%)}
/* The entrance's iron and lanterns (the frame kit's own parts, src/board-entrance.js FRAME_PARTS), and the bare timber. */
.mine-frame>.mf-timber{background-image:url('./assets/drawn-v2/frame-timber.webp')}
.mine-frame>.mf-iron{background:0 0/100% 100% no-repeat;will-change:transform}
.mine-frame>.mf-iron.bracket-tl{background-image:url('./assets/drawn-v2/frame-bracket-tl.webp')}
.mine-frame>.mf-iron.bracket-tr{background-image:url('./assets/drawn-v2/frame-bracket-tr.webp')}
.mine-frame>.mf-iron.bracket-bl{background-image:url('./assets/drawn-v2/frame-bracket-bl.webp')}
.mine-frame>.mf-iron.bracket-br{background-image:url('./assets/drawn-v2/frame-bracket-br.webp')}
.mine-frame>.mf-iron.lantern-l{background-image:url('./assets/drawn-v2/frame-lantern-l.webp')}
.mine-frame>.mf-iron.lantern-r{background-image:url('./assets/drawn-v2/frame-lantern-r.webp')}
/* A bracket slamming on: a flash of hot white; a bolt going in: a four-point spark and a few embers (drawn once, no filters). */
.mine-fx.entrance-flash{z-index:10;width:var(--size,80px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fffbe6 0 10%,#ffe6a3b3 26%,#ffb34a40 48%,transparent 66%)}
.mine-fx.entrance-spark{z-index:11;width:var(--size,40px);aspect-ratio:1;
  background:radial-gradient(circle,#fff 0 7%,#ffe9a6 12%,transparent 20%),linear-gradient(90deg,transparent 46%,#fff4c8 50%,transparent 54%),linear-gradient(0deg,transparent 46%,#fff4c8 50%,transparent 54%);
  -webkit-mask:radial-gradient(circle,#000 0 20%,transparent 66%);mask:radial-gradient(circle,#000 0 20%,transparent 66%)}
.mine-fx.entrance-ember{z-index:11;width:var(--size,5px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff6cf 0 35%,#ffb13d 60%,transparent 72%)}

/* Board-side wins (src/board-wins.js): each paying hit pops its amount where it landed, and the round's win counts up on a plate
   nailed to the middle of the frame's top beam. The board is a size container, so cqw is a share of the board's width (the board
   is 6:5; in the frame art the top beam runs from 0.25cqw to 6.67cqw above it). Pop animations touch only transform and opacity;
   the positioning uses the translate property so they compose. */
.board-wins{position:absolute;inset:0;z-index:10;pointer-events:none;overflow:visible}
.board-win-pop{position:absolute;display:block;translate:-50% -50%;opacity:0;pointer-events:none;will-change:transform,opacity;
  font-size:min(calc(var(--pop-size,1) * clamp(17px,7cqw,38px)),calc(84cqw / (var(--len,6) * .6)));line-height:1.05;white-space:nowrap}
/* A soft dark halo behind the amount, so it reads over any symbol (a light glow behind gold text washed it out). */
.board-win-pop::before{content:'';position:absolute;z-index:-1;inset:-45% -18%;border-radius:50%;background:radial-gradient(closest-side,#000000b3,#0000005c 55%,transparent)}
/* Solid bright gold with a thick dark outline and a hard drop shadow (the molten-gold gradient was hard to read over the board). */
.board-win-pop-value{display:block;padding:0 .08em;font-weight:950;font-variant-numeric:tabular-nums;letter-spacing:.01em;color:#ffe45e;
  -webkit-text-stroke:max(3px,.1em) #2a1203;paint-order:stroke fill;text-shadow:0 .07em 0 #2a1203,0 .1em .18em #000c}
/* A boosted cluster's pop: the symbols' own win and the cells' multiplier side by side ("$0.40 ×2"), then the combined win over them.
   The multiplier is hot orange, apart from the gold amounts, with the same dark outline. */
.board-win-pop-row{display:flex;align-items:baseline;justify-content:center;gap:.18em;white-space:nowrap}
.board-win-pop-factor{display:block;font-size:.86em;font-weight:950;font-style:italic;font-variant-numeric:tabular-nums;color:#ff9f2e;-webkit-text-stroke:max(3px,.11em) #2a0f03;paint-order:stroke fill;text-shadow:0 .07em 0 #2a0f03,0 0 .35em #ff7a1a99}
.board-win-pop-final{position:absolute;left:50%;top:50%;translate:-50% -50%;opacity:0;white-space:nowrap}

/* The running win: a brass nameplate nailed to the top beam. Cut (chamfered) corners, a bevelled gold rim, a dark inset panel with a
   gold rivet at each end, the label in cream capitals and the amount in bright solid gold with a dark outline. Its bottom edge
   stays on the beam, clear of the cells: centred 4.4cqw above the board, or higher when a phone's minimum height needs it.
   Hidden until the round's first win; it scales in, and each time it rises the amount pops and a light sweeps across it. */
.board-win{--plate-h:max(22px,calc(5.4cqw + 4px));--cut:calc(var(--plate-h) * .3);position:absolute;left:50%;top:calc(-1 * max(4.4cqw,var(--plate-h) / 2 + 2px));z-index:9;translate:-50% -50%;
  display:flex;align-items:center;justify-content:center;gap:.5em;box-sizing:border-box;height:var(--plate-h);min-width:34cqw;max-width:88cqw;padding:0 1.5em;isolation:isolate;
  font-size:calc(var(--plate-h) * .56);line-height:1;white-space:nowrap;pointer-events:none;filter:drop-shadow(0 1px 1px #000d) drop-shadow(0 2px 5px #0009);
  opacity:0;transform:scale(.55);transition:opacity .16s ease-out,transform .34s cubic-bezier(.3,1.65,.5,1)}
.board-win[data-active=true]{opacity:1;transform:none}
.board-win::before,.board-win::after,.board-win-glow{content:'';position:absolute;pointer-events:none;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
/* The rim: bevelled brass, bright along the top edge and dark along the bottom. */
.board-win::before{z-index:-2;inset:0;background:linear-gradient(180deg,#fff4bf 0%,#f3c552 26%,#b67720 52%,#e9b04a 78%,#6e3d0c 100%)}
/* The panel: dark and slightly lit from above, with a rivet at each end. */
.board-win::after,.board-win-glow{inset:max(2px,.12em);--cut:calc(var(--plate-h) * .3 - max(2px,.12em) * .41)}
.board-win::after{z-index:-1;
  background:radial-gradient(circle at .7em 50%,#fff2bd 0 .09em,#d2963a .1em .16em,#3a1f06 .17em .21em,transparent .22em),radial-gradient(circle at calc(100% - .7em) 50%,#fff2bd 0 .09em,#d2963a .1em .16em,#3a1f06 .17em .21em,transparent .22em),
    linear-gradient(180deg,#3b240a,#1b0e03 58%,#0f0701);box-shadow:inset 0 1px 0 #ffffff26,inset 0 -2px 4px #000b}
/* The sweep: a band of light that crosses the panel as the win rises (board-wins.js moves its background). */
.board-win-glow{z-index:0;opacity:0;background:linear-gradient(105deg,transparent 38%,#fff5cc55 46%,#ffffffa6 50%,#fff5cc55 54%,transparent 62%) 100% 0/300% 100% no-repeat}
.board-win>span{position:relative;z-index:1}
.board-win-label{font-size:.6em;font-weight:900;letter-spacing:.22em;color:#fff1cf;text-shadow:0 1px 0 #000,0 0 .4em #000}
.board-win-amount{display:block;font-weight:950;font-variant-numeric:tabular-nums;letter-spacing:.01em;color:#ffe45e;-webkit-text-stroke:max(1.5px,.07em) #2a1203;paint-order:stroke fill;text-shadow:0 .06em 0 #2a1203,0 0 .5em #ffb52e70}
.board-win-amount:empty{display:none}
body.mine-motion-off .board-win{transition:none}
/* Tiny portrait windows (the mini layout): the board is only ~150px wide, so the plate and pops ease off their phone minimums. */
slot-game-shell[data-layout=mini] .board-win{--plate-h:max(19px,calc(5.4cqw + 4px))}
slot-game-shell[data-layout=mini] .board-win-pop{font-size:min(calc(var(--pop-size,1) * clamp(13px,7cqw,38px)),calc(84cqw / (var(--len,6) * .6)))}

/* Special-symbol animations (src/specials-fx.js). Every rule here hangs off a class that only those effects add (or a board
   class, specials-tinted), so a switched-off effect leaves no trace. --special-glint is the sparkle colour: warm white, or
   with bonusTint the bonus's own colour. */
.mine-board{--special-glint:#fff3c4}
.mine-board.specials-tinted[data-feature=shift]{--special-glint:#8ff3ff}
.mine-board.specials-tinted[data-feature=super-shift]{--special-glint:#dcaeff}
.mine-board.specials-tinted[data-feature=motherlode]{--special-glint:#ffd96a}

/* A glint across a symbol, clipped to its own artwork (--sheen-mask holds the art's URL); sized like the art it crosses. */
.tile .special-sheen{position:absolute;inset:0;margin:auto;width:94%;height:94%;z-index:3;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(110deg,transparent 38%,color-mix(in srgb,var(--special-glint) 35%,transparent) 44%,color-mix(in srgb,var(--special-glint) 80%,#fff) 50%,color-mix(in srgb,var(--special-glint) 35%,transparent) 56%,transparent 62%) 100% 0/300% 100% no-repeat;
  -webkit-mask:var(--sheen-mask) center/contain no-repeat;mask:var(--sheen-mask) center/contain no-repeat}
.tile:is([data-kind=basket],[data-kind=cart]) .special-sheen{width:100%;height:100%}
/* Gems catch a white light (the sweep of SPECIALS_FX.gemGlints), whatever the bonus tint. */
.tile:is([data-kind=ruby],[data-kind=emerald],[data-kind=sapphire],[data-kind=amethyst],[data-kind=amber]) .special-sheen{--special-glint:#fff}
.mine-fx.special-sparkle.gem-twinkle{--special-glint:#fff;width:calc(var(--cell-size) * .3)}
.tile[data-kind=basket] .special-sheen{inset:-50%}
.tile[data-kind=cart] .special-sheen{scale:1.08}

/* A four-point twinkle on the effects layer (placed on a cell; its offset comes in its animation). */
.mine-fx.special-sparkle{z-index:7;width:calc(var(--cell-size) * .36);aspect-ratio:1;translate:-50% -50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0 8%,transparent 13%),linear-gradient(90deg,transparent 47%,var(--special-glint) 50%,transparent 53%),linear-gradient(0deg,transparent 47%,var(--special-glint) 50%,transparent 53%);
  -webkit-mask:radial-gradient(circle,#000 0 22%,transparent 68%);mask:radial-gradient(circle,#000 0 22%,transparent 68%);filter:drop-shadow(0 0 3px var(--special-glint))}

/* Live dynamite: its three fuse tips fizz (drawn in the stick art's own box, so they stay on the tips through its tilt), and
   now and then the stick twitches. Each stick has its own --fx-delay, so they never move in step. */
.tile.live-fuse::after{content:'';position:absolute;inset:-50%;margin:auto;width:134%;height:134%;rotate:var(--dynamite-tilt,0deg);z-index:2;pointer-events:none;
  background:radial-gradient(circle at 45.1% 17.2%,#fffbe0 0 .9%,#ffd24acc 1.7%,#ff8a1f66 3%,transparent 4.6%),radial-gradient(circle at 54.1% 20.7%,#fffbe0 0 .9%,#ffd24acc 1.7%,#ff8a1f66 3%,transparent 4.6%),radial-gradient(circle at 63.1% 17.2%,#fffbe0 0 .9%,#ffd24acc 1.7%,#ff8a1f66 3%,transparent 4.6%);
  animation:fuse-fizz .23s steps(3,jump-none) infinite alternate,fuse-twitch 4.8s ease-in-out var(--fx-delay,0s) infinite}
.tile.live-fuse img{animation:fuse-twitch 4.8s ease-in-out var(--fx-delay,0s) infinite}
@keyframes fuse-fizz{from{opacity:.45;filter:brightness(.9)}to{opacity:1;filter:brightness(1.35)}}
@keyframes fuse-twitch{0%,86%,100%{rotate:var(--dynamite-tilt,0deg)}89%{rotate:calc(var(--dynamite-tilt,0deg) - 3deg)}92%{rotate:calc(var(--dynamite-tilt,0deg) + 2.5deg)}95%{rotate:calc(var(--dynamite-tilt,0deg) - 1deg)}}
/* Reduced motion: the fuses glow, steady; the sticks never twitch. */
.mine-board[data-reduced-motion=true] .tile.live-fuse img{animation:none}
.mine-board[data-reduced-motion=true] .tile.live-fuse::after{animation:none;opacity:.85}

/* A coin, basket or cart worth 20x or more glows behind its art and pulses. --value-glow (0 at 20x, 1 at 200x and above) sets
   how strongly: at 20x a faint, slow breath; from 100x a bright, quicker pulse. It reaches a little past the coin and fades out
   before the next symbol; the cell is lifted one layer (as Gold Ore cells are, at 3) so its neighbours' own backgrounds don't
   cut the spill off square. Reduced motion: it glows, steady. */
.mine-cell:has(>.tile.value-glow){z-index:1}
.tile.value-glow::before{content:'';position:absolute;inset:-14%;margin:auto;pointer-events:none;
  background:radial-gradient(closest-side,rgb(255 236 160/calc(.5 + .5 * var(--value-glow,0))) 0,rgb(255 196 56/calc(.3 + .45 * var(--value-glow,0))) 50%,transparent 100%);
  opacity:calc(.3 + .5 * var(--value-glow,0));scale:calc(.86 + .06 * var(--value-glow,0));
  animation:value-pulse calc(2.2s - .9s * var(--value-glow,0)) ease-in-out infinite}
@keyframes value-pulse{50%{opacity:calc(.55 + .45 * var(--value-glow,0));scale:calc(.94 + .08 * var(--value-glow,0))}}
.mine-board[data-reduced-motion=true] .tile.value-glow::before{animation:none}

/* Value glow v2 (GLOW_V2): the symbol lights its own cell. Classes gl-pocket, gl-silhouette, gl-pulse, gl-heartbeat and gl-embers are set
   only for the parts switched on; data-glow-level is the step (1: 20x, 2: 50x, 3: 100x; 0: a faint coin below 20x),
   --glow-k the strength, --glow-a a faint coin's share of the 20x look (1 from 20x), and data-glow-tone the colour. */
.tile.value-light{--tone:#ffcf5a;--tone-hot:#fff1b8}
.tile.value-light[data-glow-tone=ice]{--tone:#a9e6ff;--tone-hot:#f2fbff}
.tile.value-light[data-glow-tone=silver]{--tone:#d9e6f0;--tone-hot:#ffffff}
.tile.value-light[data-glow-tone=amber]{--tone:#ffab3d;--tone-hot:#ffe2a8}
/* The pocket: the cell's stone lit from the symbol outwards, brightest toward its edge (where the symbol does not cover it). */
.tile.value-light.gl-pocket::before{content:'';position:absolute;inset:0;border-radius:5px;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(farthest-side,transparent 34%,color-mix(in srgb,var(--tone) 70%,transparent) 66%,color-mix(in srgb,var(--tone) 30%,transparent) 92%,transparent 118%);
  opacity:calc((.3 + .7 * var(--glow-k,0)) * var(--glow-a,1))}
/* The silhouette: a blurred, brightened copy of the symbol's own art behind it (sized like the art). */
.tile .value-aura{--aura-scale:1.1;position:absolute;inset:0;margin:auto;width:94%;height:94%;pointer-events:none;
  background:var(--glow-art) center/contain no-repeat;filter:blur(1.1cqw) brightness(2.1) saturate(1.25);opacity:calc((.25 + .6 * var(--glow-k,0)) * var(--glow-a,1));scale:var(--aura-scale)}
.tile[data-kind=basket] .value-aura{inset:-50%;width:100%;height:100%}
.tile[data-kind=cart] .value-aura{width:100%;height:100%;--aura-scale:1.19}
/* The pulse: a slow, soft breath, a little fuller and quicker at the higher steps (the heartbeat below replaces it if on). */
.tile.value-light.gl-pulse{--breath:2.6s}
.tile.value-light.gl-pulse[data-glow-level="2"]{--breath:2.3s}
.tile.value-light.gl-pulse[data-glow-level="3"]{--breath:2s}
.tile.value-light.gl-pulse.gl-pocket::before{animation:pocket-breath var(--breath) ease-in-out infinite}
.tile.value-light.gl-pulse .value-aura{animation:aura-breath var(--breath) ease-in-out infinite}
@keyframes pocket-breath{0%,100%{opacity:calc(.26 + .62 * var(--glow-k,0))}50%{opacity:calc(.38 + .62 * var(--glow-k,0))}}
@keyframes aura-breath{0%,100%{opacity:calc(.22 + .55 * var(--glow-k,0));scale:var(--aura-scale)}50%{opacity:calc(.3 + .6 * var(--glow-k,0));scale:calc(var(--aura-scale) * 1.03)}}
/* The heartbeat: from the 50x step a double thump and a pause, quicker at 100x. */
.tile.value-light.gl-heartbeat:is([data-glow-level="2"],[data-glow-level="3"]){--beat:1.7s}
.tile.value-light.gl-heartbeat[data-glow-level="3"]{--beat:1.1s}
.tile.value-light.gl-heartbeat:is([data-glow-level="2"],[data-glow-level="3"]).gl-pocket::before{animation:pocket-beat var(--beat) ease-out infinite}
.tile.value-light.gl-heartbeat:is([data-glow-level="2"],[data-glow-level="3"]) .value-aura{animation:aura-beat var(--beat) ease-out infinite}
@keyframes pocket-beat{0%,42%,100%{opacity:calc(.3 + .55 * var(--glow-k,0))}9%{opacity:calc(.55 + .45 * var(--glow-k,0))}17%{opacity:calc(.4 + .5 * var(--glow-k,0))}25%{opacity:1}}
@keyframes aura-beat{0%,42%,100%{opacity:calc(.25 + .5 * var(--glow-k,0));scale:var(--aura-scale)}9%{opacity:calc(.5 + .4 * var(--glow-k,0));scale:calc(var(--aura-scale) * 1.045)}17%{opacity:calc(.35 + .45 * var(--glow-k,0));scale:calc(var(--aura-scale) * 1.02)}25%{opacity:calc(.6 + .4 * var(--glow-k,0));scale:calc(var(--aura-scale) * 1.07)}}
/* Embers: at the 100x step, for the board's most valuable few (glow-top), motes of the symbol's colour drift up out of the cell. */
.tile.value-light.gl-embers.glow-top[data-glow-level="3"]::after{content:'';position:absolute;inset:-12% 8% 18%;z-index:4;pointer-events:none;
  background:radial-gradient(circle,var(--tone-hot) 0 20%,var(--tone) 34%,transparent 62%) 22% 100%/9% 9% no-repeat,
    radial-gradient(circle,var(--tone-hot) 0 20%,var(--tone) 34%,transparent 62%) 58% 110%/7% 7% no-repeat,
    radial-gradient(circle,var(--tone-hot) 0 20%,var(--tone) 34%,transparent 62%) 82% 104%/8% 8% no-repeat;
  animation:embers-rise 2.6s linear infinite}
@keyframes embers-rise{0%{background-position:22% 100%,58% 112%,82% 104%;opacity:0}12%{opacity:1}100%{background-position:30% -12%,52% 8%,76% -4%;opacity:0}}
/* A basket or cart: the motes lift off its pile of coins (the top third of the art, its rim about 38% down) and rise above the
   cell, rather than from the bucket or cart body below it. */
.tile:is([data-kind=basket],[data-kind=cart]).value-light.gl-embers.glow-top[data-glow-level="3"]::after{inset:-34% 16% 62%}
/* Reduced motion: the light holds steady and no motes rise. */
.mine-board[data-reduced-motion=true] .tile.value-light::before,.mine-board[data-reduced-motion=true] .tile.value-light .value-aura{animation:none}
.mine-board[data-reduced-motion=true] .tile.value-light::after{display:none}

/* Multiplier badges leave a soft trail of two fainter copies. */
.mine-fx.cell-award-flight.ghost{filter:blur(1.5px) drop-shadow(0 0 6px var(--special-glint))}

/* A golden row boost's streak: a gold light that grows along its row from the symbol (always gold, it is a golden boost). */
.mine-fx.row-streak{z-index:6;pointer-events:none;translate:0 -50%;border-radius:999px;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,#fff8dccc,#ffd04e88 45%,transparent 72%),linear-gradient(90deg,transparent,#ffcf4a66 10%,#ffe9a0aa 50%,#ffcf4a66 90%,transparent);filter:blur(1px) drop-shadow(0 0 10px #ffc93caa)}

/* Bonus symbol extras (src/bonus-fx.js). Every switch is off in the game; devtools/bonus-fx.html turns them on to compare. */
.bonus-fx{position:absolute;display:block;pointer-events:none}

/* 1. Alive: a glint across the symbol's own art, and the Super Bonus diamonds' violet twinkles (inside the tile, so they move
   with it). */
.tile .bonus-fx-glint{inset:0;margin:auto;width:100%;height:100%;z-index:3;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(110deg,transparent 38%,#fff3d259 44%,#fffbeee6 50%,#fff3d259 56%,transparent 62%) 100% 0/300% 100% no-repeat;
  -webkit-mask:var(--glint-art) center/contain no-repeat;mask:var(--glint-art) center/contain no-repeat}
.tile .bonus-fx-twinkle{width:36%;aspect-ratio:1;translate:-50% -50%;z-index:4;opacity:0;filter:drop-shadow(0 0 .5cqw #b46bff) drop-shadow(0 0 1.2cqw #9a4dffaa)}
.tile .bonus-fx-twinkle::before{content:'';position:absolute;inset:0;background:radial-gradient(circle,#fff 0 12%,#f1ddff 22%,#c58cff 46%,#9a4dff 70%);
  clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%)}

/* 2. Charge: the glow behind a landed bonus symbol, stronger with each one that lands. */
.tile .bonus-fx-charge{position:absolute;inset:-6%;border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:.32;scale:.92;
  background:radial-gradient(closest-side,var(--charge-core,#ffe28cf2) 0%,var(--charge-edge,#ff962a8c) 48%,transparent 100%);transition:opacity .35s,scale .35s}
.tile .bonus-fx-charge[data-level="2"]{opacity:.55;scale:1.02}
.tile .bonus-fx-charge[data-level="3"]{opacity:.82;scale:1.12}
.tile[data-kind=super-bonus] .bonus-fx-charge{--charge-core:#eccefff2;--charge-edge:#a050ff8c}

/* 3. Link: the tease thread (pathLength 100). 5. Vein: the Gold Ore cracks. Strokes scale with the cell (--u is 1% of it). The
   vein runs in its own layer inside the grid, over the ordinary cells and under the Gold Ore cell (3), so it starts behind the symbol. */
.bonus-fx-under{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:visible}
.bonus-fx-svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;mix-blend-mode:screen}
.bonus-fx-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.bonus-fx-link .link-glow{stroke:#ffb43a;stroke-width:calc(var(--u) * 13);opacity:.6;filter:blur(calc(var(--u) * 3.5))}
.bonus-fx-link .link-core{stroke:#fff0b8;stroke-width:calc(var(--u) * 3.6)}
.bonus-fx-link .link-flow{stroke:#fffbe8;stroke-width:calc(var(--u) * 5);stroke-dasharray:1.2 5}
.bonus-fx-link .link-reach{stroke-dasharray:100}
/* The cracks: layered strokes (no blur filter), widest and faintest first; forks are thinner. */
.bonus-fx-vein path{stroke-dasharray:100}
.bonus-fx-vein .vein-glow-wide path{stroke:#ff8a1c;stroke-width:calc(var(--u) * 17);stroke-opacity:.16}
.bonus-fx-vein .vein-glow path{stroke:#ffb43a;stroke-width:calc(var(--u) * 9);stroke-opacity:.38}
.bonus-fx-vein .vein-core path{stroke:#ffd25e;stroke-width:calc(var(--u) * 3.8)}
.bonus-fx-vein .vein-hot path{stroke:#fffbe6;stroke-width:calc(var(--u) * 1.5)}
.bonus-fx-vein path.fork{stroke-width:calc(var(--u) * 2.2)}
.bonus-fx-vein .vein-glow-wide path.fork{stroke-width:calc(var(--u) * 10)}
.bonus-fx-vein .vein-glow path.fork{stroke-width:calc(var(--u) * 5.5)}
.bonus-fx-vein .vein-hot path.fork{stroke-width:calc(var(--u) * 1)}
.bonus-fx-vein-cell{width:var(--cell-w);height:var(--cell-h);translate:-50% -50%;border-radius:5px;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(ellipse,#fff3c4e6,#ffc44fb3 45%,#ff9a1c4d 80%,#ff8a1c1f);box-shadow:inset 0 0 0 2px #ffe9a6,inset 0 0 calc(var(--cell-w) * .18) #ffd25ecc}
.bonus-fx-vein-spark{width:calc(var(--cell-w) * .09);aspect-ratio:1;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff 0 25%,#ffd25e 45%,#ff9a1c00 72%)}

/* 4. Gather: the flying symbols (or a scatter's light) and the bloom they merge into. */
.bonus-fx-flyer{width:var(--cell-w);height:var(--cell-h);background:var(--art) center/contain no-repeat;filter:drop-shadow(0 0 1.4cqw #ffd66ecc)}
.bonus-fx-flyer[data-tone=violet]{filter:drop-shadow(0 0 1.4cqw #b46bffd9)}
.bonus-fx-orb{width:calc(var(--cell-w) * .95);aspect-ratio:1;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(circle,#fff 0 14%,#ffe9a6 26%,#ffb43c99 48%,transparent 70%)}
.bonus-fx-orb.trail{width:calc(var(--cell-w) * .6)}
.bonus-fx-bloom{width:var(--cell-w);aspect-ratio:1;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(circle,#fffff0f2 0 9%,#ffd66eb3 26%,#ffa02840 50%,transparent 70%)}
.bonus-fx-bloom[data-tone=violet]{background:radial-gradient(circle,#fffaff 0 9%,#d7a8ffb3 26%,#9a4dff40 50%,transparent 70%)}

/* 6. Flourish: violet crystals round the Super Bonus cell, and the wash that crosses the board. */
.bonus-fx-crystal{width:var(--cw);height:var(--ch);transform-origin:50% 100%;filter:drop-shadow(0 0 .6cqw #b266ffe6)}
.bonus-fx-crystal::before{content:'';position:absolute;inset:0;clip-path:polygon(50% 0,100% 28%,80% 100%,20% 100%,0 28%);
  background:linear-gradient(to top,#5a1fc4,#a56bff 55%,#efe0ff 90%,#fff)}
.bonus-fx-wash{left:0;top:0;width:100%;height:100%;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 35%,#b06cff00 40%,#c48cff73 50%,#b06cff00 60%,transparent 65%) 100% 0/300% 100% no-repeat}
.bonus-fx-wash.calm{background:#aa6eff29}

/* 7. Heavy: the dust a bonus symbol kicks up as it lands. */
.bonus-fx-dust{width:var(--size);aspect-ratio:1;border-radius:50%;opacity:0;filter:blur(1px);
  background:radial-gradient(circle,#ece0c4ee,#c2ad8a88 42%,transparent 70%)}

/* The gem counter's flights and its +3 cart (src/gem-counter.js). Fixed layers on body, in viewport pixels, like the Free Spins
   transition (ambience.css .mine-feature-intro): #game is scaled with a transform. The meters themselves are styled inside the
   shell (METER_STYLE). Nothing here uses a filter on a moving element: glows are gradients. */
.mine-gem-flyer{position:fixed;z-index:2147482000;display:block;margin:0;pointer-events:none;object-fit:contain;will-change:transform;-webkit-user-drag:none}

.mine-gem-cart{position:fixed;inset:0;z-index:2147482500;overflow:hidden;pointer-events:none;contain:strict;--head:#b8fff4;--ink:#0f4750;--glow:#3fdcff}
.mine-gem-cart[data-tone=violet]{--head:#ecd2ff;--ink:#3a0f5e;--glow:#b45cff}
.mine-gem-cart>*{position:absolute}
.mgc-dim{inset:0;opacity:0;background:radial-gradient(ellipse 70% 55% at 50% 50%,#04141f73 0,#020a12a6 100%)}
.mgc-track{left:-2%;right:-2%;height:max(6px,1.3vmin);margin-top:-.3vmin;opacity:0;border-radius:2px;
  background:linear-gradient(#e9fbff,#8fb4c4 35%,#3b5361 70%,#1a262e);box-shadow:0 0 0 2px #0b1418,0 0 2vmin color-mix(in srgb,var(--glow) 60%,transparent),0 1.8vmin 0 -.3vmin #5a3517,0 1.8vmin 0 1px #1b0f07}
.mgc-speed{left:0;opacity:0;border-radius:9px;background:linear-gradient(90deg,transparent,#dffbffa0 60%,#fff)}
.mgc-rider{left:0;opacity:0;will-change:transform}
.mgc-glow{position:absolute;left:50%;top:58%;width:130%;aspect-ratio:1.6;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--glow) 55%,transparent) 0,color-mix(in srgb,var(--glow) 18%,transparent) 42%,transparent 68%)}
.mgc-cart{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}
/* The sign: a plank held up over the cart, carrying the extra spins. */
.mgc-sign{position:absolute;left:50%;top:-6%;display:flex;flex-direction:column;align-items:center;gap:.04em;padding:.12em .5em .18em;translate:-50% 0;
  border-radius:4px;background:url('./assets/drawn-v2/boarded-button-shift.webp') center/cover;
  box-shadow:0 0 0 2px #3a1904,0 0 0 4px #ffd14a,0 0 2.4vmin .5vmin #ffb52e99,0 .8vmin 1.4vmin #000a;
  font-size:var(--sign,min(10vmin,92px));font-style:italic;font-weight:950;line-height:.92;white-space:nowrap;paint-order:stroke fill}
.mgc-sign::before{content:'';position:absolute;left:50%;top:100%;width:7%;height:38%;translate:-50% 0;z-index:-1;border-radius:2px;background:linear-gradient(90deg,#3b2414,#7a5232 50%,#3b2414);box-shadow:0 0 0 1px #1b0f07}
.mgc-sign b{color:#ffc323;-webkit-text-stroke:max(3px,.06em) #784015;text-shadow:0 .05em #643515,0 0 .3em #ffb52eaa}
.mgc-sign span{font-size:.42em;letter-spacing:.06em;color:var(--head);-webkit-text-stroke:max(2px,.08em) var(--ink);text-shadow:0 .08em var(--ink)}
/* Free Spins: the +3 SPINS lettering (text-art.js) on the plank. */
/* Sized from --sign (the lettering's own font size is 0, so em would collapse it). */
.mgc-sign .mgc-word.mine-lettering{width:calc(var(--sign,60px) * 4.3);--lettering-height:calc(var(--sign,60px) * 1.05);margin:calc(var(--sign,60px) * .08) 0}
/* It rides a cart that tilts and bounces: no live filter or glimmer on it (the art's own bevels carry it). */
.mgc-sign .mgc-word.mine-lettering{filter:none}
.mgc-sign .mgc-word.mine-lettering::after{display:none}
.mgc-spark{height:max(3px,.8vmin);opacity:0;border-radius:9px;background:linear-gradient(90deg,#ff5a1000,#ff9a2a 45%,#ffe48a 80%,#fff);box-shadow:0 0 1.2vmin .3vmin #ffa640b0}
/* Reduced motion: the sign as a still card over the board's middle. */
.mgc-still{left:50%;translate:-50% -50%}
.mgc-still>.mgc-sign{position:relative;left:auto;top:auto;translate:none;opacity:0}
.mgc-still>.mgc-sign::before{display:none}

/* The Powder Keg and the Upgrade Coin (src/animations.js KEG and UPGRADE). Nothing that moves carries a filter: glows are
   gradients and shadows drawn once. */

/* The keg's strength sits on its staves, like dynamite's on its sticks. */
.tile[data-kind=keg] .tile-factor{top:58%;bottom:auto;translate:0 -50%;font-size:clamp(13px,4.2cqw,27px);font-weight:950;line-height:1;letter-spacing:-.4px;
  paint-order:stroke fill;-webkit-text-stroke:clamp(2.5px,.6cqw,4.5px) #5a1906;color:#ffe7b0;text-shadow:0 2px 0 #3d1004,0 3px 7px #000a}

/* The keg wears dynamite's tilt: its art, its spent art and its strip alike (one setting, so the hand-overs stay seamless);
   its strength number stays upright. */
.tile[data-kind=keg] img{rotate:var(--dynamite-tilt,0deg)}
/* A live keg fizzes at its fuse tip and twitches now and then, on dynamite's beat (specials-fx.css .live-fuse): the spark is
   drawn in the keg art's own box, so it stays on the fuse through the tilt. */
.tile.live-fuse[data-kind=keg]::after{inset:0;width:94%;height:94%;
  background:radial-gradient(circle at 68.4% 11.7%,#fffbe0 0 1.8%,#ffd24acc 3.4%,#ff8a1f66 5.6%,transparent 8.5%)}

/* The keg's own strip over its cell (frame 1 is the keg, the last the spent keg). Its resting style is the spent frame, as
   dynamite's is: the strip can outlive its animation (the shockwave rolls out after it) and must never fall back to the live keg. */
.mine-fx.keg-sprite{opacity:1;z-index:9;rotate:var(--dynamite-tilt,0deg);background:url('./assets/drawn-v2/powder-keg-blast.webp') 100% 0/5000% 100% no-repeat}
/* The board blast: a 5 x 4 grid sheet, sized and placed by the animation; it may spill past the board. */
.mine-fx.keg-board-blast{z-index:11;background:url('./assets/drawn-v2/keg-board-blast.webp') 0 0/500% 400% no-repeat;will-change:transform}
/* The keg's strength flying to every value reads over the fire. */
.mine-fx.keg-boost-flight{z-index:13;font-size:clamp(14px,calc(var(--cell-size)*.3),32px)}

/* Upgrade Coin: its shine (a strip in its cell, src/animations.js UPGRADE.shine), its charge halo, the rings it fires, and the
   burst where each ring lands. */
.sprite-fx.upgrade-shine{background-image:url('./assets/drawn-v2/upgrade-shine.webp')}
.mine-fx.upgrade-halo{z-index:9;width:calc(var(--cell-size) * 1.35);aspect-ratio:1;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(circle,#f3e6ff00 0 30%,#d9b3ffb3 42%,#a855f78c 56%,#7a2bd833 66%,transparent 72%)}
.mine-fx.upgrade-ring{z-index:10;width:calc(var(--cell-size) * .64);aspect-ratio:1;box-sizing:border-box;border-radius:50%;
  border:calc(var(--cell-size) * .08) solid #ead6ff;
  box-shadow:0 0 0 calc(var(--cell-size) * .02) #7a2bd8,0 0 calc(var(--cell-size) * .14) calc(var(--cell-size) * .03) #b45cffcc,inset 0 0 calc(var(--cell-size) * .1) #c98cffcc}
.mine-fx.upgrade-ring.ghost{border-color:#b06cff;box-shadow:0 0 calc(var(--cell-size) * .1) #a855f799}
.mine-fx.upgrade-burst{z-index:10;width:calc(var(--cell-size) * 1.15);aspect-ratio:1;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(circle,#fff 0 9%,#f1e1ffd9 20%,#c98cff99 38%,#8b3fe633 56%,transparent 68%)}

/* How the keg's multiplier is shown (src/animations.js KEG_FX). Its strength swelling on the keg (and on dynamite) through the
   fuse; the big number over the blast; the glow on every multiplied cell; the shockwave ring and its stamp on each value. */
.mine-fx.keg-strength{z-index:12;font-weight:950;font-size:clamp(16px,calc(var(--cell-size) * .42),44px);line-height:1;white-space:nowrap;color:#ffe7b0;
  -webkit-text-stroke:max(3px,calc(var(--cell-size) * .05)) #5a1906;paint-order:stroke fill;text-shadow:0 3px 0 #3d1004,0 0 calc(var(--cell-size) * .2) #ff9a2a}
.mine-fx.keg-big-number{z-index:14;display:flex;flex-direction:column;align-items:center;line-height:.9;white-space:nowrap;pointer-events:none}
.mine-fx.keg-big-number b{font-weight:950;font-size:1em;letter-spacing:-.02em;color:#ffd84a;-webkit-text-stroke:max(5px,.06em) #6a2d0a;paint-order:stroke fill;
  text-shadow:0 .05em 0 #4a1f06,0 .08em .12em #000c,0 0 .3em #ff9a2a}
.mine-fx.keg-cell-glow{z-index:3;width:var(--cell-size);height:var(--cell-height);border-radius:7px;
  background:radial-gradient(ellipse at 50% 50%,#ff9a2a00 30%,#ff9a2a33 75%,#ff7a1a55);
  box-shadow:inset 0 0 0 max(2px,calc(var(--cell-size) * .035)) #ffc04a,inset 0 0 calc(var(--cell-size) * .22) #ff7a1acc,0 0 calc(var(--cell-size) * .14) #ff9a2a99}
/* The rings are kept subtle (thin, a soft glow, screened): the stamps and the glowing cells carry the message. */
.mine-fx.keg-shockwave{z-index:12;aspect-ratio:1;box-sizing:border-box;border-radius:50%;mix-blend-mode:screen;
  border:max(2px,calc(var(--cell-size) * .04)) solid #ffd27acc;
  box-shadow:0 0 calc(var(--cell-size) * .14) calc(var(--cell-size) * .02) #ff9a2a66,inset 0 0 calc(var(--cell-size) * .12) #ffb52e55}
.mine-fx.dynamite-shockwave{z-index:10;aspect-ratio:1;box-sizing:border-box;border-radius:50%;mix-blend-mode:screen;
  border:max(1.5px,calc(var(--cell-size) * .03)) solid #ffd27acc;
  box-shadow:0 0 calc(var(--cell-size) * .1) calc(var(--cell-size) * .015) #ff9a2a55,inset 0 0 calc(var(--cell-size) * .08) #ffb52e44}
.mine-fx.keg-stamp{z-index:14;font-weight:950;font-size:clamp(14px,calc(var(--cell-size) * .34),36px);line-height:1;white-space:nowrap;color:#ffe7b0;
  -webkit-text-stroke:max(3px,calc(var(--cell-size) * .045)) #5a1906;paint-order:stroke fill;text-shadow:0 2px 0 #3d1004,0 0 calc(var(--cell-size) * .16) #ff9a2a}

/* The live keg is drawn bigger than the other specials (2026-10-09): its body is small on its canvas (the fuse takes the top),
   so at their size it read small beside them. Its art and its fuse spark scale alike, about the cell's centre; its strength
   number keeps its size. The spent keg keeps the specials' size (--keg-spent-scale): its strip starts at the live keg's size
   and settles to the spent one's under the burst's smoke (animations.js), so both hand-overs stay seamless. At rest the strip
   shows the spent frame, at the spent size. */
.mine-board{--keg-scale:1.25;--keg-spent-scale:1}
.tile[data-kind=keg] img,.tile.live-fuse[data-kind=keg]::after{scale:var(--keg-scale,1)}
.tile[data-kind=keg].spent img,.mine-fx.keg-sprite{scale:var(--keg-spent-scale,1)}

/* Keep real label text for accessibility; the generated alpha artwork paints the visible heading. */
.mine-lettering{position:relative;isolation:isolate;display:block;min-width:0;max-width:100%;width:100%;height:var(--lettering-height,36px);padding:0!important;background:var(--lettering-art) center/contain no-repeat!important;color:transparent!important;font-size:0!important;line-height:0!important;letter-spacing:0!important;-webkit-text-stroke:0!important;text-shadow:none!important;filter:drop-shadow(0 2px 1px #160b07a8) drop-shadow(0 0 7px color-mix(in srgb,var(--fx-glow,#58e9df) 40%,transparent))}
/* The alpha mask keeps each passing highlight on the letters, including their moving bevels. */
.mine-lettering::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,#c9faff22 45%,#ffffffe0 49%,#ffffff22 53%,transparent 61%) 130% 0/320% 100% no-repeat;-webkit-mask:var(--lettering-art) center/contain no-repeat;mask:var(--lettering-art) center/contain no-repeat;mix-blend-mode:screen;opacity:0;animation:mine-lettering-glimmer var(--glimmer-period,9.4s) var(--glimmer-delay,-3s) linear infinite}
@keyframes mine-lettering-glimmer{0%,79%{opacity:0;background-position:130% 0}81%{opacity:.66;background-position:130% 0}92%{opacity:.66;background-position:-30% 0}94%,100%{opacity:0;background-position:-30% 0}}
.mine-lettering[data-lettering=bonus]{--glimmer-period:9.7s;--glimmer-delay:-2.4s}
.mine-lettering[data-lettering=choose-a-feature]{--glimmer-period:8.7s;--glimmer-delay:-1.1s;--fx-glow:#3fdcff}
.mine-lettering[data-lettering=free-spins]{--glimmer-period:9.4s;--glimmer-delay:-6.2s}
.mine-lettering[data-lettering=super-bonus]{--glimmer-period:10.7s;--glimmer-delay:-4.4s}
.mine-lettering[data-lettering=gold-ore-bonus]{--glimmer-period:11.2s;--glimmer-delay:-8.1s}
.mine-lettering[data-lettering=congratulations]{--glimmer-period:8.5s;--glimmer-delay:-5s}
.mine-lettering[data-lettering=you-have-won]{--glimmer-period:12.5s;--glimmer-delay:-2.8s}
.mine-lettering[data-lettering=super-spins]{--glimmer-period:10s;--glimmer-delay:-2s}
.mine-lettering[data-lettering=all-cells-activated]{--glimmer-period:11s;--glimmer-delay:-7s}
.mine-feature-intro .mine-lettering{--glimmer-period:9s;--glimmer-delay:-5.8s}
:host([data-reduced=true]) .mine-lettering::after,.mine-motion-off .mine-lettering::after{display:none;animation:none}
:host([data-suspended=true]) .mine-lettering::after{animation-play-state:paused}
.rail>.feature-card .feature-name.mine-lettering{height:36px;flex:0 0 36px}
.rail>.feature-card.feature-menu .feature-name.mine-lettering{height:54px;flex-basis:54px}
:host(:is([data-layout=compact],[data-layout=mini])) .rail>.feature-card.feature-menu .feature-name.mine-lettering{height:42px;flex-basis:42px}
:host([data-layout]) .mobile-feature>span.mine-lettering{width:100%;height:28px;flex:1 1 auto}
.rail>.feature-card.feature-menu .feature-name.mine-lettering,:host([data-layout]) .mobile-feature>span.mine-lettering{filter:drop-shadow(0 3px 2px #190c07e6) drop-shadow(0 0 5px #ffc85770) drop-shadow(0 0 12px #ffb52e40)}
.dialog[data-panel=features] .dialog-header h2.mine-lettering{height:52px}
.dialog[data-panel=features] [data-action=feature]>span.mine-lettering{height:32px;flex:0 0 32px;max-width:100%}
.dialog[data-panel=features] [data-action=feature][data-mode=super]>span.mine-lettering{height:40px;flex-basis:40px}
.dialog[data-panel=feature] .dialog-header h2.mine-lettering{height:48px;width:100%}
.dialog:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-header h2.mine-lettering{height:56px;width:100%}
.dialog:is([data-panel=feature-intro],[data-panel=feature-summary]) :is(.feature-intro-label,.feature-total-label).mine-lettering{height:26px;max-width:230px;margin:10px auto 0}
.dialog:is([data-panel=feature-intro],[data-panel=feature-summary]) .feature-unit.mine-lettering{height:42px;max-width:260px;margin:0 auto}
.feature-summary-unit.mine-lettering{display:block;width:220px;height:42px;margin:0 auto}
.free-spins-caption{display:flex;flex-direction:column;align-items:center;gap:2px}
.free-spins-board{--fx-ink:#174d43;--fx-glow:#75ffe2}
:host([data-feature-kind=super-shift]) .free-spins-board{--fx-ink:#3a0f5e;--fx-glow:#b45cff}
.free-spins-name.mine-lettering{height:32px}
.free-spins-remaining{font-size:10px;letter-spacing:.16em;line-height:1.1;-webkit-text-stroke:1px var(--fx-ink,#174d43);text-shadow:0 1px #082820}
/* Phones: just the name over the count, both centred (2026-10-05). REMAINING beside the name pushed it off centre; it stays for
   screen readers. */
:host(:is([data-layout=portrait],[data-layout=mini])) .free-spins-board-mobile .free-spins-caption{flex-direction:row;justify-content:center;width:100%;height:20px;gap:0}
:host(:is([data-layout=portrait],[data-layout=mini])) .free-spins-board-mobile .free-spins-name.mine-lettering{width:140px;max-width:80%;height:20px;margin:0 auto}
:host(:is([data-layout=portrait],[data-layout=mini])) .free-spins-board-mobile .free-spins-remaining{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.info-body .mine-lettering{width:145px;height:27px}
.mine-feature-intro .mfi-title.mine-lettering{width:min(88vw,1000px);height:min(22vw,22vh,180px);max-width:none;filter:drop-shadow(0 .8vmin .4vmin #0009) drop-shadow(0 0 2vmin #5fe8ff88)}
.mine-feature-intro[data-feature=super-shift] .mfi-title.mine-lettering{filter:drop-shadow(0 .8vmin .4vmin #0009) drop-shadow(0 0 2vmin #b45cff88)}
.mine-feature-intro .mfi-gold-title.mine-lettering{width:min(92vw,1100px);height:min(20vw,16vh,130px);filter:drop-shadow(0 .8vmin .4vmin #0009) drop-shadow(0 0 2vmin #ffcf5a88)}
.mine-feature-intro .mfi-gold-sub.mine-lettering{width:min(84vw,850px);height:min(8vw,9vh,60px);max-width:none;margin-top:12px}
.mine-feature-intro .mfi-award-unit.mine-lettering{width:min(72vw,60vh,500px);height:min(15vw,12vh,90px);max-width:none;flex:none}
@container gold-viewport (max-width:600px){
 .dialog[data-panel=features] .dialog-header h2.mine-lettering{height:42px}
 .dialog:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-header h2.mine-lettering{height:46px}
 .dialog[data-panel=feature] .dialog-header h2.mine-lettering{height:40px}
 .dialog:is([data-panel=feature-intro],[data-panel=feature-summary]) .feature-unit.mine-lettering{height:36px;max-width:220px}
 .feature-summary-unit.mine-lettering{width:190px;height:36px}
}
@container gold-viewport (max-height:600px) and (max-width:600px){.dialog[data-panel=features] [data-action=feature]>span.mine-lettering{height:28px;flex-basis:28px}}
@container gold-viewport (max-height:600px) and (max-width:600px){.dialog[data-panel=features] [data-action=feature][data-mode=super]>span.mine-lettering{height:34px;flex-basis:34px}}

/* The Congratulations artwork occupies the plaque's full inner width at its own aspect ratio. */
.dialog:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-header h2.mine-lettering[data-lettering=congratulations]{width:calc(100% + 24px);max-width:none;height:auto;aspect-ratio:4.5;margin-inline:-12px;flex:none}
@container gold-viewport (max-width:600px){.dialog:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-header h2.mine-lettering[data-lettering=congratulations]{width:calc(100% + 8px);margin-inline:-4px}}

:root{--rbg-black:#080808;--rbg-yellow:#f5c542;--rbg-white:#f7f5ef}
.rbg-loader{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;box-sizing:border-box;padding:24px;background:var(--rbg-black);color:var(--rbg-white);font-family:Arial,Helvetica,sans-serif;text-align:center;overflow:auto;color-scheme:dark}
.rbg-loader[hidden]{display:none}
.rbg-loader__content{width:min(320px,78vw);max-width:100%;margin:auto}
.rbg-loader__logo{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:contain;margin:0 auto 30px}
.rbg-loader__progress{appearance:none;-webkit-appearance:none;display:block;width:84%;height:3px;margin:0 auto;border:0;border-radius:0;background:#323232;color:var(--rbg-yellow);overflow:hidden}
.rbg-loader__progress::-webkit-progress-bar{background:#323232}
.rbg-loader__progress::-webkit-progress-value{background:var(--rbg-yellow)}
.rbg-loader__progress::-moz-progress-bar{background:var(--rbg-yellow)}
.rbg-loader__status{margin:17px 0 0;color:#aaa9a4;font-size:11px;font-weight:400;line-height:1.6;letter-spacing:.04em;overflow-wrap:anywhere}
.rbg-loader__retry{display:block;margin:22px auto 0;padding:12px 22px;border:1px solid #696451;background:transparent;border-radius:3px;color:var(--rbg-white);font:600 12px Arial,Helvetica,sans-serif;cursor:pointer}
.rbg-loader__retry[hidden],.rbg-loader__progress[hidden]{display:none}
.rbg-loader__retry:hover{border-color:var(--rbg-yellow);color:var(--rbg-yellow)}
.rbg-loader__retry:focus-visible{outline:2px solid var(--rbg-yellow);outline-offset:5px}
.rbg-loader[data-state=error] .rbg-loader__status{color:#e5d8bd;font-size:13px}
@media(max-height:300px){.rbg-loader__content{width:220px}.rbg-loader__logo{margin-bottom:16px}.rbg-loader__status{margin-top:10px}}
/* The opaque dark master blends into the provider surface without a visible box. */
.rbg-loader__logo{mix-blend-mode:lighten}
/* Two clipped views of the same cached artwork keep the lettering perfectly still. */
.rbg-loader__brand{position:relative;width:100%;aspect-ratio:3/1;margin:0 auto 30px}
.rbg-loader__brand .rbg-loader__logo{margin:0;clip-path:inset(0 0 0 19%)}
.rbg-loader__bolt{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;clip-path:inset(0 81% 0 0);mix-blend-mode:lighten;transform-origin:10.5% 52%}
.rbg-loader:not([data-state=error]) .rbg-loader__bolt{animation:rbg-bolt-shake 3.6s ease-in-out infinite}
@keyframes rbg-bolt-shake{0%,4%,22%,100%{transform:translate(0,0) rotate(0)}7%,13%{transform:translate(-.7px,.2px) rotate(-1.7deg)}10%,16%{transform:translate(.7px,-.2px) rotate(1.7deg)}19%{transform:translate(-.3px,0) rotate(-.6deg)}}
.rbg-loader[data-suspended=true] .rbg-loader__bolt{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.rbg-loader .rbg-loader__bolt{animation:none!important}}
@media(max-height:300px){.rbg-loader__brand{margin-bottom:16px}}