/*
 * NRO Forest immersive presentation layer.
 * Decorative only: no route, control, form, or application-state behavior lives here.
 */

:root {
  --ambient-bg-deep: #07152f;
  --ambient-bg-base: #0b2049;
  --ambient-bg-elevated: #142d62;
  --ambient-surface-subtle: rgba(19, 42, 91, 0.4);
  --ambient-surface: rgba(17, 37, 80, 0.6);
  --ambient-surface-strong: rgba(13, 30, 68, 0.76);
  --ambient-surface-solid: #142f63;
  --ambient-border: rgba(190, 211, 255, 0.2);
  --ambient-border-strong: rgba(167, 139, 250, 0.46);
  --ambient-highlight: rgba(255, 255, 255, 0.13);
  --ambient-text: #f8fbff;
  --ambient-text-muted: #cad8ee;
  --ambient-gold: #ffd166;
  --ambient-orange: #f97316;
  --ambient-green: #4ade80;
  --ambient-violet: #a78bfa;
  --ambient-focus: #a5f3fc;
  --ambient-radius-sm: 10px;
  --ambient-radius: 16px;
  --ambient-radius-lg: 20px;
  --ambient-blur: 16px;
  --ambient-shadow-sm: 0 12px 30px rgba(2, 8, 28, 0.22);
  --ambient-shadow: 0 22px 58px rgba(2, 8, 28, 0.3);
  --ambient-shadow-hover: 0 26px 66px rgba(2, 8, 28, 0.34), 0 0 30px rgba(124, 58, 237, 0.14);
  --ambient-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ambient-fast: 180ms;
  --ambient-normal: 240ms;
  --ambient-layer-background: 0;
  --ambient-layer-effect: 1;
  --ambient-layer-woven: 2;
  --ambient-layer-content: 10;
  --ambient-layer-header: 1200;
  --ambient-layer-menu: 1300;
  --ambient-layer-overlay: 2000;
}

html {
  color-scheme: dark;
  background: var(--ambient-bg-base);
}

body.girlkun-bg,
body.ambient-page {
  position: relative;
  min-height: 100dvh;
  overflow-x: clip;
  color: var(--ambient-text);
  background: linear-gradient(180deg, #081a36 0%, #0d2350 45%, #101942 100%) !important;
}

/* The script inserts this isolated reverse-energy layer as the first body child. */
.ambient-scene {
  display: block;
  position: fixed;
  inset: 0;
  z-index: var(--ambient-layer-effect);
  width: 100%;
  height: 100%;
  overflow: hidden;
  contain: strict;
  pointer-events: none !important;
  user-select: none;
}

.ambient-scene::before,
.ambient-scene::after {
  content: none;
  display: none;
}

.ambient-shapes-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.82;
  mix-blend-mode: screen;
  pointer-events: none !important;
}

#page-wrapper,
.game-footer,
.ambient-page > main,
.ambient-page > .page {
  position: relative;
  z-index: var(--ambient-layer-content);
}

.game-header {
  z-index: var(--ambient-layer-header) !important;
  border-bottom: 1px solid var(--ambient-border) !important;
  background:
    linear-gradient(180deg, rgba(10, 29, 66, 0.82), rgba(12, 25, 62, 0.67)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  box-shadow: 0 12px 36px rgba(2, 8, 28, 0.24), inset 0 -1px 0 rgba(255, 255, 255, 0.055) !important;
}

.game-header.scrolled {
  border-bottom-color: var(--ambient-border-strong) !important;
  background:
    linear-gradient(180deg, rgba(10, 29, 66, 0.92), rgba(12, 25, 62, 0.84)) !important;
  box-shadow: 0 16px 44px rgba(2, 8, 28, 0.34), 0 0 30px rgba(124, 58, 237, 0.12) !important;
}

/* Keep the desktop brand, primary navigation, and account actions in three
   balanced zones without changing the existing header markup or behavior. */
@media (min-width: 1101px) {
  .game-header .header-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: clamp(16px, 1.6vw, 24px);
  }

  .game-header .header-logo {
    justify-self: start;
  }

  .game-header .nav-links {
    width: max-content;
    max-width: 100%;
    justify-self: center;
  }

  .game-header .header-actions {
    min-width: 0;
    justify-self: end;
  }

  .game-header .hamburger {
    display: none;
  }
}

.nav-links a,
.header-auth-button,
.user-panel,
.hamburger,
.portal-action,
.portal-rank-list a,
.mobile-nav-overlay a,
.news-list-nav a,
.news-nav a,
.ambient-page .nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-color: var(--ambient-border) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  backdrop-filter: blur(10px) saturate(125%);
  box-shadow: inset 0 1px 0 var(--ambient-highlight), 0 5px 16px rgba(2, 8, 28, 0.14) !important;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.header-auth-button:hover,
