.mg{--mg-good:var(--color-good);--mg-bad:var(--color-bad);isolation:isolate;background:radial-gradient(120% 70% at 50% 0,#163a33 0%,#0000 60%),radial-gradient(90% 60% at 50% 110%,#0f2a22 0%,#0000 70%),linear-gradient(#0f1b1d,#0a1315);padding:14px 12px 18px;position:relative;overflow:hidden}@media (width>=640px){.mg{padding:20px 24px 26px}}.mg-bg{z-index:-1;pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.mg-bg-key{opacity:.06;max-width:90%;height:auto;animation:7s ease-in-out infinite mg-breathe}@keyframes mg-breathe{50%{opacity:.11;transform:scale(1.04)}}.mg-top{grid-template-columns:auto 1fr auto;align-items:center;gap:8px;display:grid}.mg-score,.mg-side{flex-direction:column;align-items:center;gap:2px;display:flex}.mg-side{align-items:flex-end}.mg-label{font-family:var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:var(--color-muted);font-size:13px;font-weight:800}.mg-label b{color:var(--color-ink);font-size:16px}.mg-num{font-family:var(--font-display);color:var(--color-accent-strong);text-shadow:0 0 18px #6fdca466;text-align:center;min-width:1.4ch;font-size:46px;font-weight:900;line-height:1;display:inline-block}.mg-q{text-align:center;text-transform:uppercase;min-width:0;font-size:clamp(22px,5.4vw,40px);font-weight:900}.mg-sound{border:1px solid var(--color-line);background:var(--color-panel-2);width:38px;height:38px;color:var(--color-muted);place-items:center;transition:color .2s,border-color .2s;display:grid}.mg-sound:hover{color:var(--color-ink);border-color:var(--color-accent)}.mg-sound .mg-wave{display:none}.mg-sound[aria-pressed=true]{color:var(--color-accent-strong)}.mg-sound[aria-pressed=true] .mg-wave{display:block}.mg-sound[aria-pressed=true] .mg-mute{display:none}.mg-stage{perspective:900px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,8vw,96px);max-width:680px;margin:14px auto 0;display:grid;position:relative}.mg-card{--tint:var(--color-accent);--rx:0deg;--ry:0deg;aspect-ratio:280/400;outline:1px solid color-mix(in srgb, var(--tint) 60%, transparent);outline-offset:3px;background:radial-gradient(90% 60% at 50% 35%, color-mix(in srgb, var(--tint) 45%, transparent), transparent 70%), linear-gradient(180deg, #1b3033, #0b1517);cursor:pointer;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;-webkit-tap-highlight-color:transparent;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);border:1px solid #ebe5d340;padding:0;transition:transform .18s ease-out;display:block;position:relative;overflow:visible}.mg-card:disabled{cursor:default}.mg[data-live] .mg-card:not(:disabled):hover{transform:translateY(-8px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.03)}.mg[data-live] .mg-card:not(:disabled):active{transition-duration:60ms;transform:translateY(-2px)scale(.96)}.mg-art{place-items:end center;display:grid;position:absolute;inset:0 0 18%;overflow:hidden}.mg-art img{object-fit:cover;object-position:50% 10%;width:100%;height:100%}.mg-shade{background:linear-gradient(#0000 50%,#0a1315ee 80%);position:absolute;inset:0}.mg-name{text-align:center;text-transform:uppercase;color:var(--color-ink);text-shadow:0 2px 10px #000;overflow-wrap:anywhere;font-size:clamp(20px,5.6vw,36px);font-weight:900;line-height:.95;position:absolute;bottom:26px;left:6px;right:6px}.mg-meter{background:#ebe5d31f;height:6px;position:absolute;bottom:12px;left:12%;right:12%}.mg-meter i{background:var(--tint);transform-origin:0;position:absolute;inset:0;transform:scaleX(0)}.mg-wr{text-align:center;color:var(--color-ink);text-shadow:0 4px 18px #000,0 0 2px #000;opacity:0;font-variant-numeric:tabular-nums;font-size:clamp(32px,9.5vw,76px);font-weight:900;position:absolute;top:50%;left:0;right:0}.mg-glow{box-shadow:inset 0 0 0 3px var(--mg-good);opacity:0;pointer-events:none;z-index:2;background:radial-gradient(70% 60% at 50% 45%,#3fd08f88,#0000 70%);position:absolute;inset:-2px}.mg-stamp{text-transform:uppercase;letter-spacing:.08em;opacity:0;z-index:3;white-space:nowrap;background:#0a1315cc;border:3px solid;padding:4px 12px 2px;font-size:clamp(18px,4.6vw,30px);font-weight:900;position:absolute;top:14%;left:50%;transform:translate(-50%)rotate(-10deg)scale(2)}.mg-card.win .mg-wr{color:var(--color-accent-strong)}.mg-card.lose .mg-wr{color:#ebe5d3aa}.mg-card.win .mg-meter i{background:var(--color-accent-strong)}.mg-card.lose .mg-meter i{background:#ebe5d355}.mg-vs{aspect-ratio:1;pointer-events:none;z-index:4;place-items:center;width:clamp(54px,15vw,96px);display:grid;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%)}.mg-vs:before{content:"";border:2px solid var(--color-accent);background:#0a1315;position:absolute;inset:12%;transform:rotate(45deg);box-shadow:0 0 0 4px #0a1315,0 0 0 5px #ebe5d366,0 0 24px #6fdca455}.mg-vs:after{content:"";opacity:0;border:2px solid #9ff0c6;border-radius:50%;position:absolute;inset:-30%}.mg-vs.burst:after{animation:.6s ease-out mg-ring}@keyframes mg-ring{0%{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(1.5)}}.mg-vs span{color:var(--color-accent-strong);letter-spacing:.02em;font-size:clamp(22px,6vw,38px);font-weight:900;position:relative}.mg-result{text-align:center;min-height:92px;margin-top:14px}.mg-verdict{text-transform:uppercase;min-height:34px;font-size:34px;font-weight:900;line-height:1}.mg-verdict.good{color:var(--color-accent-strong)}.mg-verdict.bad{color:var(--mg-bad)}.mg-reveal{color:#ebe5d3d9;max-width:34rem;min-height:1.4em;margin:6px auto 0;font-size:15px}.mg-next{margin-top:10px}.mg-over{z-index:10;background:#0a1315d9;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.mg-over[hidden]{display:none}.mg-over-card{text-align:center;background:linear-gradient(#142427,#0a1315);width:min(100%,380px);padding:22px 18px}.mg-final{color:var(--color-accent-strong);text-shadow:0 0 30px #6fdca466;font-variant-numeric:tabular-nums;font-size:110px;font-weight:900;line-height:1}.mg-newbest{text-transform:uppercase;letter-spacing:.1em;color:var(--color-night);background:var(--color-fire);margin-top:8px;padding:4px 14px 2px;font-size:26px;font-weight:900;display:inline-block}.mg-flash{z-index:8;pointer-events:none;opacity:0;background:radial-gradient(80% 80%,#0000 30%,#c2412fcc);position:absolute;inset:0}.mg-flash.good{background:radial-gradient(80% 80%,#0000 35%,#3fd08f88)}.mg-fx{z-index:9;pointer-events:none;position:absolute;inset:0;overflow:hidden}.mg-spark{background:var(--color-accent-strong);width:8px;height:8px;position:absolute;transform:rotate(45deg);box-shadow:0 0 10px #9ff0c6}.mg-spark.fire{background:var(--color-fire);box-shadow:0 0 10px #e0a458}.mg-flare{text-align:center;width:100%;font-family:var(--font-display);text-transform:uppercase;white-space:nowrap;color:var(--color-accent-strong);text-shadow:0 0 30px #3fd08f;background:linear-gradient(90deg,#0000,#0a1315f2 15% 85%,#0000);border-block:2px solid #6fdca4aa;padding:14px 8px 10px;font-size:clamp(40px,11vw,92px);font-weight:900;line-height:1;position:absolute;top:46%;left:50%}