:root{
  --base: 56px;
  --pixel-render: pixelated;
  --interp-ms: nearest-neighbor;
}

.cosmetics-rainbow-bg {
  background: linear-gradient(
    135deg,
    rgb(68, 19, 19),
    rgb(54, 39, 12),
    rgb(71, 71, 17),
    rgb(16, 46, 16),
    rgb(11, 43, 43),
    rgb(14, 14, 44),
    rgb(51, 20, 51)
  );
  min-height: fit-content;
}
.cosmetics-pride-btn {
  background: linear-gradient(
    0deg,
    #f28c8c, /* gentle red */
    #f2b47f, /* gentle orange */
    #f2ea7f, /* gentle yellow */
    #b9dcb6, /* gentle green */
    #b6dfe3, /* gentle cyan */
    #b6c6ee, /* gentle blue */
    #d9b6e3, /* gentle violet */
    #f28c8c,
    #f2b47f,
    #f2ea7f,
    #b9dcb6,
    #b6dfe3,
    #b6c6ee,
    #d9b6e3
  );
  background-size: 300% 300%;
  animation: prideBtnShift 60s infinite;
  
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.8),
    0 0 20px rgba(255, 255, 255, 0.6);
}




@keyframes prideBtnShift {
  0% {
    background-position: 50% 0%;
  }
  50% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 50% 0%;
  }
}

.cosmetics-purple-btn {
  background: violet;
}

.cosmetics-orange-btn {
  background: orange;
}

.cosmetics-kanto::before,
.cosmetics-johto::before,
.cosmetics-hoenn::before,
.cosmetics-sinnoh::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: repeat;
  background-size: auto;
  filter: blur(3px);
  z-index: -1;
}

.cosmetics-kanto::before {
  background-image: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/kanto_edited.webp");
}

.cosmetics-johto::before {
  background-image: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/johto_edited.webp");
}

.cosmetics-hoenn::before {
  background-image: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/hoenn_edited.webp");
}

.cosmetics-sinnoh::before {
  background-image: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/sinnoh_edited.webp");
}


.cosmetics-venimous {
    position: relative;
    border: none;
    background: #af0cf5;
    padding: 14px 26px;
    border-radius: 8px;
    font-weight: bold;
    transform-style: preserve-3d;
    transition: transform 0.3s cubic-bezier(0, 0, 0.58, 1),
        background 0.3s cubic-bezier(0, 0, 0.58, 1);
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #fff;
    /*** full width block ***/
    /* width: 100%; */
}

.cosmetics-venimous:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #b200ff;
    border-radius: inherit;
    transform: translate3d(0, 0.5em, -1em);
    transition: transform 0.3s cubic-bezier(0, 0, 0.58, 1);
}

.cosmetics-venimous:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    filter: blur(4px);
    border-radius: inherit;
    top: 0;
    left: 0;
    transform: translate3d(0, .7em, -1em);
    transition: transform 0.3s cubic-bezier(0, 0, 0.58, 1);
}

.cosmetics-venimous:hover {
    transform: translateY(-0.25em);
}

.cosmetics-venimous:active {
    transform: translate(0, 0.5em);
}

.cosmetics-venimous:active:before,
.cosmetics-venimous:active:after {
    transform: translate3d(0, 0, -1em);
}

.nuit-etoilee {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 20% 20%, #1b2b4a 0, #050814 60%, #000000 100%);
  color: #f5f7ff;
  font-family: system-ui;
  position: relative;
  overflow-x: hidden;
}

/* Lune */
.nuit-etoilee .n11 {
  content: "";
  position: fixed;
  top: 20%;
  right: 10%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff 0, #f5f5f5 30%, #dcdcdc 60%, #b0b0b0 100%);
  box-shadow: 0 0 40px rgba(255,255,255,0.7), 0 0 120px rgba(255,255,255,0.35);
  z-index: -3;
}

/* Étoiles */
.nuit-etoilee::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.8) 0, transparent 50%),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,0.7) 0, transparent 50%),
    radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,0.9) 0, transparent 50%),
    radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,0.6) 0, transparent 50%),
    radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,0.75) 0, transparent 50%);
  opacity: 0.9;
  z-index: -4;
}

/* Nuages via .deco */
.nuit-etoilee .deco {
  position: fixed;
  background: rgba(255,255,255,0.35);
  border-radius: 40px;
  filter: blur(2px);
  animation: nuage-nuit 45s linear infinite;
  z-index: -2; /* devant la lune */
}

