:root {
  color-scheme: dark;
}

body[data-game-key="puzzle"] {
  background:
    radial-gradient(circle at 15% 14%, rgba(245, 231, 199, 0.08), transparent 26%),
    radial-gradient(circle at 84% 18%, rgba(104, 173, 178, 0.08), transparent 24%),
    linear-gradient(180deg, #141210 0%, #0f0d0c 44%, #090807 100%);
}

body[data-game-key="puzzle"] .game-template-panel {
  background:
    linear-gradient(180deg, rgba(17, 15, 13, 0.94), rgba(10, 9, 8, 0.92)),
    radial-gradient(circle at top left, rgba(235, 211, 161, 0.05), transparent 30%);
}

body[data-game-key="puzzle"] .game-template-app {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 20px 0 28px;
}

body[data-game-key="puzzle"] .game-template-panel::before {
  background:
    radial-gradient(circle at top left, rgba(235, 211, 161, 0.05), transparent 22%),
    radial-gradient(circle at bottom right, rgba(86, 144, 150, 0.05), transparent 26%);
}

body[data-game-key="puzzle"] .game-template-nav,
body[data-game-key="puzzle"] .game-template-hero,
body[data-game-key="puzzle"] .game-template-support,
body[data-game-key="puzzle"] .seo-copy__section {
  border-color: rgba(211, 184, 130, 0.12);
}

body[data-game-key="puzzle"] .game-template-nav,
body[data-game-key="puzzle"] .game-template-sidebar,
body[data-game-key="puzzle"] .seo-copy,
body[data-game-key="puzzle"] .game-hub,
body[data-game-key="puzzle"] .vinyl-cta,
body[data-game-key="puzzle"] .xiiy-lang-toggle {
  display: none !important;
}

body[data-game-key="puzzle"] .game-template-panel {
  width: min(100%, 560px) !important;
  max-width: 560px !important;
  min-height: 0;
  margin: 0 auto;
  padding: 14px;
}

body[data-game-key="puzzle"] .game-template-showcase {
  display: block;
}

body[data-game-key="puzzle"] .game-template-stage {
  width: 100%;
  min-height: 0;
}

body[data-game-key="puzzle"] .game-template-stage__frame {
  width: 100%;
  margin: 0 auto;
  padding: 10px;
  border-color: rgba(205, 177, 118, 0.16);
  background:
    linear-gradient(180deg, rgba(20, 17, 15, 0.98), rgba(11, 10, 9, 0.98)),
    radial-gradient(circle at 50% 0%, rgba(205, 177, 118, 0.08), transparent 44%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 24px 54px rgba(0, 0, 0, 0.42),
    0 0 34px rgba(205, 177, 118, 0.06);
}

body[data-game-key="puzzle"] .template-icon-button:hover {
  border-color: rgba(205, 177, 118, 0.28);
}

body[data-game-key="puzzle"] .game-template-hero__badge {
  border-color: rgba(205, 177, 118, 0.16);
  background:
    linear-gradient(180deg, rgba(32, 27, 23, 0.86), rgba(18, 16, 14, 0.78)),
    radial-gradient(circle at top, rgba(104, 173, 178, 0.08), transparent 68%);
}

body[data-game-key="puzzle"] .puzzle-shell-stage {
  min-height: 0;
}

body[data-game-key="puzzle"] .puzzle-shell-stage__actions {
  top: 16px;
  right: 16px;
  z-index: 18;
}

body[data-game-key="puzzle"] .puzzle-shell-canvas {
  display: grid;
  align-items: stretch;
  height: min(calc(100dvh - 88px), 860px);
  min-height: min(calc(100dvh - 88px), 860px);
  padding: 14px;
  background:
    radial-gradient(circle at 50% 7%, rgba(233, 215, 174, 0.08), transparent 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(0, 0, 0, 0.08)),
    #120f0d;
}

body[data-game-key="puzzle"] .puzzle-shell-canvas__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 6%, rgba(255, 235, 193, 0.08), transparent 24%),
    radial-gradient(circle at 50% 92%, rgba(91, 145, 150, 0.12), transparent 30%);
}

body[data-game-key="puzzle"] .puzzle-runtime-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  height: min(100%, 760px);
  min-height: 620px;
  border: 0;
  border-radius: 24px;
  display: block;
  background: #0f0d0b;
}

body[data-game-key="puzzle"] .puzzle-loader {
  top: 14%;
  z-index: 4;
  gap: 10px;
  width: min(84%, 304px);
  border-color: rgba(205, 177, 118, 0.16);
  background:
    linear-gradient(180deg, rgba(24, 20, 17, 0.72), rgba(14, 12, 11, 0.62)),
    radial-gradient(circle at top, rgba(255, 247, 221, 0.06), transparent 64%);
}

body[data-game-key="puzzle"] .puzzle-loader__button {
  margin-top: 2px;
  min-width: 0;
}

body[data-game-key="puzzle"] .puzzle-loader__spinner {
  width: 34px;
  height: 34px;
  margin: 2px auto 0;
  border-radius: 50%;
  border: 2px solid rgba(233, 220, 188, 0.16);
  border-top-color: rgba(233, 220, 188, 0.82);
  animation: puzzle-shell-spin 900ms linear infinite;
}

body[data-game-key="puzzle"] .puzzle-loader[data-loader-state="loading"] .puzzle-loader__button,
body[data-game-key="puzzle"] .puzzle-loader[data-loader-state="ready"] .puzzle-loader__button {
  display: none;
}

body[data-game-key="puzzle"] .puzzle-loader[data-loader-state="ready"] {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-10px);
  transition:
    opacity 220ms ease,
    visibility 0s linear 220ms,
    transform 220ms ease;
}

body[data-game-key="puzzle"] .puzzle-shell-canvas[data-runtime-ready="true"] .puzzle-loader {
  pointer-events: none;
}

body.puzzle-shell-fullscreen {
  overflow: hidden;
}

body.puzzle-shell-fullscreen .game-template-app {
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

body.puzzle-shell-fullscreen .game-template-panel {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding:
    max(10px, env(safe-area-inset-top, 0px))
    max(10px, env(safe-area-inset-right, 0px))
    max(10px, env(safe-area-inset-bottom, 0px))
    max(10px, env(safe-area-inset-left, 0px));
  border: 0;
  border-radius: 0;
}

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

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

body.puzzle-shell-fullscreen .game-template-stage {
  width: 100%;
  min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px);
}

body.puzzle-shell-fullscreen .game-template-stage__frame {
  width: min(100%, 460px);
  min-height: 0;
  margin: 0 auto;
}

body.puzzle-shell-fullscreen .puzzle-shell-stage {
  min-height: 0;
}

body.puzzle-shell-fullscreen .puzzle-shell-canvas {
  height: min(calc(100dvh - 72px), 860px);
  min-height: min(calc(100dvh - 72px), 860px);
}

@keyframes puzzle-shell-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 640px) {
  body[data-game-key="puzzle"] .puzzle-shell-canvas {
    padding: 10px;
  }

  body[data-game-key="puzzle"] .puzzle-runtime-frame {
    min-height: 72dvh;
    border-radius: 18px;
  }
}