:root {
  color-scheme: dark;
}

body[data-game-key="jabagame"] {
  background:
    radial-gradient(circle at 14% 12%, rgba(124, 255, 0, 0.16), transparent 24%),
    radial-gradient(circle at 84% 16%, rgba(255, 122, 0, 0.14), transparent 24%),
    linear-gradient(180deg, #0c120e 0%, #111914 38%, #19221b 100%);
}

body[data-game-key="jabagame"] .game-template-panel {
  background:
    linear-gradient(180deg, rgba(12, 18, 14, 0.88), rgba(16, 23, 18, 0.84)),
    radial-gradient(circle at top left, rgba(124, 255, 0, 0.08), transparent 28%);
}

body[data-game-key="jabagame"] .game-template-panel::before {
  background:
    radial-gradient(circle at top left, rgba(124, 255, 0, 0.08), transparent 26%),
    radial-gradient(circle at bottom right, rgba(255, 122, 0, 0.08), transparent 28%);
}

body[data-game-key="jabagame"] .game-template-nav {
  border-color: rgba(124, 255, 0, 0.14);
  background:
    linear-gradient(180deg, rgba(18, 26, 20, 0.94), rgba(14, 21, 16, 0.9)),
    radial-gradient(circle at top left, rgba(124, 255, 0, 0.06), transparent 24%);
}

body[data-game-key="jabagame"] .game-template-nav::before,
body[data-game-key="jabagame"] .game-template-stage__frame::before {
  border-color: rgba(255, 255, 255, 0.06);
}

body[data-game-key="jabagame"] .game-template-nav .back-link,
body[data-game-key="jabagame"] .game-template-nav .utility-link,
body[data-game-key="jabagame"] .game-template-hero__subtitle,
body[data-game-key="jabagame"] .instructions p,
body[data-game-key="jabagame"] .seo-copy p,
body[data-game-key="jabagame"] .game-template-hero__badge span {
  color: rgba(242, 246, 239, 0.84);
}

body[data-game-key="jabagame"] .game-template-hero,
body[data-game-key="jabagame"] .game-template-support .instructions,
body[data-game-key="jabagame"] .seo-copy__section {
  border-color: rgba(124, 255, 0, 0.14);
  background:
    linear-gradient(180deg, rgba(16, 23, 18, 0.94), rgba(12, 18, 14, 0.9)),
    radial-gradient(circle at top right, rgba(255, 122, 0, 0.06), transparent 34%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 20px 40px rgba(0, 0, 0, 0.24);
}

body[data-game-key="jabagame"] .game-template-hero__badge {
  border-color: rgba(255, 122, 0, 0.2);
  background:
    linear-gradient(180deg, rgba(28, 38, 30, 0.88), rgba(18, 25, 20, 0.78)),
    radial-gradient(circle at top, rgba(255, 122, 0, 0.12), transparent 70%);
}

body[data-game-key="jabagame"] .game-template-hero__badge strong,
body[data-game-key="jabagame"] .game-template-hero h1,
body[data-game-key="jabagame"] .instructions h2,
body[data-game-key="jabagame"] .seo-copy h2,
body[data-game-key="jabagame"] .game-template-nav .back-link,
body[data-game-key="jabagame"] .game-template-nav .utility-link {
  color: #f4f8f2;
}

body[data-game-key="jabagame"] .game-template-stage__frame {
  border-color: rgba(124, 255, 0, 0.16);
  background:
    linear-gradient(180deg, rgba(18, 26, 20, 0.96), rgba(12, 17, 14, 0.98)),
    radial-gradient(circle at top, rgba(124, 255, 0, 0.06), transparent 42%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 24px 54px rgba(0, 0, 0, 0.3);
}

body[data-game-key="jabagame"] .jabagame-stage {
  min-height: clamp(560px, 78dvh, 920px);
}

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

body[data-game-key="jabagame"] .jabagame-shell-canvas {
  display: grid;
  place-items: center;
  aspect-ratio: 390 / 640;
  width: min(100%, 476px);
  margin-inline: auto;
  height: 100%;
  min-height: 0;
  padding: 18px 18px 20px;
  background:
    radial-gradient(circle at 50% 12%, rgba(124, 255, 0, 0.06), transparent 20%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(0, 0, 0, 0.1)),
    #070a08;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 18px 34px rgba(124, 255, 0, 0.03);
}

body[data-game-key="jabagame"] .jabagame-app,
body[data-game-key="jabagame"] .game-screen {
  width: 100%;
  height: 100%;
}

body[data-game-key="jabagame"] .game-screen {
  display: grid;
  place-items: center;
}

body[data-game-key="jabagame"] .jabagame-app {
  width: min(100%, 440px);
  max-width: 440px;
  margin: 0 auto;
}

body[data-game-key="jabagame"] .game-field {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 390 / 640;
  border-radius: 26px;
}

body[data-game-key="jabagame"] .hud {
  inset: 0.9rem 1rem auto;
}

body[data-game-key="jabagame"] #game-stage:fullscreen {
  width: 100vw;
  max-width: none;
  min-height: 100dvh;
  height: 100dvh;
  padding: 0;
  border-radius: 0;
}

body[data-game-key="jabagame"] #game-stage:fullscreen .jabagame-shell-canvas {
  aspect-ratio: 390 / 640;
  padding: 18px;
  border-radius: 0;
}

body[data-game-key="jabagame"] #game-stage:fullscreen .game-field {
  border-radius: 18px;
}

body[data-game-key="jabagame"] #game-stage:fullscreen .jabagame-app {
  width: min(100%, 520px);
  max-width: 520px;
}

body[data-game-key="jabagame"] #game-stage:fullscreen .jabagame-stage__actions {
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
}

@media (max-width: 980px) {
  body[data-game-key="jabagame"] .jabagame-stage {
    min-height: clamp(520px, 72dvh, 760px);
  }
}

@media (max-width: 640px) {
  body[data-game-key="jabagame"] .jabagame-shell-canvas {
    width: min(100vw, calc(100dvh * 390 / 640));
    height: min(100dvh, calc(100vw * 640 / 390));
    aspect-ratio: 390 / 640;
  }

  body[data-game-key="jabagame"] .jabagame-shell-canvas {
    padding: 12px;
  }

  body[data-game-key="jabagame"] .game-field {
    border-radius: 22px;
  }

  body[data-game-key="jabagame"] .jabagame-app,
  body[data-game-key="jabagame"] #game-stage:fullscreen .jabagame-app {
    width: 100%;
    max-width: 100%;
  }
}