/* =============================================================================
   SGXP Consolidated Themes - All themes in one file using CSS custom properties
   ============================================================================= */

/* Default theme (can be overridden by specific themes) */
:root {
  --page-bg: #000000;
  --bg-color: #1D1D20;
  --page-color: #393e43;
  --font-color: #F2F6F7;
  --border-color: #27272a;
  --box-shadow: 1px 1px 0px color-mix(in srgb, var(--page-color) 20%, black), 2px 2px 0px color-mix(in srgb, var(--page-color) 20%, black), 3px 3px 0px color-mix(in srgb, var(--page-color) 20%, black), 4px 4px 0px color-mix(in srgb, var(--page-color) 20%, black), 5px 5px 0px color-mix(in srgb, var(--page-color) 20%, black), 6px 6px 0px color-mix(in srgb, var(--page-color) 20%, black), 7px 7px 0px color-mix(in srgb, var(--page-color) 20%, black) !important;
  --transition-speed: 0s;
  --font-link-color: rgba(244, 188, 84, 1);
}

/* =============================================================================
   DOOMSDAY ZONE THEME (style_v7)
   ============================================================================= */
:root[data-theme="style_v7"] {
  --page-bg: #000000;
  --page-color: #393e43;
  --font-color: #F2F6F7;
  --border-color: #27272a;
  --font-link-color: rgba(244, 188, 84, 1);
}

:root[data-theme="style_v7"] body {
  background-color: var(--page-bg);
  /* Scenery: src/components/ThemeBackdrop.astro + src/lib/themeBackdrops.ts */
}

@media (max-width: 800px) {
  :root[data-theme="style_v7"] body {
    background-color: var(--bg-color);
    background-image: none;
  }
}

/* =============================================================================
   SPACE COLONY ARK THEME (ark)
   ============================================================================= */
:root[data-theme="ark"] {
  --page-bg: #000000;
  --page-color: #2b3730;
  --font-color: #F2F6F7;
  --border-color: #27272a;
  --font-link-color: #ffa8a8;
  --zoom: 1;
  --zoom2: 3;
}

:root[data-theme="ark"] body {
  background-color: var(--page-bg);
  /* Scenery: src/components/ThemeBackdrop.astro + src/lib/themeBackdrops.ts */
}

@keyframes sonicZoomIn {
  0% {
    background-size: 
      /* sonic */ calc(52px * var(--zoom)),
      /* interior */ calc(2042px * var(--zoom)),
      /* world 7 */ auto,
      /* world 6 */ auto,
      /* world 5 */ auto,
      /* world 4 */ auto,
      /* world 3 */ auto,
      /* world 2 */ auto,
      /* world 1 */ auto,
      /* stars 2 */ auto,
      /* stars 1 */ auto;
    background-position:
      /* sonic */ left 46px bottom 74px,
      /* interior */ left 0px bottom 0px,
      /* world 7 */ left 0px bottom 200px,
      /* world 6 */ left 0px bottom 192px,
      /* world 5 */ left 0px bottom 184px,
      /* world 4 */ left 0px bottom 168px,
      /* world 3 */ left 0px bottom 144px,
      /* world 2 */ left 0px bottom 96px,
      /* world 1 */ left 0px bottom 0px,
      /* stars 2 */ 0 0,
      /* stars 1 */ 0 0;
  }
  100% {
    background-size: 
      /* sonic */ calc(52px * var(--zoom2)),
      /* interior */ calc(2042px * var(--zoom2)),
      /* world 7 */ auto,
      /* world 6 */ auto,
      /* world 5 */ auto,
      /* world 4 */ auto,
      /* world 3 */ auto,
      /* world 2 */ auto,
      /* world 1 */ auto,
      /* stars 2 */ auto,
      /* stars 1 */ auto;
    background-position:
      /* sonic */ left 46px bottom 74px,
      /* interior */ left -85px bottom -148px,
      /*world 7*/ left 200px bottom 200px, 
      /*world 6*/ left 300px bottom 192px, 
      /*world 5*/ left 400px bottom 184px, 
      /*world 4*/ left 500px bottom 168px,
      /*world 3*/ left 600px bottom 144px, 
      /*world 2*/ left 800px bottom 96px, 
      /*world 1*/ left 1000px bottom 0px, 
      /* stars 2 */ 0 0,
      /* stars 1 */ 0 0;
  }
}

:root[data-theme="ark"] .zoom-to-sonic {
  animation: sonicZoomIn 10s forwards;
  animation-delay: 0s;
}

:root[data-theme="ark"] body.zoom-to-sonic {
  animation: sonicZoomIn 10s forwards;
  animation-delay: 0s;
}

:root[data-theme="ark"] .sonic-trigger {
  position: fixed;
  width: 52px;
  height: 86px;
  bottom: 74px;
  left: 46px;
  z-index: 1000;
  cursor: pointer;
}

