:root {
  --regnum2-panel: rgba(7, 10, 15, 0.92);
  --regnum2-border: rgba(118, 157, 205, 0.16);
}

html {
  min-height: 100%;
  background: #05080d;
}

body {
  min-height: 100%;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(1, 5, 10, 0.12) 0, rgba(2, 7, 13, 0.38) 520px, #05080d 1150px),
    url("../images/regnum2-background-hd-v2.png") center top / cover fixed no-repeat !important;
}

#r2-cinematic-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #05080d;
  isolation: isolate;
  contain: strict;
}

#r2-cinematic-scene .r2-backdrop {
  position: absolute;
  inset: -3%;
  background:
    linear-gradient(180deg, rgba(1, 5, 10, 0.12) 0%, rgba(2, 7, 13, 0.12) 48%, rgba(3, 7, 12, 0.72) 100%),
    url("../images/regnum2-background-hd-v2.png") center top / cover no-repeat;
  transform: scale(1.055);
  transform-origin: 50% 42%;
  animation: regnum2-camera-breath 18s ease-in-out infinite alternate;
}

#r2-cinematic-scene .r2-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 35%, transparent 22%, rgba(0, 0, 0, 0.08) 58%, rgba(0, 0, 0, 0.68) 115%),
    linear-gradient(180deg, rgba(1, 4, 8, 0.18), transparent 30%, transparent 72%, rgba(3, 6, 10, 0.7));
}

#r2-cinematic-scene .r2-fire-glow,
#r2-cinematic-scene .r2-fog,
#r2-embers {
  display: none;
}

.wrapper,
.wrap {
  position: relative;
  z-index: 2;
}

.header {
  position: relative;
  height: 449px;
}

/* Live markup: .logo-header > a > img.logo */
.logo-header {
  position: absolute !important;
  top: 54px !important;
  left: 50% !important;
  z-index: 20;
  width: min(760px, 78vw);
  height: 330px;
  transform: translateX(-50%);
}

.logo-header > a {
  display: block !important;
  width: 100%;
  height: 100%;
  background: url("../images/regnum2-logo.png") center / contain no-repeat !important;
  filter:
    drop-shadow(0 18px 26px rgba(0, 0, 0, 0.92))
    drop-shadow(0 0 22px rgba(116, 160, 218, 0.2));
  animation: regnum2-logo-float 6.8s ease-in-out infinite;
}

.logo-header > a > img.logo {
  display: none !important;
}

.top-panel {
  background: rgba(5, 8, 13, 0.88) !important;
  border-bottom: 1px solid var(--regnum2-border);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);
}

.container {
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.7),
    0 0 0 1px var(--regnum2-border);
}

.left-sidebar,
.right-sidebar,
.content {
  background-color: var(--regnum2-panel) !important;
}

@keyframes regnum2-logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes regnum2-camera-breath {
  0% { transform: translate3d(-5px, -2px, 0) scale(1.055); }
  100% { transform: translate3d(5px, 2px, 0) scale(1.072); }
}

@media (max-width: 1250px) {
  .wrapper,
  .wrap {
    width: 100%;
  }
}

@media (max-width: 780px) {
  body {
    background-position: center top !important;
    background-attachment: scroll !important;
  }

  .header {
    height: 330px;
  }

  .logo-header {
    top: 65px !important;
    width: 92vw;
    height: 235px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-header > a,
  #r2-cinematic-scene .r2-backdrop {
    animation: none !important;
  }
}