/* tailles + positions + vitesses */
.nuit-etoilee .n1 { width: 180px; height: 60px; top: 25%; left: -200px; animation-duration: 55s; }
.nuit-etoilee .n2 { width: 260px; height: 80px; top: 40%; left: -300px; animation-duration: 70s; }
.nuit-etoilee .n3 { width: 120px; height: 45px; top: 60%; left: 100%; animation-direction: reverse; animation-duration: 50s; }
.nuit-etoilee .n4 { width: 200px; height: 70px; top: 75%; left: -250px; animation-duration: 65s; }

/* Animation */
@keyframes nuage-nuit {
  from { transform: translateX(0); }
  to { transform: translateX(140vw); }
}

.nuit-etoilee .deco-secondary.n12 {
  position: fixed;
  inset: 0;
  pointer-events: none;

  /* un petit groupe d'étoiles */
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;

  z-index: -3;

  box-shadow:
    50vw 20vh 2px 2px white,
    10vw 70vh 2px 2px rgba(255,255,255,0.8),
    80vw 40vh 2px 2px rgba(255,255,255,0.9),
    30vw 10vh 2px 2px rgba(255,255,255,0.7),
    60vw 80vh 2px 2px rgba(255,255,255,0.85),
    /* étoiles blanches */
    10vw 20vh 2px 2px rgba(255,255,255,0.9),
    25vw 35vh 2px 2px rgba(255,255,255,0.8),
    40vw 10vh 2px 2px rgba(255,255,255,1),
    55vw 50vh 2px 2px rgba(255,255,255,0.85),
    70vw 25vh 2px 2px rgba(255,255,255,0.9),
    85vw 40vh 2px 2px rgba(255,255,255,0.75),
    15vw 70vh 2px 2px rgba(255,255,255,0.8),
    30vw 80vh 2px 2px rgba(255,255,255,0.95),
    45vw 60vh 2px 2px rgba(255,255,255,0.7),
    60vw 75vh 2px 2px rgba(255,255,255,0.9),
    75vw 15vh 2px 2px rgba(255,255,255,0.85),
    90vw 55vh 2px 2px rgba(255,255,255,0.8),
    20vw 45vh 2px 2px rgba(255,255,255,0.9),
    35vw 25vh 2px 2px rgba(255,255,255,0.7),
    50vw 80vh 2px 2px rgba(255,255,255,0.9),
    65vw 5vh  2px 2px rgba(255,255,255,0.8),

    /* étoiles vert clair */
    50vw 70vh 2px 2px #01ce2e;

  animation: scintille 2.5s infinite ease-in-out alternate;
}

@keyframes scintille {
  from {
    opacity: 0.4;
    filter: brightness(0.6);
  }
  to {
    opacity: 1;
    filter: brightness(1.4);
  }
}


