/* Game PNG skins. Loaded last so the original responsive content remains intact. */
:root { --game-button-green: #07a688; }
.button-green-emphasis { color: var(--game-button-green); }
.hero-answer { display: block; }

.choice-card,
.art-window,
.demo-card,
.origins-carousel,
.contact-form-wrap {
  position: relative;
  isolation: isolate;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Nine-slice keeps the navy frame and rounded corners at their source thickness. */
.choice-card::before,
.art-window::before,
.demo-card::before,
.origins-carousel::before,
.contact-form-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border: 26px solid transparent;
  border-image: url("assets/game-ui/card-blue.png") 26 fill / 26px / 0 stretch;
}

.choice-card,
.art-window,
.demo-card,
.origins-carousel { padding: 14px; }
.art-window .hero-art { display: block; border-radius: 2px; }
.demo-scene,
.origins-carousel-viewport { border-radius: 2px; }
.choice-selector,
.origins-carousel-controls { border-top: 0; }
.contact-form-wrap { min-width: 0; padding: 34px; }

/* Transparent 44px controls retain generous mouse/touch targets around the art. */
.choice-arrow,
.origins-arrow,
.choice-arrow:hover,
.choice-arrow:active,
.origins-arrow:hover {
  width: 44px;
  height: 44px;
  padding: 2px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
}
.game-arrow-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.choice-arrow:hover .game-arrow-art,
.origins-arrow:hover .game-arrow-art,
.faq-item summary:hover .faq-toggle-art { filter: brightness(1.08); }
.choice-arrow:active .game-arrow-art,
.origins-arrow:active .game-arrow-art { transform: scale(.94); }
.choice-arrow:focus-visible,
.origins-arrow:focus-visible,
.faq-item summary:focus-visible {
  outline: 3px solid #067ba4;
  outline-offset: 3px;
}

.faq-item summary { gap: 16px; }
.faq-toggle-art {
  display: block;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  object-fit: contain;
  transform: rotate(90deg);
  pointer-events: none;
}
.faq-item[open] summary .faq-toggle-art { transform: rotate(-90deg); }

/* The same down/up triangle indicates the mobile navigation state. */
.menu-toggle {
  width: 44px;
  height: 44px;
  padding: 6px;
  border: 0;
  background: transparent;
}
.menu-toggle-art {
  width: 32px;
  height: 32px;
  object-fit: contain;
  transform: rotate(90deg);
  pointer-events: none;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-art { transform: rotate(-90deg); }
.menu-toggle:hover .menu-toggle-art { filter: brightness(1.08); }

/* Three horizontal slices preserve the rectangular button's rounded end caps. */
.button.nav-cta,
.button.origins-contact-button,
.button.form-submit,
.button.privacy-confirm,
.choices-motion-toggle,
.back-top,
.button.nav-cta:hover,
.button.origins-contact-button:hover,
.button.form-submit:hover,
.button.privacy-confirm:hover,
.choices-motion-toggle:hover,
.back-top:hover {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #fff;
  text-shadow: 0 1px 2px #002f26, 0 0 2px #002f26;
}
.button.nav-cta::before,
.button.origins-contact-button::before,
.button.form-submit::before,
.button.privacy-confirm::before,
.choices-motion-toggle::before,
.back-top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-style: solid;
  border-width: 0 24px;
  border-color: transparent;
  border-image: url("assets/game-ui/button-green.png") 0 250 fill / 0 24px / 0 stretch;
}
.button.nav-cta:hover::before,
.button.origins-contact-button:hover::before,
.button.form-submit:hover::before,
.button.privacy-confirm:hover::before,
.choices-motion-toggle:hover::before,
.back-top:hover::before { filter: brightness(1.08); }
.button.nav-cta:focus-visible,
.button.origins-contact-button:focus-visible,
.button.form-submit:focus-visible,
.button.privacy-confirm:focus-visible,
.choices-motion-toggle:focus-visible,
.back-top:focus-visible {
  outline: 3px solid #067ba4;
  outline-offset: 4px;
}

.choices-motion-toggle,
.back-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  gap: 8px;
  font-weight: 800;
  text-decoration: none;
}

.demo-controls input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 44px;
  accent-color: var(--game-button-green);
  background: transparent;
}
.demo-controls input[type="range"]::-webkit-slider-runnable-track {
  box-sizing: border-box;
  height: 10px;
  border: 1px solid #092638;
  border-radius: 999px;
  background: var(--game-button-green);
}
.demo-controls input[type="range"]::-moz-range-track {
  box-sizing: border-box;
  height: 10px;
  border: 1px solid #092638;
  border-radius: 999px;
  background: var(--game-button-green);
}
.demo-controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 32px;
  margin-top: -12px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: url("assets/game-ui/circle-green.png") center / contain no-repeat;
}
.demo-controls input[type="range"]::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: url("assets/game-ui/circle-green.png") center / contain no-repeat;
}
.demo-controls input[type="range"]:focus-visible {
  outline: 3px solid #067ba4;
  outline-offset: 3px;
}
.origins-dot span,
.origins-dot[aria-current="true"] span,
.origins-dot:hover span { background: var(--game-button-green); }

.origins-rotation,
.origins-rotation:hover {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: url("assets/game-ui/circle-green.png") center / contain no-repeat;
  color: #fff;
  box-shadow: none;
}
.origins-rotation:hover { filter: brightness(1.08); }
.origins-rotation:focus-visible {
  outline: 3px solid #067ba4;
  outline-offset: 2px;
}

@media (min-width: 761px) and (max-width: 1050px) {
  .choice-selector { padding-inline: 0; gap: 2px; }
}

@media (max-width: 760px) {
  /* Expose the copy's children to the grid so the photo follows the title. */
  .hero { row-gap: 24px; }
  .hero-copy { display: contents; }
  .hero #hero-title { grid-row: 1; }
  .hero .hero-visual { grid-row: 2; padding-top: 0; }
  .hero .hero-description { margin: 0; }
}

@media (max-width: 480px) {
  .choice-selector { padding-inline: 2px; }
  .choice-description { padding-inline: 10px; }
  .contact-form-wrap { padding: 28px 24px; }
  .contact-form-wrap .form-submit { white-space: normal; }
  .origins-carousel-controls { padding-inline: 0; gap: 3px; }
  .origins-carousel-dots { gap: 0; }
  .origins-dot { width: 20px; }
  .origins-prev { left: 4px; }
  .origins-next { right: 4px; }
}


/* Show the unchanged game cross without its transparent source margins. */
#privacy-dialog .dialog-close {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: url("assets/game-ui/cross-red.png") -14px -23px / 72px 90px no-repeat;
  box-shadow: none;
}
#privacy-dialog .dialog-close:hover { filter: brightness(1.08); }
#privacy-dialog .dialog-close:focus-visible {
  outline: 3px solid #067ba4;
  outline-offset: 3px;
}