.portal-action:hover,
.portal-action:focus-visible,
.portal-rank-list a:hover,
.portal-rank-list a:focus-visible,
.mobile-nav-overlay a:hover,
.mobile-nav-overlay a:focus-visible,
.news-list-nav a:hover,
.news-nav a:hover,
.ambient-page .nav a:hover {
  border-color: rgba(255, 209, 102, 0.42) !important;
  background: rgba(249, 115, 22, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 9px 22px rgba(0, 0, 0, 0.22) !important;
}

.user-dropdown-menu,
.mobile-nav-overlay,
.modal-content,
.swal2-popup {
  z-index: var(--ambient-layer-menu);
  border: 1px solid var(--ambient-border-strong) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(249, 115, 22, 0.1), transparent 34%),
    var(--ambient-surface-strong) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow: var(--ambient-shadow), inset 0 1px 0 var(--ambient-highlight) !important;
}

.modal,
.swal2-container,
.toast-container,
#toast-container {
  z-index: var(--ambient-layer-overlay) !important;
}

.mobile-nav-overlay {
  background:
    radial-gradient(circle at 50% 0%, rgba(249, 115, 22, 0.13), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(74, 222, 128, 0.08), transparent 36%),
    rgba(9, 24, 56, 0.92) !important;
}

/* Three opacity levels keep dense content readable while preserving depth. */
.download-card,
.guide-card,
.social-card,
.action-card,
.portal-card,
.manga-slider,
.manga-frame,
.manga-guide-card,
.feature-game-card,
.card,
.auth-card,
.gift-exchange-card,
.bxh-card,
.atm-card,
.atm-hero,
.ruby-exchange-panel,
.ibox-content,
.platform-card,
.review-card,
.event-method,
.event-fact-card,
.event-leaderboard,
.event-rank-card {
  border: 1px solid var(--ambient-border) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    var(--ambient-surface) !important;
  -webkit-backdrop-filter: blur(var(--ambient-blur)) saturate(130%);
  backdrop-filter: blur(var(--ambient-blur)) saturate(130%);
  box-shadow: var(--ambient-shadow-sm), inset 0 1px 0 var(--ambient-highlight) !important;
}

