.mechanic-demo{--md-ink:#202536;--md-blue:#496cff;--md-pink:#ff78ae;--md-cream:#fffbee;isolation:isolate;background:var(--md-cream);border:2px solid var(--md-ink);color:var(--md-ink);border-radius:18px;min-width:0;overflow:hidden;box-shadow:0 5px #20253622}.mechanic-demo__header{background:#fffdf4;border-bottom:2px solid #202536;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:11px 14px;display:flex}.mechanic-demo__header>span{letter-spacing:.08em;color:#496cff;align-items:center;gap:5px;font-size:9px;font-weight:900;display:flex}.mechanic-demo__header h4{margin:0;font-size:14px;font-weight:900;line-height:1.25}.mechanic-demo__scene{aspect-ratio:2;-webkit-user-select:none;user-select:none;background:#eaf4ff;font-family:inherit;position:relative;overflow:hidden;container-type:inline-size}.md-map-backdrop{opacity:.46;background:linear-gradient(#fff9,#fff8),url(/art/bathtub.webp) 50% 55%/cover;position:absolute;inset:0}.md-ground{background:repeating-linear-gradient(90deg,#afdcc066 0 34px,#c5e9ca66 34px 68px);border-top:2px solid #7093a055;position:absolute;inset:82% 0 0}.md-geometry{z-index:2;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.md-path{fill:none;stroke:#496cff;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:7 8}.md-path--ghost{stroke:#8c93a6;stroke-width:2px;stroke-dasharray:4 9;opacity:.5}.md-path--pink{stroke:#ec548b}.md-path--purple{stroke:#9470e5}.md-path--orange{stroke:#f79838}.md-platform{stroke:#202536;stroke-width:7px;stroke-linecap:round}.md-duck{aspect-ratio:1;z-index:5;position:absolute;transform:translate(-50%,-50%)}.md-duck>.duck{width:100%!important;height:100%!important}.md-duck__status{white-space:nowrap;z-index:8;background:#c0f0ce;border:1.5px solid #202536;border-radius:7px;justify-content:center;align-items:center;gap:3px;padding:3px 5px;font-size:clamp(6px,1.4cqw,9px);font-weight:900;display:flex;position:absolute;top:-20%;left:50%;transform:translate(-50%);box-shadow:0 2px #202536}.md-duck__status--bad{background:#ffb1ce}.md-rocket{aspect-ratio:1;z-index:7;pointer-events:none;width:10%;position:absolute}.md-rocket>.rocket-sprite{filter:drop-shadow(0 1px 1px #20253680);width:100%;height:100%;position:absolute;inset:0}.md-rocket__trail{background:linear-gradient(270deg,#fffbcc,#ffba4d99,#0000);border-radius:50%;width:50%;height:10%;animation:.2s ease-in-out infinite alternate md-flame;position:absolute;top:45%;right:68%}.md-sticker{z-index:9;white-space:nowrap;background:#fff8e5;border:1.5px solid #202536;border-radius:7px;justify-content:center;align-items:center;gap:4px;padding:5px 8px;font-size:clamp(6px,1.7cqw,11px);font-weight:950;line-height:1.1;display:flex;position:absolute;transform:translate(-50%,-50%)rotate(-3deg);box-shadow:0 3px #202536}.md-sticker svg{width:1.3em;height:1.3em}.md-sticker--blue{background:#c7d6ff}.md-sticker--pink{background:#ffa6c7}.md-sticker--green{background:#c0f0ce}.md-sticker--purple{background:#d7c4ff}.md-sticker--orange{background:#ffbf80}.md-sticker--yellow{background:#ffda64}.md-function{z-index:8;background:#fffdf2;border:1.5px solid #202536;border-radius:9px;align-items:center;gap:3px;padding:4px 8px;font:700 clamp(8px,2.3cqw,14px)/1.6 ui-monospace,monospace;display:flex;position:absolute;top:6%;left:5%;box-shadow:0 3px #202536}.md-function b{background:#c4d2ff;border:1.5px solid #202536;border-radius:5px;padding:1px 5px;display:inline-block}.md-selected-number{box-shadow:0 0 0 3px #496cff25}.md-mini-popover{z-index:10;background:#fffdf5;border:1.5px solid #202536;border-radius:10px;width:31%;padding:8px 10px;position:absolute;top:25%;left:31%;transform:rotate(-2deg);box-shadow:3px 3px #202536}.md-mini-popover strong{justify-content:space-between;font-size:clamp(7px,1.8cqw,11px);display:flex}.md-mini-popover small{letter-spacing:.04em;color:#70778a;margin-top:8px;font-size:clamp(5px,1.1cqw,7px);font-weight:800;display:block}.md-mini-slider{background:#d8e0fa;border-radius:10px;height:7px;margin-top:10px;position:relative}.md-mini-slider i{background:#496cff;border-radius:10px;position:absolute;inset:0 auto 0 0}.md-mini-slider em{background:#ff9ac2;border:1.5px solid #202536;border-radius:50%;width:17px;height:17px;position:absolute;top:50%;transform:translate(-50%,-50%)}.md-cursor{z-index:14;filter:drop-shadow(1px 2px #20253633);position:absolute}.md-cursor svg{width:clamp(18px,5cqw,29px);height:auto}.md-cursor--tap:before{content:"";border:3px solid #ff77ad;border-radius:50%;width:26px;height:26px;animation:.6s ease-out infinite md-tap;position:absolute;top:-9px;left:-9px}.md-node{z-index:6;aspect-ratio:1;background:#fff2a0;border:2px solid #202536;border-radius:21%;flex-direction:column;align-items:center;width:13%;display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:0 4px #202536}.md-node .item-icon{width:84%;height:84%;margin-top:4%}.md-node>span{white-space:nowrap;background:#fffdf4;border:1px solid #202536;border-radius:4px;padding:2px 4px;font-size:clamp(6px,1.4cqw,9px);font-weight:900;position:absolute;bottom:-28%}.md-node--claimed{opacity:.35;transform:translate(-50%,-50%)scale(.8)}.md-inventory{z-index:10;background:#fffdf5;border:1.5px solid #202536;border-radius:9px;padding:5px 7px;position:absolute;top:5%;right:3%;box-shadow:0 3px #202536}.md-inventory>span{justify-content:space-between;gap:10px;font-size:clamp(6px,1.4cqw,9px);font-weight:900;display:flex}.md-inventory>div{align-items:center;gap:4px;margin-top:4px;display:flex}.md-inventory .item-icon,.md-inventory__empty{width:clamp(20px,5.2cqw,32px);height:clamp(20px,5.2cqw,32px)}.md-inventory__empty{color:#9da6b8;background:#e7edf3;border:1px dashed #939cac;border-radius:5px;place-items:center;display:grid}.md-inventory__new{background:#ddf8b9;border:1.5px solid #202536;border-radius:5px}.md-earned-item{z-index:12;position:absolute;transform:translate(-50%,-50%)}.md-earned-item .item-icon{width:clamp(29px,8.2cqw,49px);height:auto}.md-portal{z-index:5;--gate:#9365eb;width:10%;height:29%;position:absolute;transform:translate(-50%,-50%)rotate(-16deg)}.md-portal:before,.md-portal>i{content:"";border:5px solid var(--gate);box-shadow:0 0 0 2px #202536,0 0 17px var(--gate),inset 0 0 13px var(--gate);background:#221345e6;border-radius:50%;position:absolute;inset:0}.md-portal>i{box-shadow:none;background:0 0;border:2px dashed #fff9;animation:2.4s linear infinite md-portal;inset:14% 18%}.md-portal--exit{--gate:#ff9e40;transform:translate(-50%,-50%)rotate(16deg)}.md-portal>span{letter-spacing:.04em;background:#fffdf5;border:1px solid #202536;border-radius:4px;padding:2px 5px;font-size:clamp(7px,1.7cqw,10px);font-weight:900;position:absolute;bottom:-25%;left:50%;transform:translate(-50%)}.md-portal--active{filter:brightness(1.35)}.md-blast-area{fill:#ffaf4566;stroke:none}.md-blast-ring{fill:none;stroke:#ff8241;stroke-width:7px;stroke-dasharray:16 7}.md-blast-ring--inner{stroke:#ffda57;stroke-width:4px;stroke-dasharray:7 9}.md-mystery-card{z-index:8;background:repeating-linear-gradient(135deg,#b1b6ff 0 13px,#ced1ff 13px 26px);border:3px solid #202536;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;width:24%;height:56%;display:flex;position:absolute;top:48%;left:50%;box-shadow:4px 5px #202536}.md-mystery-card>span{color:#fff;text-shadow:2px 2px #202536,-2px 2px #202536,2px -2px #202536,-2px -2px #202536;font-size:clamp(32px,11cqw,72px);font-weight:1000;line-height:1}.md-mystery-card>strong{background:#fffdf5;border:1px solid #202536;border-radius:4px;margin-top:5px;padding:4px;font-size:clamp(6px,1.4cqw,9px)}.md-single-card{z-index:8;width:31%;position:absolute;top:48%;left:50%;transform:translate(-50%,-50%)rotate(4deg)}.md-chance-result{text-align:center;border:2px solid #202536;border-radius:12px;flex-direction:column;align-items:center;gap:5px;min-height:120px;padding:10px 8px;display:flex;box-shadow:3px 4px #202536}.md-chance-result--good{background:#bfeebb}.md-chance-result--bad{background:#ffb8d0}.md-chance-result>.item-icon{width:clamp(32px,10cqw,59px);height:auto}.md-chance-result strong{font-size:clamp(7px,2.1cqw,13px);font-weight:950;line-height:1.2}.md-chance-result span{font-size:clamp(6px,1.4cqw,9px);font-weight:800}.md-chance-branches{z-index:8;align-items:center;gap:9px;width:65%;display:flex;position:absolute;top:44%;left:50%;transform:translate(-50%,-50%)}.md-chance-branches>b{font-size:clamp(8px,2cqw,13px);font-weight:950}.md-chance-branches>.md-chance-result{flex:1;gap:4px;min-width:0;min-height:105px;padding:8px 5px}.md-chance-branches .md-chance-result>.item-icon{width:clamp(29px,7.3cqw,43px)}.md-target-label{white-space:nowrap;z-index:10;background:#fffdf4;border:1.5px solid #202536;border-radius:7px;align-items:center;gap:5px;padding:5px 8px;font-size:clamp(7px,1.7cqw,11px);display:flex;position:absolute;top:7%;left:50%;transform:translate(-50%)}.md-target-label svg{color:#f45c93;width:1.4em;height:1.4em}.md-target-ring{aspect-ratio:1;z-index:4;border:3px dashed #f46498;border-radius:50%;width:18%;position:absolute;transform:translate(-50%,-50%)}.md-next-volley{white-space:nowrap;z-index:10;background:#fffdf4;border:1px solid #202536;border-radius:6px;align-items:center;gap:5px;padding:4px 6px;font-size:clamp(5px,1.25cqw,8px);font-weight:900;display:flex;position:absolute;bottom:4%;left:50%;transform:translate(-50%)}.md-next-volley svg{width:1.4em;height:1.4em}.md-next-volley>span{color:#7f889b;border-radius:3px;padding:3px 4px}.md-next-volley .is-now{color:#202536;background:#ffc15d}.md-volley-card{z-index:8;background:#ffb8d0;border:2px solid #202536;border-radius:9px;flex-direction:column;align-items:center;gap:3px;padding:7px 13px;display:flex;position:absolute;top:35%;left:41%;transform:translate(-50%,-50%)rotate(-5deg);box-shadow:3px 4px #202536}.md-volley-card small{font-size:clamp(6px,1.5cqw,9px);font-weight:800}.md-volley-card strong{font-size:clamp(8px,2cqw,12px)}.md-volley-card .item-icon{width:clamp(24px,7cqw,40px);height:auto}.md-mode-title{white-space:nowrap;z-index:8;align-items:center;gap:6px;font-size:clamp(10px,2.8cqw,17px);font-weight:950;display:flex;position:absolute;top:7%;left:50%;transform:translate(-50%)}.md-mode-title svg{color:#b77808;width:1.2em;height:1.2em}.md-podium{z-index:3;background:#ffce6f;border:2px solid #202536;border-radius:7px 7px 0 0;width:17%;height:19%;position:absolute;top:78%;left:25%}.md-team-zone{background:#bfcfff4d;border:2px dashed #496cff;border-radius:15px;width:29%;height:45%;position:absolute;top:37%;left:18%}.md-team-zone--pink{background:#fbb7d044;border-color:#f46498;left:60%}.md-score-race{z-index:8;background:#fffdf4;border:2px solid #202536;border-radius:10px;flex-direction:column;gap:5px;width:29%;padding:10px;display:flex;position:absolute;top:38%;left:35%;box-shadow:3px 4px #202536}.md-score-race>span{justify-content:space-between;gap:5px;font-size:clamp(7px,1.6cqw,10px);font-weight:900;display:flex}.md-score-race>i{background:#e5e9f0;border:1px solid #202536;border-radius:5px;height:9px;overflow:hidden}.md-score-race em{background:#fc5;height:100%;display:block}.md-score-race>i:last-child em{background:#ff93bc}.md-goose-crown{white-space:nowrap;background:#ffd451;border:1.5px solid #202536;border-radius:5px;padding:3px 6px;font-size:clamp(6px,1.5cqw,9px);font-weight:950;position:absolute;top:-14%;left:50%;transform:translate(-50%)rotate(-6deg)}.md-target-ring--gold{z-index:4;border-width:4px;border-color:#efa51b;width:26%}.md-bounty-score{z-index:9;background:#fff1a5;border:2px solid #202536;border-radius:10px;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px;width:21%;padding:7px;display:flex;position:absolute;top:39%;left:63%;box-shadow:3px 4px #202536}.md-bounty-score>b{font-size:clamp(20px,5cqw,31px);line-height:1}.md-bounty-score>span{text-align:center;width:100%;font-size:clamp(6px,1.4cqw,9px);font-weight:900}.md-bounty-score svg{width:clamp(18px,4.6cqw,26px)}.mechanic-demo__footer{z-index:15;background:#fffdf4;border-top:2px solid #202536;padding:11px 12px 5px;position:relative}.mechanic-demo__footer p{align-items:flex-start;gap:8px;min-height:35px;margin:0;font-size:12px;font-weight:750;line-height:1.45;display:flex}.mechanic-demo__footer p>b{background:#ffda67;border:1.5px solid #202536;border-radius:6px;flex:0 0 22px;place-items:center;height:22px;font:900 10px ui-monospace,monospace;display:grid}.mechanic-demo__controls{justify-content:center;align-items:center;gap:2px;margin-top:1px;display:flex}.mechanic-demo__controls>button,.mechanic-demo__steps>button{color:#535e76;cursor:pointer;background:0 0;border:0;border-radius:7px;flex-shrink:0;place-items:center;width:38px;height:38px;display:grid}.mechanic-demo__controls>button:hover,.mechanic-demo__steps>button:hover{color:#496cff;background:#e3eafd}.mechanic-demo__steps{justify-content:center;align-items:center;margin-inline:5px;display:flex}.mechanic-demo__steps>button{width:29px}.mechanic-demo__steps i{background:#bec7d9;border-radius:50%;width:7px;height:7px;display:block}.mechanic-demo__steps .is-current i{background:#496cff;border-radius:4px;width:20px}.mechanic-demo__controls button:focus-visible{outline-offset:1px;outline:3px solid #496cff}.mechanic-demo--compact .mechanic-demo__header{padding:7px 10px}.mechanic-demo--compact .mechanic-demo__footer{padding:8px 9px 2px}.mechanic-demo--compact .mechanic-demo__footer p{min-height:33px;font-size:11px}.mechanic-demo--compact .md-chance-result{min-height:90px}.mechanic-demo[data-paused] *{animation-play-state:paused!important}.mechanic-demo[data-reduced] *{transition:none!important;animation:none!important}@keyframes md-flame{to{opacity:.7;transform:scaleX(.7)}}@keyframes md-tap{0%{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(1.5)}}@keyframes md-portal{to{transform:rotate(360deg)}}@media (max-width:480px){.mechanic-demo__header h4{font-size:12px}.mechanic-demo__controls>button,.mechanic-demo__steps>button{width:40px;height:44px}.mechanic-demo__steps{margin-inline:0}.mechanic-demo__footer p{font-size:11px}.md-chance-result{min-height:92px}.md-chance-branches>.md-chance-result{min-height:85px}.md-mini-popover{padding:6px 7px}.md-mini-slider{height:5px;margin-top:6px}.md-mini-slider em{width:13px;height:13px}.md-mini-popover small{margin-top:6px}.md-score-race{padding:6px}.md-portal:before{border-width:4px}}@media (prefers-reduced-motion:reduce){.mechanic-demo *{transition:none!important;animation:none!important}}.md-mini-popover{width:34%;left:15%}