.crepuscule {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 120%, #3b1b3f 0, #1a0f26 40%, #05040b 80%),
    linear-gradient(to top, #1a0f26 0, #3b1b3f 40%, #f26b3f 70%, #ffd27a 100%);
  background-blend-mode: screen, normal;
  color: #fff7f0;
  font-family: system-ui;
  position: relative;
  overflow-x: hidden;
}

/* Soleil */
.crepuscule .n12 {
  content: "";
  position: fixed;
  bottom: 0%;
  right: 0%;
  transform: translateX(-50%), translateY(50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff7c2 0, #ffd27a 35%, #f26b3f 70%, #c53b2f 100%);
  box-shadow: 0 0 60px rgba(255,210,122,0.9), 0 0 160px rgba(242,107,63,0.6);
  z-index: -3;
}

/* Nuages via .deco */
.crepuscule .deco {
  position: fixed;
  background: rgba(255,255,255,0.55);
  border-radius: 40px;
  filter: blur(3px);
  animation: nuage-crepuscule 45s linear infinite;
  z-index: -2; /* devant le soleil */
}

/* tailles + positions + vitesses */
.crepuscule .n1 { width: 200px; height: 70px; top: 20%; left: -250px; animation-duration: 60s; }
.crepuscule .n2 { width: 300px; height: 90px; top: 35%; left: 100%; animation-direction: reverse; animation-duration: 75s; }
.crepuscule .n3 { width: 150px; height: 50px; top: 55%; left: -200px; animation-duration: 50s; }
.crepuscule .n4 { width: 240px; height: 80px; top: 70%; left: 100%; animation-direction: reverse; animation-duration: 65s; }

/* Animation */
@keyframes nuage-crepuscule {
  from { transform: translateX(0); }
  to { transform: translateX(140vw); }
}

.ocean-depth {
  margin: 0;
  min-height: 100vh !important;
background:
    radial-gradient(circle at 50% 120%, #001f33 0%, #001427 40%, #000a18 75%, #000510 100%),
    linear-gradient(to top, #000510 0%, #001427 40%, #003b5c 70%, #4fb3d9 100%);
    background-blend-mode: screen, normal;
}

.ocean-depth-buttons {
    position: relative;
    border: none;
    background: #100cf5;
    padding: 14px 26px;
    border-radius: 8px;
    font-weight: bold;
    transform-style: preserve-3d;
    transition: transform 0.3s cubic-bezier(0, 0, 0.58, 1),
        background 0.3s cubic-bezier(0, 0, 0.58, 1);
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #fff;
    /*** full width block ***/
    /* width: 100%; */
}

.ocean-depth-buttons:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1100ff;
    border-radius: inherit;
    transform: translate3d(0, 0.5em, -1em);
    transition: transform 0.3s cubic-bezier(0, 0, 0.58, 1);
}

.ocean-depth-buttons:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    filter: blur(4px);
    border-radius: inherit;
    top: 0;
    left: 0;
    transform: translate3d(0, .7em, -1em);
    transition: transform 0.3s cubic-bezier(0, 0, 0.58, 1);
}

.ocean-depth-buttons:hover {
    transform: translateY(-0.25em);
}

.ocean-depth-buttons:active {
    transform: translate(0, 0.5em);
}

.ocean-depth-buttons:active:before,
.ocean-depth-buttons:active:after {
    transform: translate3d(0, 0, -1em);
}


.game-firered,
.game-leafgreen,
.game-yellow,
.game-silver,
.game-gold,
.game-cristal,
.game-sapphire,
.game-ruby,
.game-diamond,
.game-pearl,
.game-white,
.game-black {
  background-repeat: no-repeat;
  background-position: right bottom;
  background-attachment: fixed;
  background-size:auto;
}

.game-firered {
  background-image: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/pokemons_games/firered.webp");
  background-color: #ef8429;
}

.game-leafgreen {
  background-image: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/pokemons_games/leafgreen.webp");
  background-color: #21b59c;
}

.game-yellow {
  background-image: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/pokemons_games/yellow.webp");
  background-color: #f7ad29;
}

.game-silver {
  background-image: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/pokemons_games/silver.webp");
  background-color: #f0f0f4;
}

.game-gold {
  background-image: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/pokemons_games/gold.webp");
  background-color: #ff421a;
}

.game-cristal {
  background-image: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/pokemons_games/cristal.webp");
  background-color: #c2a0dc;
}

.game-sapphire {
  background-image: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/pokemons_games/sapphire.webp");
  background-color: #00539e;
}

.game-ruby {
  background-image: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/pokemons_games/ruby.webp");
  background-color: #ff0040;
}

.game-diamond {
  background-image: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/pokemons_games/diamond.webp");
  background-color: #00539e;
}

.game-pearl {
  background-image: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/pokemons_games/pearl.webp");
  background-color: #cd7aa7;
}

.game-white {
  background-image: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/pokemons_games/white.webp");
  background-color: #bfc5c3;
}

.game-black {
  background-image: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/pokemons_games/black.webp");
  background-color: #5f6568;
}

/* Common strat container rules (applied only when body has .strat-... class) */
[class^="strat-"]{
  position:relative;
  overflow:hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  image-rendering: var(--pixel-render);
  -ms-interpolation-mode: var(--interp-ms);
  font-family: system-ui, sans-serif;
}

/* Generic deco layer rules (shared by all strat-* classes) */
[class^="strat-"] .deco{
  position:absolute;
  inset:0;
  pointer-events:none;
  will-change: transform, opacity;
}

/* Generic pseudo-element rules */
[class^="strat-"] .deco::before,
[class^="strat-"] .deco::after{
  content:"";
  position:absolute;
  display:block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
  image-rendering: var(--pixel-render);
  -ms-interpolation-mode: var(--interp-ms);
  will-change: transform, opacity;
  pointer-events:none;
}

/* Map images via CSS variables per strat class.
   Each strat-Xg block only defines variables; the generic selectors below use them.
   Replace 1G..6G in the URLs per class. */

/* ---------- STRAT 1G variables ---------- */
.strat-1g{
  --bg: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/1G/main.png");
  --i1: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/1G/image1.png");
  --i2: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/1G/image2.png");
  --i3: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/1G/image3.png");
  --i4: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/1G/image4.png");
  --i5: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/1G/image5.png");
  --i6: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/1G/image6.png");
  --i7: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/1G/image7.png");
  --i8: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/1G/image8.png");
  --i9: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/1G/image9.png");
  --i10: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/1G/image10.png");
  --i11: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/1G/image11.png");
  --i12: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/1G/image12.png");
  background-image: var(--bg);
}

/* ---------- STRAT 2G variables ---------- */
.strat-2g{
  --bg: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/2G/main.png");
  --i1: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/2G/image1.png");
  --i2: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/2G/image2.png");
  --i3: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/2G/image3.png");
  --i4: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/2G/image4.png");
  --i5: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/2G/image5.png");
  --i6: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/2G/image6.png");
  --i7: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/2G/image7.png");
  --i8: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/2G/image8.png");
  --i9: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/2G/image9.png");
  --i10: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/2G/image10.png");
  --i11: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/2G/image11.png");
  --i12: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/2G/image12.png");
  background-image: var(--bg);
}

/* ---------- STRAT 3G variables ---------- */
.strat-3g{
  --bg: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/3G/main.png");
  --i1: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/3G/image1.png");
  --i2: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/3G/image2.png");
  --i3: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/3G/image3.png");
  --i4: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/3G/image4.png");
  --i5: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/3G/image5.png");
  --i6: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/3G/image6.png");
  --i7: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/3G/image7.png");
  --i8: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/3G/image8.png");
  --i9: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/3G/image9.png");
  --i10: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/3G/image10.png");
  --i11: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/3G/image11.png");
  --i12: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/3G/image12.png");
  background-image: var(--bg);
}

/* ---------- STRAT 4G variables ---------- */
.strat-4g{
  --bg: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/4G/main.png");
  --i1: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/4G/image1.png");
  --i2: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/4G/image2.png");
  --i3: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/4G/image3.png");
  --i4: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/4G/image4.png");
  --i5: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/4G/image5.png");
  --i6: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/4G/image6.png");
  --i7: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/4G/image7.png");
  --i8: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/4G/image8.png");
  --i9: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/4G/image9.png");
  --i10: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/4G/image10.png");
  --i11: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/4G/image11.png");
  --i12: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/4G/image12.png");
  background-image: var(--bg);
}

/* ---------- STRAT 5G variables ---------- */
.strat-5g{
  --bg: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/5G/main.png");
  --i1: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/5G/image1.png");
  --i2: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/5G/image2.png");
  --i3: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/5G/image3.png");
  --i4: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/5G/image4.png");
  --i5: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/5G/image5.png");
  --i6: url("https://raw.githubusercontent.comMythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/5G/image6.png");
  --i7: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/5G/image7.png");
  --i8: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/5G/image8.png");
  --i9: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/5G/image9.png");
  --i10: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/5G/image10.png");
  --i11: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/5G/image11.png");
  --i12: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/5G/image12.png");
  background-image: var(--bg);
}

/* ---------- STRAT 6G variables ---------- */
.strat-6g{
  --bg: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/6G/main.png");
  --i1: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/6G/image1.png");
  --i2: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/6G/image2.png");
  --i3: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/6G/image3.png");
  --i4: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/6G/image4.png");
  --i5: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/6G/image5.png");
  --i6: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/6G/image6.png");
  --i7: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/6G/image7.png");
  --i8: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/6G/image8.png");
  --i9: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/6G/image9.png");
  --i10: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/6G/image10.png");
  --i11: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/6G/image11.png");
  --i12: url("https://raw.githubusercontent.com/MythMega/mythmega.github.io.assets/refs/heads/master/assets/pokefeet/background/parts_strat/6G/image12.png");
  background-image: var(--bg);
}

/* ---------- Generic mapping of variables to deco layers ---------- */
/* deco.n1 uses i1 / i2 / i3 */
[class^="strat-"] .deco.n1{
  z-index:2;
  background-image: var(--i1);
  background-repeat:no-repeat;
  background-position: 8% 18%;
  background-size: calc(var(--base) * 3) calc(var(--base) * 3);
  animation: move-right-slow 48s linear infinite;
}
[class^="strat-"] .deco.n1::before{
  background-image: var(--i2);
  width: calc(var(--base) * 2.5); height: calc(var(--base) * 2.5);
  left: -18%; top: 6%;
  animation: move-down-slower 62s linear infinite;
}
[class^="strat-"] .deco.n1::after{
  background-image: var(--i3);
  width: calc(var(--base) * 1.6); height: calc(var(--base) * 1.6);
  right: -10%; bottom: 4%;
  animation: move-left 30s linear infinite;
}

/* deco.n2 uses i4 / i5 / i6 */
[class^="strat-"] .deco.n2{
  z-index:3;
  background-image: var(--i4);
  background-repeat:no-repeat;
  background-position: 82% 28%;
  background-size: calc(var(--base) * 3.2) calc(var(--base) * 3.2);
  animation: move-left-slow 52s linear infinite;
}
[class^="strat-"] .deco.n2::before{
  background-image: var(--i5);
  width: calc(var(--base) * 2); height: calc(var(--base) * 2);
  left: 6%; top: 60%;
  animation: move-up 34s linear infinite;
}
[class^="strat-"] .deco.n2::after{
  background-image: var(--i6);
  width: calc(var(--base) * 3.6); height: calc(var(--base) * 3.6);
  right: 14%; bottom: 38%;
  opacity:0.9;
  animation: move-diag-slow 72s linear infinite;
}

/* deco.n3 uses i7 / i8 / i9 */
[class^="strat-"] .deco.n3{
  z-index:1;
  background-image: var(--i7);
  background-repeat:no-repeat;
  background-position: 38% 78%;
  background-size: calc(var(--base) * 2.5) calc(var(--base) * 2.5);
  animation: move-up-slower 58s linear infinite;
}
[class^="strat-"] .deco.n3::before{
  background-image: var(--i8);
  width: calc(var(--base) * 1.6); height: calc(var(--base) * 1.6);
  left: 30%; top: -16%;
  animation: move-right 28s linear infinite;
}
[class^="strat-"] .deco.n3::after{
  background-image: var(--i9);
  width: calc(var(--base) * 4.6); height: calc(var(--base) * 4.6);
  right: -24%; bottom: -12%;
  opacity:0.85;
  animation: move-diag-slower 84s linear infinite;
}

/* deco.n4 uses i10 / i11 / i12 */
[class^="strat-"] .deco.n4{
  z-index:4;
  background-image: var(--i10);
  background-repeat:no-repeat;
  background-position: 60% 10%;
  background-size: calc(var(--base) * 3.6) calc(var(--base) * 3.6);
  animation: move-diag 40s linear infinite;
}
[class^="strat-"] .deco.n4::before{
  background-image: var(--i11);
  width: calc(var(--base) * 1.3); height: calc(var(--base) * 1.3);
  left: 50%; top: 30%;
  animation: move-left 24s linear infinite;
}
[class^="strat-"] .deco.n4::after{
  background-image: var(--i12);
  width: calc(var(--base) * 2.5); height: calc(var(--base) * 2.5);
  right: 40%; bottom: 20%;
  animation: move-up 36s linear infinite;
}

/* ---------- Keyframes (shared) ---------- */
@keyframes move-right { 0%{transform:translate3d(-40vw,0,0)} 100%{transform:translate3d(140vw,0,0)} }
@keyframes move-left  { 0%{transform:translate3d(140vw,0,0)} 100%{transform:translate3d(-40vw,0,0)} }
@keyframes move-down  { 0%{transform:translate3d(0,-40vh,0)} 100%{transform:translate3d(0,140vh,0)} }
@keyframes move-up    { 0%{transform:translate3d(0,140vh,0)} 100%{transform:translate3d(0,-40vh,0)} }
@keyframes move-diag  { 0%{transform:translate3d(-50vw,-30vh,0) rotate(0deg)} 100%{transform:translate3d(130vw,130vh,0) rotate(360deg)} }

@keyframes move-right-slow { 0%{transform:translate3d(-25vw,0,0)} 100%{transform:translate3d(120vw,0,0)} }
@keyframes move-left-slow  { 0%{transform:translate3d(120vw,0,0)} 100%{transform:translate3d(-25vw,0,0)} }
@keyframes move-up-slower  { 0%{transform:translate3d(0,120vh,0)} 100%{transform:translate3d(0,-25vh,0)} }
@keyframes move-down-slower{ 0%{transform:translate3d(0,-25vh,0)} 100%{transform:translate3d(0,120vh,0)} }
@keyframes move-diag-slower{ 0%{transform:translate3d(120vw,-30vh,0) rotate(0deg)} 100%{transform:translate3d(-40vw,130vh,0) rotate(-360deg)} }

/* ---------- Responsive adjustments ---------- */
@media (max-width:700px){
  :root{ --base:44px; }
  [class^="strat-"] .deco.n1{ background-size: calc(var(--base)*2.6) calc(var(--base)*2.6); }
  [class^="strat-"] .deco.n2{ background-size: calc(var(--base)*2.8) calc(var(--base)*2.8); }
  [class^="strat-"] .deco.n3{ background-size: calc(var(--base)*2.2) calc(var(--base)*2.2); }
  [class^="strat-"] .deco.n4{ background-size: calc(var(--base)*2.8) calc(var(--base)*2.8); }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce){
  [class^="strat-"] .deco, [class^="strat-"] .deco::before, [class^="strat-"] .deco::after { animation: none !important; }
}