/* FourU Theme Images v1 */

:root {
  --fouru-theme-overlay-dark: rgba(2, 6, 18, 0.54);
  --fouru-theme-overlay-soft: rgba(255, 255, 255, 0.08);
  --fouru-theme-card-bg: rgba(8, 14, 30, 0.62);
  --fouru-theme-border: rgba(255, 255, 255, 0.16);
}

.fouru-theme-bg {
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  isolation: isolate;
}

.fouru-theme-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 35%, var(--fouru-theme-overlay-soft), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,0.18), var(--fouru-theme-overlay-dark));
  pointer-events: none;
}

.fouru-theme-bg::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 20%, rgba(66, 214, 255, 0.16), transparent 30%),
    radial-gradient(circle at 20% 80%, rgba(168, 85, 247, 0.14), transparent 28%),
    radial-gradient(circle at 80% 75%, rgba(251, 191, 36, 0.10), transparent 26%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.fouru-theme-panel {
  background: var(--fouru-theme-card-bg);
  border: 1px solid var(--fouru-theme-border);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(22px);
}

.theme-01-bright-global-portal {
  background-image: url("/assets/themes/theme-01-bright-global-portal-bright-adjusted-web.jpg");
}

.theme-02-cosmic-portal {
  background-image: url("/assets/themes/theme-02-cosmic-portal-bright-adjusted-web.jpg");
}

.theme-03-dark-silver-portal {
  background-image: url("/assets/themes/theme-03-dark-silver-portal-bright-adjusted-web.jpg");
}

.theme-04-purple-portal {
  background-image: url("/assets/themes/theme-04-purple-portal-bright-adjusted-web.jpg");
}

.theme-05-gold-portal {
  background-image: url("/assets/themes/theme-05-gold-portal-bright-adjusted-web.jpg");
}

.theme-06-blue-portal {
  background-image: url("/assets/themes/theme-06-blue-portal-bright-adjusted-web.jpg");
}

.theme-07-black-white-portal {
  background-image: url("/assets/themes/theme-07-black-white-portal-bright-adjusted-web.jpg");
}

.theme-08-mono-silver-portal {
  background-image: url("/assets/themes/theme-08-mono-silver-portal-bright-adjusted-web.jpg");
}

.theme-09-fantasy-jungle-portal {
  background-image: url("/assets/themes/theme-09-fantasy-jungle-portal-bright-adjusted-web.jpg");
}