/* Game-native UI pass. Artwork is exported losslessly from the user's game assets. */
:root {
  --dr-ground: #04191e;
  --dr-surface: #07363b;
  --dr-deep: #031115;
  --dr-ink: #edead5;
  --dr-muted: #bed0c5;
  --dr-gold: #e6c975;
  --dr-energy: #53ded5;
  --color-black: #031115;
  --color-white: #edead5;
  --color-blue-50: #e3e7d8;
  --color-blue-75: #d6e5dc;
  --color-blue-100: #f1efdf;
  --color-violet-50: #edead5;
  --color-violet-300: #08272c;
  --color-yellow-300: #e6c975;
  --color-gray-400: #bed0c5;
  color-scheme: dark;
}
html, body { background: var(--dr-ground); color: var(--dr-ink); scrollbar-color: #39716d var(--dr-deep); }
::selection { background: var(--dr-gold); color: var(--dr-deep); }
a:focus-visible, button:focus-visible { outline-color: var(--dr-energy); }
header nav a { color: var(--dr-ink); }
header nav a:hover { color: var(--dr-gold); }
header nav a[aria-label="DIMENSION RANGER home"] { color: var(--dr-gold); }
#hero { background: var(--dr-surface); }
#hero .hero-heading { color: var(--dr-ink); }
#hero > .hero-heading { color: var(--dr-gold); }
#hero .font-general { color: var(--dr-gold); }

/* Authored in-game button plates, kept at their intended horizontal proportions. */
.dr-game-button {
  min-height: 52px;
  padding: 14px 30px;
  border: 0;
  border-radius: 0;
  background-color: transparent !important;
  background-image: url('/dr/ui/button-cyan.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #c0fff1 !important;
  transition: transform 160ms cubic-bezier(.16,1,.3,1), filter 160ms ease, opacity 160ms ease;
  overflow: visible;
  isolation: isolate;
}
.dr-game-button[data-tone="gold"] { background-image: url('/dr/ui/button-gold.webp'); color: #fff0b6 !important; }
.dr-game-button .font-general { color: inherit !important; letter-spacing: .025em; font-size: 12px; font-weight: 700; }
.dr-game-button:hover { opacity: 1; filter: brightness(1.18); transform: translateY(-1px); }
.dr-game-button:active { transform: translateY(0) scale(.97); }
.dr-game-button:focus-visible { outline: 2px solid var(--dr-energy); outline-offset: 4px; }
header .dr-game-button { min-height: 44px; padding: 11px 25px; }

/* This is the Nova hover window: the content is now a close-up of the real portal VFX. */
#hero .dr-world-preview { overflow: visible; border: 0; }
#hero .dr-world-button {
  isolation: isolate;
  border-radius: 4px;
  background: var(--dr-deep);
  overflow: visible;
  transition: opacity 230ms ease, scale 420ms cubic-bezier(.16,1,.3,1), filter 180ms ease;
}
#hero .dr-world-button video { width: 100%; height: 100%; scale: 1; object-fit: cover; border-radius: 4px; }
#hero .dr-world-button::after {
  content: '';
  position: absolute;
  inset: -9px;
  border: 15px solid transparent;
  border-image: url('/dr/ui/corners-cyan.webp') 105 / 24px / 0 stretch;
  pointer-events: none;
}
#hero .dr-world-button:active { filter: brightness(1.2); }
#hero .dr-world-preview:focus-within .dr-world-button { opacity: 1; scale: 1; }

#about { background: var(--dr-surface); color: var(--dr-ink); }
#about .animated-title { color: var(--dr-ink) !important; }
#about > div:first-child > .font-general { color: var(--dr-gold); }
#about .about-subtext p + p { color: var(--dr-muted); }
#about .about-image { background: #03010f; }
#cards { background: var(--dr-deep); }
#cards .opacity-70 { opacity: 1; color: var(--dr-muted); }
#cards .border-hsla { border-color: #31514b; }
#cards article { border-radius: 5px; }
#cards article > div.absolute { background: linear-gradient(180deg,rgba(1,15,20,.9),rgba(1,15,20,.32) 46%,rgba(1,15,20,.04)); }
#cards article p { color: var(--dr-ink); }
#modes > .bento-tilt_1:first-child { border: 0; }
#modes > .bento-tilt_1:first-child::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border: 20px solid transparent;
  border-image: url('/dr/ui/corners-gold.webp') 90 / 30px / 0 stretch;
}
#modes .bento-tilt_2 > a {
  background-color: var(--dr-surface) !important;
  background-image: url('/dr/ui/panel-teal.webp');
  background-size: cover;
  color: var(--dr-gold) !important;
}
#modes .bento-tilt_2 > a .bento-title { color: var(--dr-gold); }

#story { background: var(--dr-deep); color: var(--dr-ink); }
#story p { color: var(--dr-muted); }
#story > div > p { color: var(--dr-energy); }
#contact { color: var(--dr-ink); }
#contact > div { background-color: var(--dr-surface); border-radius: 5px; }
#contact > div::after {
  content: ''; position: absolute; inset: 12px; z-index: 3; pointer-events: none;
  border: 20px solid transparent;
  border-image: url('/dr/ui/corners-gold.webp') 90 / 34px / 0 stretch;
}

#contact .dr-contact-copy > .special-font { color: var(--dr-ink); }
#contact .font-general { color: var(--dr-gold); }
footer { background: #062b30; color: var(--dr-muted); padding-block: 26px !important; }
footer strong { color: var(--dr-gold); }
footer a { text-underline-offset: 4px; }
footer a:hover { color: var(--dr-gold); }
@media (max-width:767px) {
  .dr-game-button { min-height: 48px; padding: 12px 25px; }
  #hero .dr-world-preview { top: 68%; }
  #hero .dr-world-button { opacity: .92; scale: .58; }
  #hero .dr-world-button::after { inset: -6px; }
  
  #contact > div::after { inset: 7px; border-image-width: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .dr-game-button, #hero .dr-world-button { transition: none; }
  .dr-game-button:hover, .dr-game-button:active { transform: none; }
}