/* MineX phone entry and loading motion. */
@font-face{font-family:MineXPixel;src:url(./silkscreen-400.woff2) format('woff2');font-display:swap;font-weight:400}
#minex-motion.mx-alive{--ink:#fff;color:#fff;background:#1a1240;--mx-radius:34px}
#minex-motion.mx-alive[data-look="sunrise"]{background:linear-gradient(#3a7bff,#ff9a6b 55%,#1aa9d6 56%,#0d6f9e)}
#minex-motion.mx-alive[data-look="night"]{background:linear-gradient(#070418,#2a0f5c 55%,#140832 56%,#05030f)}
#minex-motion.mx-alive[data-look="portal"]{background:radial-gradient(circle at 50% 50%,#5a1d9c,#120626 70%)}
#minex-motion.mx-alive .mx-halo{display:none}
#minex-motion.mx-alive .mx-canvas{z-index:1}

/* ── Living border ─────────────────────────────────────────── */
.mx-frame{position:absolute;inset:0;z-index:6;pointer-events:none;--mx-path-inset:5;--mx-path-radius:30}
.mx-edge-glow{position:absolute;inset:0;border-radius:var(--mx-radius);
  box-shadow:inset 0 0 34px 4px color-mix(in srgb,var(--mx-c1) 60%,transparent),inset 0 0 110px 8px color-mix(in srgb,var(--mx-c2) 26%,transparent);
  opacity:.55;animation:mx-breathe 4.2s ease-in-out infinite;will-change:opacity}
.mx-ring{position:absolute;inset:0;border-radius:var(--mx-radius);padding:4px;overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;transition:opacity .8s}
.mx-ring-spin{position:absolute;left:50%;top:50%;width:260vmax;height:260vmax;margin:-130vmax 0 0 -130vmax;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg 190deg,var(--mx-c1) 250deg,var(--mx-c2) 300deg,#fff 322deg,var(--mx-c3) 340deg,transparent 360deg);
  animation:mx-spin 6s linear infinite;will-change:transform}