:root[data-theme="ark"] .sonic-trigger:hover {
  cursor: url('/img/Sonic_Cursor_Spin.gif'), progress;
  animation-name: cursor;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

:root[data-theme="ark"] .final-image {
  position: fixed;
  bottom: 250px;
  left: 325px;
  transform: translate(-50%, -50%);
  max-width: 80%;
  max-height: 80%;
  z-index: 2000;
  opacity: 0;
  animation: fadeIn 2s forwards;
}

:root[data-theme="ark"] .typing-text {
  position: fixed;
  bottom: 310px;
  left: 325px;
  transform: translateX(-50%);
  font-family: 'typing';
  font-size: 32px;
  color: black;
  z-index: 2001;
  white-space: pre-wrap;
  text-align: center;
  opacity: 0;
  animation: fadeIn 2s forwards 2s;
  text-shadow: none;
  line-height: 20px;
}

:root[data-theme="ark"] .shadow-image {
  position: fixed;
  top: 40px;
  left: 800px;
  height: auto;
  z-index: 1001;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

:root[data-theme="ark"] .shadow-image.fade-in {
  opacity: .5;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media (max-width: 800px) {
  :root[data-theme="ark"] body {
    background-color: var(--bg-color);
    background-image: none;
  }
}

/* =============================================================================
   CHRISTMAS THEME (snow)
   ============================================================================= */
:root[data-theme="snow"] {
  --page-bg: #203f78;
  --page-color: #203f78;
  --font-color: #c0daee;
  --border-color: #27272a;
  --font-link-color: rgb(255, 252, 173);
}

:root[data-theme="snow"] body {
  background-color: var(--page-bg);
  /* Scenery: src/components/ThemeBackdrop.astro + src/lib/themeBackdrops.ts */
}

/* =============================================================================
   FIRESIDE THEME (cozy)
   ============================================================================= */
:root[data-theme="cozy"] {
  --border-color: #000500;
  --page-color: #7a3114;
  --font-color: #ffea9e;
  --font-link-color: #57d866;
  --font-link-hover: #ff6b6b;
}

:root[data-theme="cozy"] body {
  background-color: #230e0e;
  /* Scenery: src/components/ThemeBackdrop.astro + src/lib/themeBackdrops.ts */
}

/* =============================================================================
   BATTLE NETWORK THEME (sbn)
   ============================================================================= */
:root[data-theme="sbn"] {
  --border-color: #000500;
  --page-color: #004e6b;
  --font-color: #f0f0f0;
  --font-link-color: #9cffc1;
  --font-link-hover: #004058;
}

:root[data-theme="sbn"] body {
  background-color: #242424;
  /* Scenery: src/components/ThemeBackdrop.astro + src/lib/themeBackdrops.ts */
}

/* =============================================================================
   HIDDEN PALACE ZONE THEME (hpz)
   ============================================================================= */
:root[data-theme="hpz"] {
  --page-bg: #242424;
  --border-color: #000500;
  --page-color: #24486C;
  --font-color: #c6ffe4;
  --font-link-color: #ffcb6b;
  --font-link-hover: #799cff;
}

:root[data-theme="hpz"] body {
  background-color: var(--page-bg);
  /* Scenery: src/components/ThemeBackdrop.astro + src/lib/themeBackdrops.ts */
}

/* =============================================================================
   MFZ THEME (mfz)
   ============================================================================= */
:root[data-theme="mfz"] {
  --border-color: #000500;
  --page-color: #00271F;
  --font-color: #18ff5d;
  --font-link-color: #ff7e29;
  --font-link-hover: #ff6b6b;
}

:root[data-theme="mfz"] body {
  background-color: black;
  /* Scenery: src/components/ThemeBackdrop.astro + src/lib/themeBackdrops.ts */
}

/* =============================================================================
   SKY SANCTUARY ZONE THEME (ssz)
   ============================================================================= */
:root[data-theme="ssz"] {
  --page-bg: #2448fc;
  --border-color: #000500;
  --page-color: #1f1f3f;
  --font-color: #f1f1ff;
  --font-link-color: #fdf075;
  --font-link-hover: #ff3b55;
}

:root[data-theme="ssz"] body {
  background-color: var(--page-bg);
  /* Scenery: src/components/ThemeBackdrop.astro + src/lib/themeBackdrops.ts */
}

/* =============================================================================
   MOBILE STYLES - All themes
   Removes animated backgrounds on mobile and uses a solid darker background
   ============================================================================= */
@media (max-width: 768px) {
  /* Default/base mobile background */
  body {
    background-color: color-mix(in srgb, var(--page-color) 70%, black) !important;
    background-image: none !important;
    animation: none !important;
  }

  /* Each theme's mobile override */
  :root[data-theme="style_v7"] body,
  :root[data-theme="ark"] body,
  :root[data-theme="snow"] body,
  :root[data-theme="cozy"] body,
  :root[data-theme="sbn"] body,
  :root[data-theme="hpz"] body,
  :root[data-theme="mfz"] body,
  :root[data-theme="ssz"] body {
    background-color: color-mix(in srgb, var(--page-color) 70%, black) !important;
    background-image: none !important;
    animation: none !important;
  }
}