/* ============================================================
   ORBISOJAS — Girl's Journey (her/)
   Per-page overrides on top of shared/css/journey.css
   Shared CSS ships the boy/seeker/builder/lover/sovereign sprites
   as defaults; this file overrides them with girl/queen.
   ============================================================ */

/* Per-scene .webp backgrounds — set directly on ::before with high-specificity
   selectors so they reliably win the cascade against shared rules. */
.scene[data-scene].scene-01::before { background-image: url('../img/scene-01.webp'); }
.scene[data-scene].scene-02.loaded::before { background-image: url('../img/scene-02.webp'); }
.scene[data-scene].scene-03.loaded::before { background-image: url('../img/scene-03.webp'); }
.scene[data-scene].scene-04.loaded::before { background-image: url('../img/scene-04.webp'); }

/* Stage selectors */
.jp-stage[data-stage="girl"] .jp-glow {
  box-shadow: 0 0 20px 5px rgba(122, 122, 120, 0.2);
}
.jp-stage[data-stage="queen"].lit .jp-glow {
  animation: sovereignGlow 2s ease-in-out infinite;
}

/* Pixel-art character sprite — girl */
.jp-char--girl {
  box-shadow:
    0px -24px 0 #3a2a2a, 4px -24px 0 #3a2a2a, -4px -24px 0 #3a2a2a,
    0px -20px 0 var(--cream), 4px -20px 0 var(--cream), -4px -20px 0 var(--cream),
    -8px -20px 0 #3a2a2a, 8px -20px 0 #3a2a2a,
    0px -16px 0 var(--cream), 4px -16px 0 var(--cream), -4px -16px 0 var(--cream),
    -8px -16px 0 #3a2a2a, 8px -16px 0 #3a2a2a,
    0px -12px 0 #c45e7a, 4px -12px 0 #c45e7a, -4px -12px 0 #c45e7a,
    -8px -12px 0 #3a2a2a, 8px -12px 0 #3a2a2a,
    0px -8px 0 #c45e7a, 4px -8px 0 #c45e7a, -4px -8px 0 #c45e7a,
    -4px -4px 0 #3a2a3a, 4px -4px 0 #3a2a3a, 0px -4px 0 #3a2a3a,
    -4px 0px 0 #2a2a44, 4px 0px 0 #2a2a44;
}

/* Pixel-art character sprite — queen (final stage) */
.jp-char--queen {
  box-shadow:
    0px -48px 0 var(--rose),
    -4px -44px 0 var(--amber), 4px -44px 0 var(--amber), 0px -44px 0 var(--amber),
    0px -40px 0 var(--amber), 4px -40px 0 var(--amber), -4px -40px 0 var(--amber),
    0px -36px 0 #3a2a2a, 4px -36px 0 #3a2a2a, -4px -36px 0 #3a2a2a,
    0px -32px 0 var(--cream), 4px -32px 0 var(--cream), -4px -32px 0 var(--cream),
    -8px -32px 0 #3a2a2a, 8px -32px 0 #3a2a2a,
    0px -28px 0 var(--cream), 4px -28px 0 var(--cream), -4px -28px 0 var(--cream),
    -8px -28px 0 #3a2a2a, 8px -28px 0 #3a2a2a,
    0px -24px 0 var(--rose), 4px -24px 0 var(--rose), -4px -24px 0 var(--rose), 8px -24px 0 #8a3a4a, -8px -24px 0 #8a3a4a,
    0px -20px 0 var(--rose), 4px -20px 0 var(--rose), -4px -20px 0 var(--rose), 8px -20px 0 #8a3a4a, -8px -20px 0 #8a3a4a,
    0px -16px 0 #8a3a4a, 4px -16px 0 #8a3a4a, -4px -16px 0 #8a3a4a,
    -4px -12px 0 #6a2a3a, 4px -12px 0 #6a2a3a, 0px -12px 0 #6a2a3a,
    -4px -8px 0 #6a2a3a, 4px -8px 0 #6a2a3a,
    -4px -4px 0 #4a3a2a, 4px -4px 0 #4a3a2a,
    -4px 0px 0 #4a3a2a, 4px 0px 0 #4a3a2a;
}