:root {
  --cmx-load-green: #52ff92;
  --cmx-load-bg: #060c09;
}
#cmx-boot, #cmx-boot * { box-sizing: border-box; }
#cmx-boot {
  position: fixed; inset: 0; z-index: 2147483000; min-height: 100svh;
  display: grid; place-items: center; overflow: auto; padding: 32px 24px;
  background: radial-gradient(ellipse at 50% 45%, #123624 0, #091810 30%, var(--cmx-load-bg) 68%);
  color: #f2fff7; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  isolation: isolate; transition: opacity .24s ease, visibility .24s ease;
}
#cmx-boot[hidden] { display: none !important; }
#cmx-boot.cmx-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
#cmx-boot::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(#52ff9205 1px, transparent 1px), linear-gradient(90deg, #52ff9205 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(ellipse, black, transparent 75%);
}
.cmx-load-court { position: absolute; width: min(1100px, 135vw); height: auto; opacity: .12; z-index: -1; color: #52ff92; pointer-events: none; }
.cmx-load-content { text-align: center; width: min(100%, 420px); }
.cmx-load-kicker { margin: 0 0 38px; color: #9fb7a8; font-size: 10px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.cmx-load-emblem {
  position: relative; display: grid; place-items: center; width: 112px; height: 112px; margin: 0 auto 28px;
  border-radius: 50%; background: #0c2117; box-shadow: 0 0 70px #52ff9211, inset 0 0 0 1px #52ff921c;
}
.cmx-load-ring { position: absolute; inset: -8px; width: 128px; height: 128px; animation: cmx-spin 1.5s linear infinite; }
.cmx-load-logo {
  max-width: 76px; max-height: 76px; width: auto; height: auto;
  object-fit: contain; display: block; position: relative; z-index: 1;
}
.cmx-load-tagline { margin: 14px 0 38px; color: #9cb5a5; font-size: 13px; letter-spacing: .015em; }
.cmx-load-track { width: 164px; height: 3px; margin: 0 auto 20px; overflow: hidden; border-radius: 10px; background: #52ff9218; }
.cmx-load-track::after { content: ""; display: block; width: 45%; height: 100%; border-radius: inherit; background: var(--cmx-load-green); animation: cmx-track 1.7s ease-in-out infinite; }
.cmx-load-status { margin: 0; min-height: 22px; color: #d7e9dd; font-size: 13px; font-weight: 500; }
.cmx-load-note { margin: 10px auto 0; max-width: 300px; color: #91a99a; font-size: 12px; line-height: 1.6; }
.cmx-load-retry {
  margin-top: 20px; padding: 12px 22px; border: 0; border-radius: 10px;
  background: var(--cmx-load-green); color: #07140c; font-family: inherit;
  font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.cmx-load-retry:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cmx-load-retry:active { transform: translateY(0); }
.cmx-load-retry:focus-visible { outline: 3px solid white; outline-offset: 4px; }
.cmx-load-footer {
  position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); left: 12px; right: 12px;
  text-align: center; font-size: 9px; letter-spacing: .23em; color: #738d7b; text-transform: uppercase;
}
.cmx-load-footer i { display: inline-block; width: 5px; height: 5px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--cmx-load-green); }
#cmx-boot[data-state="error"] .cmx-load-ring, #cmx-boot[data-state="error"] .cmx-load-track::after { animation-play-state: paused; }
#cmx-boot[data-state="error"] .cmx-load-track { visibility: hidden; }

.cmx-skeleton { position: relative; overflow: hidden; border-radius: 14px; background: #142119; }
.cmx-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, #8bffb812 50%, transparent 80%);
  transform: translateX(-100%); animation: cmx-shimmer 1.8s ease-in-out infinite;
}

@keyframes cmx-spin { to { transform: rotate(360deg); } }
@keyframes cmx-track { 0% { transform: translateX(-110%); } 100% { transform: translateX(330%); } }
@keyframes cmx-shimmer { to { transform: translateX(100%); } }

@media (max-width: 480px) {
  .cmx-load-emblem { width: 96px; height: 96px; margin-bottom: 22px; }
  .cmx-load-ring { inset: -6px; width: 108px; height: 108px; }
  .cmx-load-logo { max-width: 64px; max-height: 64px; }
  .cmx-load-kicker { margin-bottom: 24px; font-size: 9px; }
  .cmx-load-tagline { margin: 10px 0 26px; font-size: 12px; }
}

@media (max-height: 540px) {
  .cmx-load-kicker, .cmx-load-footer { display: none; }
  .cmx-load-emblem { margin-bottom: 16px; width: 80px; height: 80px; }
  .cmx-load-ring { inset: -6px; width: 92px; height: 92px; }
  .cmx-load-logo { max-width: 52px; max-height: 52px; }
  .cmx-load-tagline { margin-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  #cmx-boot, #cmx-boot * { animation: none !important; transition: none !important; }
  .cmx-skeleton::after { animation: none; transform: none; }
}