.mx-ring-spin-b{opacity:0;animation-duration:2.1s;background:conic-gradient(from 120deg,transparent 0deg 230deg,var(--mx-c3) 290deg,#fff 330deg,var(--mx-c1) 350deg,transparent 360deg);transition:opacity .6s}
.mx-frame[data-mode="intro"] .mx-ring-spin-b{opacity:1}
.mx-frame[data-mode="intro"] .mx-edge-glow{animation-duration:1.6s}
.mx-frame::after{content:"";position:absolute;inset:0;border-radius:var(--mx-radius);box-shadow:inset 0 0 0 4px #fff,inset 0 0 60px 18px rgba(255,255,255,.75);opacity:0;will-change:opacity}
.mx-frame.mx-flash::after{animation:mx-flash .95s cubic-bezier(.2,.7,.2,1)}
.mx-frame.mx-pulse .mx-edge-glow{animation:mx-pulse .7s ease-out,mx-breathe 4.2s ease-in-out .7s infinite}
.mx-path{position:absolute;inset:0;overflow:visible}
.mx-path path{fill:none;stroke-linecap:round;stroke-linejoin:round;transition:opacity .4s}
.mx-path-track{stroke:rgba(255,255,255,.16);stroke-width:3;opacity:0}
.mx-path-seg{stroke:url(#mx-path-grad);stroke-width:5}
.mx-path-seg-glow{stroke:var(--mx-c2);stroke-width:14;opacity:.22}
.mx-path-seg[data-state="done"]{stroke:var(--mx-c2)}
.mx-path-shimmer{stroke:#fff;stroke-width:5;opacity:0}
.mx-frame[data-mode="loading"] .mx-path-track,.mx-frame[data-mode="registering"] .mx-path-track,.mx-frame[data-mode="email"] .mx-path-track{opacity:1}
.mx-frame[data-mode="loading"] .mx-ring,.mx-frame[data-mode="registering"] .mx-ring{opacity:.55}
.mx-frame[data-mode="idle"] .mx-path-seg,.mx-frame[data-mode="idle"] .mx-path-seg-glow,.mx-frame[data-mode="intro"] .mx-path-seg,.mx-frame[data-mode="intro"] .mx-path-seg-glow{opacity:0!important}
.mx-frame[data-ready="true"] .mx-path-seg{stroke:#fff}
.mx-corner{position:absolute;width:12px;height:12px;background:var(--mx-c2);box-shadow:inset -3px -3px 0 rgba(0,0,0,.28),inset 3px 3px 0 rgba(255,255,255,.45),0 0 14px var(--mx-c2);animation:mx-corner 2.4s steps(6) infinite;will-change:transform}
.mx-tl{top:14px;left:14px}.mx-tr{top:14px;right:14px;background:var(--mx-c3);animation-delay:-.6s}.mx-bl{bottom:14px;left:14px;background:var(--mx-c1);animation-delay:-1.2s}.mx-br{bottom:14px;right:14px;background:#fff;animation-delay:-1.8s}
#minex-motion.mx-alive[data-state="complete"] .mx-frame{opacity:0;transition:opacity 1.2s .3s}

/* Compositor-only sparkles: they keep moving even while the game engine parses. */
.mx-sparkles{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.mx-sparkles i{position:absolute;bottom:-24px;left:calc(var(--i) * 7.1% + 1%);width:7px;height:7px;background:var(--mx-c2);opacity:0;
  box-shadow:0 0 10px currentColor;animation:mx-rise calc(7s + var(--i) * .43s) linear infinite;animation-delay:calc(var(--i) * -1.17s);will-change:transform,opacity}
.mx-sparkles i:nth-child(3n){background:var(--mx-c1);width:5px;height:5px}
.mx-sparkles i:nth-child(3n+1){background:var(--mx-c3)}
.mx-sparkles i:nth-child(4n){background:#fff;width:4px;height:4px}

/* ── Header / footer ───────────────────────────────────────── */
#minex-motion.mx-alive .mx-header{justify-content:flex-start;gap:10px;z-index:8}
#minex-motion.mx-alive .mx-edition{margin-left:auto;color:rgba(255,255,255,.92);font-family:MineXPixel,ui-monospace,monospace;font-size:10px;letter-spacing:1.4px;text-shadow:0 1px 6px rgba(0,0,0,.35)}
#minex-motion.mx-alive .mx-edition span{color:rgba(255,255,255,.7);font-size:8px;letter-spacing:1.5px}
.mx-sound{pointer-events:auto;flex:none;width:40px;height:40px;margin-top:2px;border-radius:12px;border:1px solid rgba(255,255,255,.35);background:rgba(10,8,30,.32);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.mx-sound svg{width:19px;height:19px}
.mx-sound[aria-pressed="true"]{color:rgba(255,255,255,.6)}
#minex-motion.mx-alive .mx-footer{z-index:7}
#minex-motion.mx-alive .mx-solana{color:rgba(255,255,255,.85)}
#minex-motion.mx-alive .mx-solana strong{color:#fff}
#minex-motion.mx-alive .mx-logo img{filter:drop-shadow(0 4px 12px rgba(0,0,0,.35))}

/* ── Idle ──────────────────────────────────────────────────── */
#minex-motion.mx-alive .mx-idle{top:49%}
.mx-kicker{display:inline-block;margin:0 0 14px!important;padding:7px 11px 6px;border-radius:999px;background:rgba(10,8,30,.34);border:1px solid rgba(255,255,255,.25);
  font-family:MineXPixel,ui-monospace,monospace;font-size:10px!important;letter-spacing:1.6px;color:#fff!important}
#minex-motion.mx-alive .mx-idle h1{font-size:clamp(44px,6vw,72px);font-weight:820;letter-spacing:-2.2px;line-height:.96;color:#fff;
  text-shadow:0 3px 0 rgba(0,0,0,.16),0 12px 34px rgba(0,0,0,.32)}
#minex-motion.mx-alive .mx-idle-text{color:rgba(255,255,255,.92)!important;font-size:14px!important;line-height:1.5!important;margin-top:14px!important;text-shadow:0 1px 10px rgba(0,0,0,.35)}
#minex-motion.mx-alive .mx-enter{position:relative;gap:14px;min-height:62px;min-width:236px;border-radius:18px;padding:16px 26px;color:#170b30;font-weight:850;font-size:17px;letter-spacing:-.2px;
  background:linear-gradient(100deg,var(--mx-c2),#fff 45%,var(--mx-c3) 55%,var(--mx-c2));background-size:260% 100%;animation:mx-btn 3.2s linear infinite;
  box-shadow:0 14px 34px color-mix(in srgb,var(--mx-c1) 55%,transparent),inset 0 -5px 0 rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.6)}
#minex-motion.mx-alive .mx-enter:hover{background-color:transparent;transform:translateY(-2px)}
#minex-motion.mx-alive .mx-enter:active{transform:translateY(2px);box-shadow:0 6px 18px color-mix(in srgb,var(--mx-c1) 45%,transparent),inset 0 -2px 0 rgba(0,0,0,.2)}
#minex-motion.mx-alive .mx-enter svg{width:18px;height:18px;opacity:1}
#minex-motion.mx-alive .mx-enter::before{content:"";position:absolute;inset:-7px;border-radius:24px;border:2px solid rgba(255,255,255,.55);animation:mx-halo 1.9s ease-out infinite;pointer-events:none}
#minex-motion.mx-alive .mx-enter:disabled::before{display:none}
#minex-motion.mx-alive .mx-enter-note{color:rgba(255,255,255,.85);font-family:MineXPixel,ui-monospace,monospace;font-size:9px;letter-spacing:1px;margin-top:16px}
#minex-motion.mx-alive .mx-browser{margin-top:12px;background:transparent;border:0;color:#fff;text-decoration:underline;text-underline-offset:4px;min-height:40px;cursor:pointer}
#minex-motion.mx-alive .mx-browser[hidden]{display:none}

/* ── Copy ──────────────────────────────────────────────────── */
#minex-motion.mx-alive .mx-copy{top:47%}
#minex-motion.mx-alive .mx-copy h2{font-weight:850;letter-spacing:-3px;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.15),0 14px 40px rgba(0,0,0,.35)}
#minex-motion.mx-alive .mx-copy .mx-word:last-child{color:transparent;background:linear-gradient(95deg,var(--mx-c2),#fff 40%,var(--mx-c3) 60%,var(--mx-c1));-webkit-background-clip:text;background-clip:text;text-shadow:none;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
#minex-motion.mx-alive .mx-copy .mx-caption{color:#fff;font-family:MineXPixel,ui-monospace,monospace;font-size:10px;letter-spacing:1.6px;opacity:.95;display:inline-block;padding:7px 11px 6px;border-radius:999px;background:rgba(10,8,30,.34)}
#minex-motion.mx-alive .mx-skip{color:rgba(255,255,255,.85)}

#minex-motion.mx-alive[data-look="portal"] .mx-copy::before,#minex-motion.mx-alive[data-look="sunrise"] .mx-copy::before{content:"";position:absolute;left:-10%;right:-10%;top:-18%;bottom:-25%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(18,6,40,.55),rgba(18,6,40,0));pointer-events:none}
#minex-motion.mx-alive[data-look="sunrise"] .mx-copy::before{background:radial-gradient(closest-side,rgba(4,40,70,.35),rgba(4,40,70,0))}
/* ── Loader card: XP-bar style progress + four step chips ─── */
#minex-motion.mx-alive .mx-loader{top:auto;bottom:max(78px,calc(env(safe-area-inset-bottom) + 64px));width:min(340px,88vw);padding:15px 16px 13px;border-radius:20px;
  background:rgba(12,9,34,.58);border:1px solid rgba(255,255,255,.2);box-shadow:0 20px 50px rgba(0,0,0,.28);text-align:left}
#minex-motion.mx-alive .mx-status{color:#fff;font-size:13px;font-weight:700;margin-bottom:10px}
#minex-motion.mx-alive .mx-percent{color:var(--mx-c2);font-family:MineXPixel,ui-monospace,monospace;font-size:12px}
#minex-motion.mx-alive .mx-track{height:10px;border-radius:3px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);position:relative}
#minex-motion.mx-alive .mx-track::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),rgba(0,0,0,.38) calc(10% - 2px) 10%);pointer-events:none}
#minex-motion.mx-alive .mx-progress{background:linear-gradient(90deg,var(--mx-c1),var(--mx-c2));border-radius:2px;box-shadow:0 0 14px var(--mx-c2)}
#minex-motion.mx-alive .mx-track[data-indeterminate="true"] .mx-progress{width:22%;background:linear-gradient(90deg,transparent,var(--mx-c2),#fff,var(--mx-c2),transparent)}
#minex-motion.mx-alive .mx-loader-note{color:rgba(255,255,255,.88);font-size:11px;margin-top:10px}
#minex-motion.mx-alive .mx-loader-timing{color:rgba(255,255,255,.66);font-size:10px;margin:4px 0 0;min-height:0}
#minex-motion.mx-alive .mx-setup-steps{display:grid!important;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0 0;padding:0;list-style:none}
#minex-motion.mx-alive .mx-setup-steps li{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 2px 7px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.62);font-family:MineXPixel,ui-monospace,monospace;font-size:9px;letter-spacing:.5px;transition:background .4s,color .4s,transform .4s}
#minex-motion.mx-alive .mx-setup-steps li>i{display:none}
#minex-motion.mx-alive .mx-setup-steps li[data-status="active"]{color:#fff;background:rgba(255,255,255,.14);border-color:color-mix(in srgb,var(--mx-c2) 70%,transparent);animation:mx-chip 1.3s ease-in-out infinite}
#minex-motion.mx-alive .mx-setup-steps li[data-status="done"]{color:#10131f;background:var(--mx-c2);border-color:transparent;transform:translateY(-1px)}
.mx-ico{display:block;width:18px;height:18px;image-rendering:pixelated;border-radius:2px;box-shadow:inset -2px -2px 0 rgba(0,0,0,.25),inset 2px 2px 0 rgba(255,255,255,.3)}
.mx-ico-chest{background:linear-gradient(#a8692d 0 42%,#3b2410 42% 50%,#a8692d 50%);position:relative}
.mx-ico-chest::after{content:"";position:absolute;left:7px;top:5px;width:4px;height:6px;background:#f2d36b}
.mx-ico-coin{border-radius:50%;background:radial-gradient(circle,#fff3a6 0 26%,#ffcc33 27% 62%,#d18a12 63%)}
.mx-ico-grass{background:linear-gradient(#6fd043 0 34%,#8a5f3b 34%)}
.mx-ico-globe{border-radius:50%;background:radial-gradient(circle at 35% 35%,#8ff0ff 0 18%,transparent 19%),linear-gradient(135deg,#3d7bff 0 35%,#5fd35a 35% 55%,#3d7bff 55%)}

/* ── Email card in the alive looks ─────────────────────────── */
#minex-motion.mx-alive .mx-email{top:auto;bottom:max(70px,calc(env(safe-area-inset-bottom) + 56px));padding:20px 18px 16px;border-radius:22px;background:rgba(12,9,34,.62);border:1px solid rgba(255,255,255,.2);box-shadow:0 22px 60px rgba(0,0,0,.3)}
#minex-motion.mx-alive .mx-email-kicker{color:var(--mx-c2);font-family:MineXPixel,ui-monospace,monospace;font-size:9px}
#minex-motion.mx-alive .mx-email h2{color:#fff;font-weight:820;font-size:32px;margin-bottom:16px}
#minex-motion.mx-alive .mx-email label{color:rgba(255,255,255,.75)}
#minex-motion.mx-alive .mx-email-field{background:#fff;border-color:transparent}
#minex-motion.mx-alive .mx-email-error{color:#ffd0c2}
#minex-motion.mx-alive .mx-email .mx-enter{min-width:0}
#minex-motion.mx-alive .mx-email .mx-enter::before{display:none}
#minex-motion.mx-alive .mx-email-note,#minex-motion.mx-alive .mx-switch-email{color:rgba(255,255,255,.78)}
#minex-motion.mx-alive .mx-result p,#minex-motion.mx-alive .mx-notice{color:#fff}
#minex-motion.mx-alive .mx-notice{text-shadow:0 1px 8px rgba(0,0,0,.5)}
#minex-motion.mx-alive[data-state="registering"] .mx-loader{top:auto}

/* Error / retry: copy moves up, the retry card sits low, never overlapping on small phones. */
#minex-motion.mx-alive[data-state="error"] .mx-copy,#minex-motion.mx-alive[data-state="ready"] .mx-copy{top:30%}
#minex-motion.mx-alive .mx-result{top:auto;bottom:max(86px,calc(env(safe-area-inset-bottom) + 72px));padding:16px;border-radius:20px;background:rgba(12,9,34,.58);border:1px solid rgba(255,255,255,.2);left:max(16px,6vw);right:max(16px,6vw);max-width:380px;margin:0 auto}
#minex-motion.mx-alive .mx-result .mx-enter::before{display:none}
#minex-motion.mx-alive .mx-result p{color:rgba(255,255,255,.9);font-size:12px;max-width:none}
@media (max-height:600px){#minex-motion.mx-alive[data-state="error"] .mx-copy{top:24%}#minex-motion.mx-alive[data-state="error"] .mx-copy h2{font-size:40px}}
@media (max-width:600px){
  #minex-motion.mx-alive .mx-idle h1{font-size:46px}
  #minex-motion.mx-alive .mx-copy h2{font-size:56px}
}
@media (max-width:360px){
  #minex-motion.mx-alive .mx-idle h1{font-size:40px}#minex-motion.mx-alive .mx-copy h2{font-size:48px}#minex-motion.mx-alive .mx-enter{min-width:210px}
  #minex-motion.mx-alive .mx-loader{padding:12px 12px 10px}#minex-motion.mx-alive .mx-setup-steps li{font-size:8px}
}
@media (max-height:680px) and (orientation:portrait){
  #minex-motion.mx-alive .mx-idle{top:47%}#minex-motion.mx-alive .mx-copy{top:44%}
  #minex-motion.mx-alive .mx-loader{bottom:max(60px,calc(env(safe-area-inset-bottom) + 50px))}
  #minex-motion.mx-alive .mx-loader-timing{display:none}
}
/* Landscape: coin on the left, text and progress on the right. */
@media (orientation:landscape){
  #minex-motion.mx-alive .mx-idle{left:50%;right:4%;top:24%}
  #minex-motion.mx-alive .mx-copy{left:50%;right:4%;top:14%}
  #minex-motion.mx-alive .mx-loader,#minex-motion.mx-alive .mx-loader.visible{left:auto;right:4%;transform:none;width:min(360px,42vw);bottom:max(56px,calc(env(safe-area-inset-bottom) + 44px))}
  #minex-motion.mx-alive .mx-email{left:50%;right:4%;max-width:400px;bottom:40px}
  #minex-motion.mx-alive .mx-result{left:50%;right:4%;bottom:40px;margin:0;max-width:400px}
  #minex-motion.mx-alive[data-state="error"] .mx-copy,#minex-motion.mx-alive[data-state="ready"] .mx-copy{top:14%}
}
@media (orientation:landscape) and (max-height:570px){
  #minex-motion.mx-alive .mx-idle{top:20%}
  #minex-motion.mx-alive .mx-idle h1{font-size:34px}
  #minex-motion.mx-alive .mx-copy{top:19%;right:12%}
  #minex-motion.mx-alive .mx-copy h2{font-size:32px;letter-spacing:-1.4px}
  #minex-motion.mx-alive .mx-copy .mx-caption{margin-top:8px}
  #minex-motion.mx-alive .mx-loader,#minex-motion.mx-alive .mx-loader.visible{bottom:34px;padding:11px 12px 9px}
  #minex-motion.mx-alive .mx-loader-note,#minex-motion.mx-alive .mx-loader-timing{display:none}
  #minex-motion.mx-alive .mx-setup-steps{margin-top:8px}#minex-motion.mx-alive .mx-setup-steps li{padding:5px 2px 4px}
  #minex-motion.mx-alive .mx-footer{bottom:8px}
  .mx-corner{display:none}
  #minex-motion.mx-alive .mx-result{bottom:24px}
  #minex-motion.mx-alive[data-state="error"] .mx-copy{top:17%}
}

@keyframes mx-spin{to{transform:rotate(360deg)}}
@keyframes mx-breathe{0%,100%{opacity:.42}50%{opacity:.8}}
@keyframes mx-pulse{0%{opacity:1}100%{opacity:.5}}
@keyframes mx-flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
@keyframes mx-corner{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.35) rotate(90deg)}}
@keyframes mx-rise{0%{transform:translate3d(0,0,0) rotate(0);opacity:0}10%{opacity:.85}85%{opacity:.7}100%{transform:translate3d(18px,-108vh,0) rotate(540deg);opacity:0}}
@keyframes mx-btn{to{background-position:-260% 0}}
@keyframes mx-halo{0%{opacity:.85;transform:scale(.96)}100%{opacity:0;transform:scale(1.12)}}
@keyframes mx-chip{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mx-c2) 0%,transparent)}50%{box-shadow:0 0 16px 0 color-mix(in srgb,var(--mx-c2) 55%,transparent)}}

@media (prefers-reduced-motion:reduce){
  .mx-ring-spin,.mx-sparkles i,.mx-corner,.mx-edge-glow,#minex-motion.mx-alive .mx-enter,#minex-motion.mx-alive .mx-enter::before,#minex-motion.mx-alive .mx-setup-steps li{animation:none!important}
  .mx-sparkles{display:none}
}
#minex-motion.mx-alive[data-reduced-motion="true"] .mx-ring-spin,#minex-motion.mx-alive[data-reduced-motion="true"] .mx-sparkles i,#minex-motion.mx-alive[data-reduced-motion="true"] .mx-corner{animation:none}

/* October demo: reward preview stays inside the phone's loading card. */
#minex-motion .mx-demo-reward{display:flex;align-items:center;gap:14px;margin-top:14px;padding-top:12px;border-top:1px solid #ffffff24;text-align:left}
#minex-motion .mx-demo-reward img{flex:0 0 48px;width:48px;height:72px;object-fit:contain;filter:drop-shadow(0 4px 8px #0006)}
#minex-motion .mx-demo-reward strong{display:block;font:700 14px/1.3 system-ui;color:#fff}
#minex-motion .mx-demo-reward span{display:block;margin:4px 0;color:#ffe098;font:700 10px/1.3 system-ui;letter-spacing:.7px;text-transform:uppercase}
#minex-motion .mx-demo-reward small{display:block;color:#ffffffb8;font:11px/1.4 system-ui}
#minex-motion.mx-alive[data-state="loading"] .mx-copy{top:32%}
@media (orientation:portrait) and (max-height:740px){#minex-motion.mx-alive[data-state="loading"] .mx-copy{top:27%}#minex-motion .mx-demo-reward{margin-top:10px;padding-top:8px}#minex-motion .mx-demo-reward img{height:60px;width:40px;flex-basis:40px}}
@media (orientation:landscape){#minex-motion.mx-alive[data-state="loading"] .mx-copy{top:18%}#minex-motion .mx-demo-reward{margin-top:7px;padding-top:7px;gap:10px}#minex-motion .mx-demo-reward img{width:32px;height:44px;flex-basis:32px}#minex-motion .mx-demo-reward strong{font-size:12px}#minex-motion .mx-demo-reward small br{display:none}#minex-motion .mx-demo-reward small{font-size:10px}#minex-motion .mx-demo-reward span{font-size:9px;margin:2px 0}}
@media (orientation:landscape) and (max-height:440px){#minex-motion.mx-alive[data-state="loading"] .mx-copy{top:16%;left:50%;right:4%}#minex-motion.mx-alive[data-state="loading"] .mx-copy h2{font-size:26px}#minex-motion.mx-alive[data-state="loading"] .mx-copy .mx-caption{display:none}}

/* Phone browser bars reduce usable height: reserve separate space for each region. */
@media(orientation:portrait){
 #minex-motion.mx-alive .mx-copy{top:38%}
 #minex-motion.mx-alive[data-state=loading] .mx-copy{top:38%}
 #minex-motion.mx-alive .mx-copy h2{font-size:38px;letter-spacing:-1.7px}
 #minex-motion.mx-alive .mx-copy .mx-caption{margin-top:12px;font-size:9px;padding:6px 10px}
}
@media(orientation:portrait) and (max-height:740px){
 #minex-motion.mx-alive .mx-copy,#minex-motion.mx-alive[data-state=loading] .mx-copy{top:36%}
 #minex-motion.mx-alive .mx-copy h2{font-size:28px;letter-spacing:-1px}
 #minex-motion.mx-alive .mx-copy .mx-caption{margin-top:8px;font-size:8px}
}
@media(orientation:portrait) and (max-height:600px){
 #minex-motion.mx-alive .mx-idle{top:43%}
 #minex-motion.mx-alive .mx-idle h1{font-size:40px}
 #minex-motion.mx-alive .mx-kicker{margin-bottom:10px!important;font-size:9px!important}
 #minex-motion.mx-alive .mx-idle-text{margin-top:12px!important;font-size:13px!important}
 #minex-motion.mx-alive .mx-enter{margin-top:22px;min-height:54px;padding:12px 24px}
 #minex-motion.mx-alive .mx-enter-note{display:none}
 #minex-motion.mx-alive[data-state=loading] .mx-copy{display:none}
 #minex-motion.mx-alive[data-state=intro] .mx-copy{top:43%}
}

/* Roll across the viewport; the cube disappears at the phone edge before repeating. */
.mx-rolling-fallback{--mx-roll-span:100vw;display:none;position:absolute;left:50%;top:27%;width:var(--mx-roll-span);height:192px;overflow:hidden;transform:translate(-50%,-50%);pointer-events:none;z-index:3}
.mx-rolling-track,.mx-rolling-cube{width:96px;height:96px;transform-style:preserve-3d}
.mx-rolling-track{position:absolute;left:-152px;top:48px;perspective:700px;animation:mx-original-roll-track 4.8s linear infinite}
.mx-rolling-cube{transform:rotateX(-20deg) rotateY(25deg);animation:mx-original-roll-cube 4.8s linear infinite}
.mx-rolling-cube i{position:absolute;inset:0;display:block;width:96px;height:96px;backface-visibility:hidden;background-image:var(--mx-grass-side,linear-gradient(#62c43a 0 23%,#8a5f3b 23%));background-size:100% 100%;image-rendering:pixelated}
.mx-rolling-cube [data-face=front]{transform:translateZ(48px)}
.mx-rolling-cube [data-face=back]{transform:rotateY(180deg) translateZ(48px)}
.mx-rolling-cube [data-face=left]{transform:rotateY(-90deg) translateZ(48px)}
.mx-rolling-cube [data-face=right]{transform:rotateY(90deg) translateZ(48px)}
.mx-rolling-cube [data-face=top]{transform:rotateX(90deg) translateZ(48px);background-image:var(--mx-grass-top,linear-gradient(#6fc642,#6fc642))}
.mx-rolling-cube [data-face=bottom]{transform:rotateX(-90deg) translateZ(48px);background-image:var(--mx-grass-bottom,linear-gradient(#94623e,#94623e))}
#minex-motion[data-loading-phase=script_evaluation] .mx-rolling-fallback,#minex-motion[data-webgl=false] .mx-rolling-fallback{display:block}
#minex-motion[data-loading-phase=script_evaluation] .mx-canvas{opacity:0}
@keyframes mx-original-roll-track{from{transform:translateX(0)}to{transform:translateX(calc(var(--mx-roll-span) + 208px))}}
@keyframes mx-original-roll-cube{from{transform:rotateX(-20deg) rotateY(25deg) rotateZ(0deg)}to{transform:rotateX(-20deg) rotateY(25deg) rotateZ(-720deg)}}
@media(orientation:landscape){.mx-rolling-fallback{top:36%}}
@media(orientation:portrait) and (max-height:600px){.mx-rolling-fallback{--mx-roll-span:125vw;top:25%;transform:translate(-50%,-50%) scale(.8)}}
@media(prefers-reduced-motion:reduce){.mx-rolling-track,.mx-rolling-cube{animation:none!important}.mx-rolling-track{left:calc(50% - 48px);transform:none}.mx-rolling-cube{transform:rotateX(-20deg) rotateY(25deg)}}
#minex-motion[data-reduced-motion=true] .mx-rolling-track,#minex-motion[data-reduced-motion=true] .mx-rolling-cube{animation:none!important}
#minex-motion[data-reduced-motion=true] .mx-rolling-track{left:calc(50% - 48px);transform:none}

/* Preserve the original roll during native boot without two live WebGL contexts. */
#minex-motion[data-gpu-released=true] .mx-rolling-fallback{display:block}
#minex-motion[data-gpu-released=true] .mx-canvas{display:none}

/* The original particle burst fades into the same loading background. */
#minex-motion.mx-alive .mx-canvas{opacity:1;transition:opacity .6s ease-in-out}
#minex-motion.mx-alive[data-intro-transition=true] .mx-canvas{opacity:0}
#minex-motion.mx-alive[data-state=intro] .mx-rolling-fallback{display:none}
#minex-motion.mx-alive[data-state=intro] .mx-copy.visible:not(.out) .mx-word{animation-duration:.45s;animation-delay:0s}
#minex-motion.mx-alive[data-state=intro] .mx-copy.visible:not(.out) .mx-word:last-child{animation-delay:.06s}
#minex-motion.mx-alive[data-reduced-motion=true] .mx-canvas{transition:none}
@media(prefers-reduced-motion:reduce){#minex-motion.mx-alive .mx-canvas{transition:none}}

#minex-motion.mx-alive[data-state=intro] .mx-copy.out .mx-caption{opacity:0;transition-delay:0s;transition-duration:.6s}