.manga-news-panel,
.atm-panel,
.atm-history-panel,
.profile-legacy-panel,
.history-panel,
.table-responsive,
.history-table-wrap,
.atm-table-wrap,
.napthe-table-wrap,
.news-list-panel,
.news-row,
.article,
.article-content,
.event-section,
.event-social-links {
  border-color: var(--ambient-border) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    var(--ambient-surface-strong) !important;
  -webkit-backdrop-filter: blur(var(--ambient-blur)) saturate(125%);
  backdrop-filter: blur(var(--ambient-blur)) saturate(125%);
  box-shadow: var(--ambient-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

/* Broad standalone-page sections use only a light tint; dense inner panels keep their surfaces. */
.ambient-page .section {
  border-color: rgba(190, 211, 255, 0.12) !important;
  background:
    linear-gradient(145deg, rgba(96, 165, 250, 0.055), rgba(139, 92, 246, 0.07)),
    rgba(18, 55, 113, 0.16) !important;
  -webkit-backdrop-filter: blur(6px) saturate(112%);
  backdrop-filter: blur(6px) saturate(112%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

/* Full-width homepage wrappers stay clear over the clean page gradient. */
body.girlkun-bg .portal-main > :is(
  .quick-access-section,
  .download-section,
  .news-section,
  .slider-section,
  .guide-section,
  .community-section
) {
  background: transparent !important;
  border-block-color: transparent;
  box-shadow: none;
}

body.girlkun-bg .manga-shell {
  background:
    linear-gradient(135deg, rgba(167, 139, 250, 0.42), rgba(96, 165, 250, 0.22)),
    rgba(12, 31, 70, 0.34) !important;
  filter: drop-shadow(0 22px 42px rgba(2, 8, 28, 0.24));
}

body.girlkun-bg .manga-frame {
  background:
    radial-gradient(circle at 12% 0%, rgba(96, 165, 250, 0.13), transparent 36%),
    radial-gradient(circle at 88% 8%, rgba(167, 139, 250, 0.13), transparent 34%),
    var(--ambient-surface) !important;
}

.download-card:hover,
.guide-card:hover,
.social-card:hover,
.action-card:hover,
.portal-card:hover,
.feature-game-card:hover,
.platform-card:hover,
.review-card:hover,
.news-row:hover {
  border-color: var(--ambient-border-strong) !important;
  box-shadow: var(--ambient-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.game-footer,
.ambient-page .topbar,
.news-list-topbar,
.news-topbar {
  border-color: var(--ambient-border) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    rgba(11, 29, 65, 0.64) !important;
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  box-shadow: var(--ambient-shadow-sm), inset 0 1px 0 var(--ambient-highlight) !important;
}

.ambient-page .topbar,
.news-list-topbar,
.news-topbar {
  margin-top: 16px;
  padding: 12px clamp(14px, 2vw, 22px);
  border: 1px solid var(--ambient-border);
  border-radius: var(--ambient-radius);
}

.news-list-hero,
.ambient-page .hero {
  position: relative;
  overflow: hidden;
  margin-top: 18px;
  padding-inline: clamp(18px, 4vw, 42px) !important;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--ambient-radius-lg);
  background:
    radial-gradient(circle at 12% 0%, rgba(96, 165, 250, 0.16), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(167, 139, 250, 0.12), transparent 32%),
    var(--ambient-surface-subtle);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  backdrop-filter: blur(12px) saturate(125%);
  box-shadow: var(--ambient-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.btn,
.btn-game,
.btn-info1,
.btn-action,
.btn-download,
.header-auth-button,
.portal-action,
.auth-btn,
.gift-submit-btn,
.reload-btn,
.copy-btn,
.mobile-transfer-btn,
.bxh-tab,
.news-tab,
.manga-news-tab,
.manga-tab-more,
.feature-slider-arrow,
.news-search button,
.news-more,
.news-pagination button,
.article-btn,
.install,
.mini-btn,
.password-toggle {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background-color: rgba(255, 255, 255, 0.075);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  backdrop-filter: blur(10px) saturate(125%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 7px 22px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  touch-action: manipulation;
  transition:
    transform var(--ambient-fast) var(--ambient-ease),
    color var(--ambient-fast) ease,
    background-color var(--ambient-fast) ease,
    border-color var(--ambient-fast) ease,
    box-shadow var(--ambient-fast) ease,
    filter var(--ambient-fast) ease !important;
}

.btn-game-primary,
.btn-info1,
.btn-action,
.btn-download,
.btn-warning,
.auth-btn,
.gift-submit-btn,
.reload-btn,
.news-search button,
.news-more,
.article-btn,
.install,
.portal-action.primary,
.header-auth-button--login {
  border-color: rgba(255, 222, 159, 0.52) !important;
  color: #111827 !important;
  background:
    linear-gradient(135deg, rgba(249, 115, 22, 0.82), rgba(255, 179, 71, 0.78) 58%, rgba(255, 209, 102, 0.72)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 28px rgba(249, 115, 22, 0.22) !important;
}

.header-auth-button--register {
  border-color: rgba(196, 181, 253, 0.48) !important;
  color: #ffffff !important;
  background:
    linear-gradient(135deg, rgba(109, 40, 217, 0.8), rgba(139, 92, 246, 0.76) 60%, rgba(167, 139, 250, 0.7)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 26px rgba(109, 40, 217, 0.2) !important;
}

.btn-game-green,
.btn-success {
  border-color: rgba(134, 239, 172, 0.44) !important;
  color: #052e16 !important;
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.78), rgba(74, 222, 128, 0.72)) !important;
}

.btn-game-red,
.btn-danger {
  border-color: rgba(252, 165, 165, 0.42) !important;
  background: linear-gradient(135deg, rgba(185, 28, 28, 0.8), rgba(239, 68, 68, 0.72)) !important;
}

.btn:hover,
.btn-game:hover,
.btn-info1:hover,
.btn-action:hover,
.btn-download:hover,
.portal-action:hover,
.auth-btn:hover,
.gift-submit-btn:hover,
.reload-btn:hover,
.copy-btn:hover,
.mobile-transfer-btn:hover,
.bxh-tab:hover,
.news-tab:hover,
.manga-news-tab:hover,
.manga-tab-more:hover,
.feature-slider-arrow:hover,
.news-search button:hover,
.news-more:hover,
.news-pagination button:hover,
.article-btn:hover,
.install:hover,
.mini-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.btn:active,
.btn-game:active,
.btn-info1:active,
.btn-action:active,
.portal-action:active,
.auth-btn:active,
.gift-submit-btn:active,
.copy-btn:active,
.bxh-tab:active,
.news-tab:active,
.manga-news-tab:active,
.manga-tab-more:active,
.feature-slider-arrow:active,
.article-btn:active,
.install:active,
.mini-btn:active {
  transform: translateY(0) scale(0.985);
}

.manga-news-tab.active,
.manga-news-tab:hover,
.manga-news-tab:focus-visible,
.feature-slider-arrow:hover,
.feature-slider-arrow:focus-visible {
  border-color: rgba(167, 139, 250, 0.55) !important;
  color: var(--ambient-text) !important;
  background: rgba(124, 58, 237, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 22px rgba(76, 29, 149, 0.2) !important;
}

.form-control,
.single-line,
.atm-amount-input,
.news-search input[type='search'],
body.girlkun-bg input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']),
body.girlkun-bg select,
body.girlkun-bg textarea,
body.ambient-page input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']),
body.ambient-page select,
body.ambient-page textarea {
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: var(--ambient-radius-sm) !important;
  color: var(--ambient-text) !important;
  background: rgba(9, 25, 58, 0.72) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

.form-control::placeholder,
.single-line::placeholder,
.news-search input[type='search']::placeholder,
body.girlkun-bg input::placeholder,
body.girlkun-bg textarea::placeholder,
body.ambient-page input::placeholder,
body.ambient-page textarea::placeholder {
  color: rgba(186, 198, 216, 0.68) !important;
  opacity: 1;
}

:where(body.girlkun-bg, body.ambient-page) :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ambient-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(34, 211, 238, 0.18) !important;
}

/* Legacy form rules use !important on outline:none; keep keyboard focus visible. */
body.girlkun-bg :is(input, select, textarea):focus-visible,
body.ambient-page :is(input, select, textarea):focus-visible {
  outline: 3px solid var(--ambient-focus) !important;
  outline-color: var(--ambient-focus) !important;
  outline-style: solid !important;
  outline-width: 3px !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(34, 211, 238, 0.18) !important;
}

:where(body.girlkun-bg, body.ambient-page) :where(button, input, select, textarea, .btn, .btn-game)[disabled],
:where(body.girlkun-bg, body.ambient-page) [aria-disabled='true'] {
  opacity: 0.48 !important;
  cursor: not-allowed !important;
  filter: saturate(0.6) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Opaque fallbacks keep content legible where backdrop-filter is unavailable. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .game-header,
  .game-footer,
  .user-dropdown-menu,
  .mobile-nav-overlay,
  .modal-content,
  .swal2-popup,
  .download-card,
  .guide-card,
  .social-card,
  .action-card,
  .portal-card,
  .card,
  .auth-card,
  .gift-exchange-card,
  .bxh-card,
  .atm-card,
  .atm-hero,
  .atm-panel,
  .atm-history-panel,
  .profile-legacy-panel,
  .history-panel,
  .ruby-exchange-panel,
  .news-list-panel,
  .news-row,
  .article {
    background-color: var(--ambient-surface-solid) !important;
  }
}

@media (max-width: 768px) {
  :root {
    --ambient-blur: 10px;
    --ambient-shadow: 0 16px 44px rgba(0, 0, 0, 0.34);
  }

  .ambient-shapes-canvas {
    opacity: 0.7;
  }

  .game-header,
  .game-footer,
  .user-dropdown-menu,
  .mobile-nav-overlay,
  .modal-content,
  .download-card,
  .guide-card,
  .social-card,
  .action-card,
  .portal-card,
  .card,
  .auth-card,
  .news-list-panel,
  .news-row,
  .article {
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
  }

  .ambient-page .topbar,
  .news-list-topbar,
  .news-topbar {
    margin-top: 10px;
  }
}

@media (max-width: 430px) {
  .ambient-page .topbar,
  .news-list-topbar,
  .news-topbar {
    border-radius: 12px;
  }

  .news-list-hero,
  .ambient-page .hero {
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  .ambient-shapes-canvas {
    opacity: 0.55;
  }

  :where(body.girlkun-bg, body.ambient-page) *,
  :where(body.girlkun-bg, body.ambient-page) *::before,
  :where(body.girlkun-bg, body.ambient-page) *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Final control-level fallback: the legacy public form selectors carry multiple
   !important declarations, so the stable body hook gets an explicit ring. */
html body#cssweb.girlkun-bg input:focus-visible,
html body#cssweb.girlkun-bg select:focus-visible,
html body#cssweb.girlkun-bg textarea:focus-visible,
html body.ambient-page input:focus-visible,
html body.ambient-page select:focus-visible,
html body.ambient-page textarea:focus-visible,
html body.ambient-page .news-search input[type='search']:focus-visible {
  outline: 3px solid #a5f3fc !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(34, 211, 238, 0.18) !important;
}