:root {
  color-scheme: dark;
  --bg: #eef0fb;
  --bg-soft: #d7dcef;
  --bg-deep: #566688;
  --panel: rgba(231, 236, 251, 0.92);
  --panel-strong: rgba(243, 246, 255, 0.96);
  --line: rgba(123, 155, 211, 0.28);
  --line-strong: rgba(123, 155, 211, 0.46);
  --orange-line: rgba(242, 208, 167, 0.44);
  --green: #9bcfc5;
  --green-soft: #f6f3ea;
  --orange: #f3c89d;
  --orange-soft: #f7e5cb;
  --ink: #f8fbff;
  --muted: rgba(243, 248, 255, 0.82);
  --shadow: rgba(48, 62, 96, 0.24);
}

body {
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 247, 223, 0.5), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(191, 214, 255, 0.38), transparent 24%),
    linear-gradient(180deg, #6278a4 0%, #7789b5 18%, #91a1c8 42%, #c6d0ea 72%, #dde5f6 100%);
}

.game-template-panel {
  background:
    linear-gradient(180deg, rgba(78, 93, 136, 0.64), rgba(83, 103, 149, 0.54)),
    radial-gradient(circle at top left, rgba(255, 244, 222, 0.28), transparent 28%);
}

.game-template-panel::before {
  background:
    radial-gradient(circle at top left, rgba(255, 246, 230, 0.28), transparent 26%),
    radial-gradient(circle at bottom right, rgba(194, 223, 252, 0.24), transparent 28%);
}

.game-template-nav {
  border-color: rgba(226, 236, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(111, 127, 176, 0.7), rgba(92, 109, 155, 0.66)),
    radial-gradient(circle at top left, rgba(255, 247, 232, 0.18), transparent 26%);
}

.game-template-nav::before,
.game-template-stage__frame::before {
  border-color: rgba(255, 255, 255, 0.09);
}

.game-template-nav .back-link,
.game-template-nav .utility-link,
.game-template-hero__subtitle,
.instructions p,
.seo-copy p,
.game-template-hero__badge span {
  color: rgba(247, 250, 255, 0.86);
}

.game-template-hero,
.game-template-support .instructions,
.seo-copy__section {
  border-color: rgba(232, 241, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(104, 121, 171, 0.76), rgba(86, 102, 146, 0.7)),
    radial-gradient(circle at top right, rgba(255, 244, 223, 0.2), transparent 36%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 20px 42px rgba(58, 72, 109, 0.18);
}

.game-template-hero__badge {
  border-color: rgba(245, 224, 191, 0.34);
  background:
    linear-gradient(180deg, rgba(241, 229, 212, 0.2), rgba(146, 170, 216, 0.24)),
    rgba(93, 111, 159, 0.56);
}

.game-template-hero__badge strong,
.game-template-hero h1,
.instructions h2,
.seo-copy h2,
.game-template-nav .back-link,
.game-template-nav .utility-link {
  color: #ffffff;
}

.game-template-stage__frame {
  border-color: rgba(234, 243, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(100, 117, 170, 0.84), rgba(88, 104, 151, 0.88)),
    radial-gradient(circle at 50% 0%, rgba(255, 245, 227, 0.18), transparent 44%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 24px 54px rgba(53, 66, 100, 0.22),
    0 0 34px rgba(214, 234, 255, 0.1);
}

.luma-hero-fullscreen-button {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(241, 245, 255, 0.22);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(250, 244, 231, 0.92), rgba(238, 230, 215, 0.9));
  color: #55688f;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    0 12px 24px rgba(51, 64, 97, 0.14);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.luma-hero-fullscreen-button:hover,
.luma-hero-fullscreen-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 248, 232, 0.42);
  box-shadow:
    0 0 0 3px rgba(194, 248, 255, 0.12),
    0 14px 26px rgba(51, 64, 97, 0.18);
}

.luma-hero-fullscreen-button[data-fullscreen-active="true"] {
  background:
    linear-gradient(180deg, rgba(98, 115, 165, 0.88), rgba(85, 101, 148, 0.9));
  color: #f9fcff;
  border-color: rgba(242, 246, 255, 0.18);
}

.luma-fullscreen-exit-button {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 8;
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(241, 245, 255, 0.24);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(98, 115, 165, 0.88), rgba(85, 101, 148, 0.9));
  color: #f9fcff;
  font: inherit;
  font-size: 2rem;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 14px 28px rgba(40, 52, 84, 0.24);
  cursor: pointer;
}

.luma-fullscreen-exit-button:hover,
.luma-fullscreen-exit-button:focus-visible {
  border-color: rgba(255, 248, 232, 0.42);
  box-shadow:
    0 0 0 3px rgba(194, 248, 255, 0.12),
    0 16px 30px rgba(40, 52, 84, 0.28);
}

.luma-shell-canvas {
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 247, 230, 0.3), transparent 28%),
    linear-gradient(180deg, #677dad 0%, #8698bf 36%, #c4d0e7 76%, #dce4f5 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 24px 50px rgba(255, 255, 255, 0.06);
  touch-action: manipulation;
}

.luma-shell-canvas::before {
  display: none;
}

.luma-shell-canvas__poster,
.luma-shell-canvas__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.luma-shell-canvas__poster {
  background:
    linear-gradient(180deg, rgba(94, 112, 160, 0.26), rgba(88, 104, 151, 0.18)),
    url("./assets/backgrounds/level-bg-01.png") center center / cover no-repeat;
  transform: scale(1.02);
}

.luma-shell-canvas__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
    radial-gradient(circle at 50% 16%, rgba(255, 252, 245, 0.22), transparent 32%);
}

.luma-shell-canvas__frame {
  border: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 220ms ease;
}

.luma-shell-canvas[data-runtime-ready="true"] .luma-shell-canvas__frame {
  opacity: 1;
}

.luma-loader {
  top: 18%;
  width: min(84%, 304px);
  gap: 10px;
  padding: 16px 18px 16px;
  border-color: rgba(236, 242, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(93, 109, 157, 0.84), rgba(77, 93, 141, 0.8)),
    radial-gradient(circle at top, rgba(255, 247, 232, 0.22), transparent 62%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 30px rgba(51, 64, 97, 0.2);
  pointer-events: auto;
}

.luma-loader__logo {
  display: block;
  width: min(192px, 68%);
  height: auto;
  margin: -8px auto 2px;
  filter: drop-shadow(0 12px 24px rgba(40, 53, 90, 0.22));
  image-rendering: auto;
}

.luma-loader strong {
  font-size: 0.88rem;
  letter-spacing: 0.08em;
}

.luma-loader span {
  color: rgba(247, 250, 255, 0.88);
  font-size: 0.84rem;
}

.luma-loader__button {
  min-height: 48px;
  margin-top: 4px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 247, 234, 0.98), rgba(244, 235, 220, 0.94));
  color: #55688f;
}

.luma-loader__spinner {
  width: 42px;
  height: 42px;
  margin: 0 auto 2px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.96);
  animation: luma-shell-spin 920ms linear infinite;
}

.luma-loader[data-loader-state="loading"] .luma-loader__button {
  display: none;
}

.luma-loader[data-loader-state="loading"] {
  top: 22%;
}

.luma-loader[data-loader-state="ready"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-12px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

body.luma-shell-fullscreen {
  background: #05070d;
}

body.luma-shell-fullscreen .game-template-app {
  padding: 0;
}

body.luma-shell-fullscreen .game-template-panel {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.luma-shell-fullscreen .game-template-panel::before,
body.luma-shell-fullscreen .game-template-nav,
body.luma-shell-fullscreen .game-template-sidebar,
body.luma-shell-fullscreen .seo-copy,
body.luma-shell-fullscreen .game-hub,
body.luma-shell-fullscreen .vinyl-cta,
body.luma-shell-fullscreen .xiiy-lang-toggle {
  display: none !important;
}

body.luma-shell-fullscreen .game-template-showcase {
  display: block;
}

body.luma-shell-fullscreen .game-template-stage,
body.luma-shell-fullscreen .game-template-stage__frame,
body.luma-shell-fullscreen .luma-shell-canvas {
  width: 100vw;
  max-width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
}

body.luma-shell-fullscreen .game-template-stage__frame {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.luma-shell-fullscreen .game-template-stage__frame::before {
  display: none;
}

body.luma-shell-fullscreen .luma-fullscreen-exit-button {
  display: inline-flex;
}

@keyframes luma-shell-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 759px) {
  body[data-template-layout="showcase"] .luma-loader {
    display: grid !important;
    z-index: 6;
  }

  .luma-loader {
    top: 16%;
    width: min(84vw, 300px);
  }

  .luma-loader__logo {
    width: min(180px, 72%);
  }

  .luma-loader strong {
    font-size: 0.84rem;
  }

  .luma-loader span {
    font-size: 0.78rem;
  }

  .luma-loader__button {
    min-height: 46px;
    font-size: 0.9rem;
  }

  .luma-hero-fullscreen-button {
    min-height: 42px;
    padding: 0 16px;
    font-size: 0.82rem;
  }

  .luma-fullscreen-exit-button {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    font-size: 1.9rem;
  }
}