/* ── SKY ── */
#env-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #070311 0%,
    #0D0820 30%,
    #150F30 55%,
    #160e18 75%,
    #120e1a 100%
  );
  z-index: 0;
}

/* ── AURORA ── */
#env-aurora {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 45%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

#env-aurora::before {
  content: '';
  position: absolute;
  top: 5%;
  left: -20%;
  width: 80%;
  height: 60%;
  background: radial-gradient(ellipse at center,
    rgba(24, 190, 168, 0.12) 0%,
    rgba(107, 63, 191, 0.08) 40%,
    transparent 70%
  );
  border-radius: 50%;
  animation: aurora-drift 18s ease-in-out infinite alternate;
  filter: blur(2vw);
}

#env-aurora::after {
  content: '';
  position: absolute;
  top: 10%;
  right: -10%;
  width: 60%;
  height: 50%;
  background: radial-gradient(ellipse at center,
    rgba(107, 63, 191, 0.1) 0%,
    rgba(24, 190, 168, 0.06) 40%,
    transparent 70%
  );
  border-radius: 50%;
  animation: aurora-drift 24s ease-in-out infinite alternate-reverse;
  filter: blur(2.5vw);
}

@keyframes aurora-drift {
  0%   { transform: translateX(0) scaleY(1); opacity: 0.7; }
  50%  { transform: translateX(8%) scaleY(1.2); opacity: 1; }
  100% { transform: translateX(-5%) scaleY(0.9); opacity: 0.6; }
}

/* ── STARS ── */
#env-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55%;
  z-index: 2;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 8% 12%, rgba(237,230,250,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 6%, rgba(197,174,237,0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 23% 18%, rgba(240,184,74,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 31% 9%, rgba(237,230,250,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 4%, rgba(197,174,237,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 54% 14%, rgba(237,230,250,0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 63% 7%, rgba(93,222,206,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 71% 19%, rgba(237,230,250,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 79% 5%, rgba(197,174,237,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 87% 13%, rgba(240,184,74,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 93% 8%, rgba(237,230,250,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 28%, rgba(197,174,237,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 35%, rgba(237,230,250,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 47% 31%, rgba(93,222,206,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 38%, rgba(237,230,250,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 29%, rgba(197,174,237,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 96% 42%, rgba(237,230,250,0.4) 0%, transparent 100%);
}

/* ── FAR TREELINE ── */
#env-treeline-far {
  position: absolute;
  bottom: 18%;
  left: 0;
  width: 100%;
  height: 28%;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 3% 18% at 3% 100%, #0a1a0a 0%, transparent 100%),
    radial-gradient(ellipse 4% 22% at 7% 100%, #0a1a0a 0%, transparent 100%),
    radial-gradient(ellipse 3% 16% at 11% 100%, #0a1a0a 0%, transparent 100%),
    radial-gradient(ellipse 5% 25% at 15% 100%, #0c1c0c 0%, transparent 100%),
    radial-gradient(ellipse 3% 19% at 19% 100%, #0a1a0a 0%, transparent 100%),
    radial-gradient(ellipse 4% 21% at 23% 100%, #0c1c0c 0%, transparent 100%),
    radial-gradient(ellipse 3% 17% at 27% 100%, #0a1a0a 0%, transparent 100%),
    radial-gradient(ellipse 5% 24% at 32% 100%, #0c1c0c 0%, transparent 100%),
    radial-gradient(ellipse 3% 18% at 37% 100%, #0a1a0a 0%, transparent 100%),
    radial-gradient(ellipse 4% 22% at 42% 100%, #0c1c0c 0%, transparent 100%),
    radial-gradient(ellipse 3% 16% at 47% 100%, #0a1a0a 0%, transparent 100%),
    radial-gradient(ellipse 5% 26% at 52% 100%, #0c1c0c 0%, transparent 100%),
    radial-gradient(ellipse 3% 19% at 57% 100%, #0a1a0a 0%, transparent 100%),
    radial-gradient(ellipse 4% 21% at 62% 100%, #0c1c0c 0%, transparent 100%),
    radial-gradient(ellipse 3% 17% at 67% 100%, #0a1a0a 0%, transparent 100%),
    radial-gradient(ellipse 5% 23% at 72% 100%, #0c1c0c 0%, transparent 100%),
    radial-gradient(ellipse 3% 18% at 77% 100%, #0a1a0a 0%, transparent 100%),
    radial-gradient(ellipse 4% 22% at 82% 100%, #0c1c0c 0%, transparent 100%),
    radial-gradient(ellipse 3% 16% at 87% 100%, #0a1a0a 0%, transparent 100%),
    radial-gradient(ellipse 5% 25% at 92% 100%, #0c1c0c 0%, transparent 100%),
    radial-gradient(ellipse 3% 19% at 97% 100%, #0a1a0a 0%, transparent 100%);
}

/* ── NEAR TREELINE ── */
#env-treeline-near {
  position: absolute;
  bottom: 12%;
  left: 0;
  width: 100%;
  height: 22%;
  z-index: 5;
  pointer-events: none;
}

#env-treeline-near svg {
  width: 100%;
  height: 100%;
}

/* ── GRASS ── */
#env-grass {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}

#env-grass::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #1a3a1a 0%,
    #142a14 40%,
    #0e1e0e 100%
  );
}

#env-grass::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 3px,
    rgba(30, 60, 20, 0.4) 3px,
    rgba(30, 60, 20, 0.4) 4px
  );
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 100%);
}

/* ── MANA PARTICLES ── */
#env-particles {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  overflow: hidden;
}

.mana-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: particle-float linear infinite;
}

@keyframes particle-float {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-30vh) translateX(var(--drift)) scale(0.5); opacity: 0; }
}

/* ── TOMES ── */
.env-tome {
  position: absolute;
  z-index: 8;
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 0.5vh 1.5vh rgba(107, 63, 191, 0.4));
}

.env-tome:hover {
  transform: translateY(-1vh) rotate(-2deg) scale(1.08);
  filter: drop-shadow(0 1vh 2.5vh rgba(24, 190, 168, 0.5));
}

#tome-lore {
  bottom: 14%;
  left: 4%;
  transform: rotate(-8deg);
}

#tome-devlog {
  bottom: 13%;
  right: 5%;
  transform: rotate(6deg);
}

#tome-codex {
  bottom: 15%;
  left: 10%;
  transform: rotate(4deg);
}

.tome-cover {
  width: 5vw;
  height: 7vw;
  min-width: 40px;
  min-height: 56px;
  background: linear-gradient(135deg, #2A1A08 0%, #3D2510 50%, #1e1005 100%);
  border: 0.2vw solid #D4922A;
  border-radius: 0.3vw 0.8vw 0.8vw 0.3vw;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow:
    inset -0.3vw 0 0.5vw rgba(0,0,0,0.5),
    0.2vw 0 0.8vw rgba(212, 146, 42, 0.2);
}

.tome-cover::before {
  content: '';
  position: absolute;
  left: 0.4vw;
  top: 0.4vw;
  bottom: 0.4vw;
  width: 0.15vw;
  background: rgba(212, 146, 42, 0.4);
  border-radius: 1px;
}

.tome-cover::after {
  content: '';
  position: absolute;
  inset: 0.3vw;
  border: 0.1vw solid rgba(212, 146, 42, 0.2);
  border-radius: 0.2vw 0.6vw 0.6vw 0.2vw;
}

.tome-title {
  font-family: 'Cinzel', serif;
  font-size: 0.7vw;
  color: #D4922A;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  padding: 0.3vw 0;
}

/* ── TOME OVERLAY ── */
#tome-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(7, 3, 17, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  backdrop-filter: blur(0.3vw);
}

#tome-overlay.open {
  opacity: 1;
  visibility: visible;
}

#tome-modal {
  width: min(55vw, 55vh);
  max-height: 70vh;
  background: #F5ECD7;
  border: 0.2vw solid #D4922A;
  border-radius: 0.4vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 4vw rgba(212, 146, 42, 0.3),
    0 0 1vw rgba(0,0,0,0.8);
}

#tome-modal-header {
  background: linear-gradient(135deg, #2A1A08, #3D2510);
  padding: 1.5% 2%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.15vw solid #D4922A;
}

#tome-modal-title {
  font-family: 'Cinzel', serif;
  font-size: 1.4vw;
  color: #D4922A;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

#tome-modal-close {
  font-size: 1.2vw;
  color: #D4922A;
  cursor: pointer;
  padding: 0.3vw 0.5vw;
  transition: color 0.2s;
}

#tome-modal-close:hover { color: #F0B84A; }

#tome-modal-body {
  padding: 3%;
  overflow-y: auto;
  flex: 1;
}

#tome-modal-text {
  font-family: 'EB Garamond', serif;
  font-size: 1.2vw;
  color: #2A1A55;
  line-height: 1.8;
  font-style: italic;
  white-space: pre-wrap;
}

/* ── GRASS BLADES ANIMATION ── */
.grass-blade {
  position: absolute;
  bottom: 0;
  width: 0.15vw;
  background: linear-gradient(180deg, #3a6a2a 0%, #1a3a1a 100%);
  transform-origin: bottom center;
  animation: sway linear infinite;
  border-radius: 0.1vw 0.1vw 0 0;
}

@keyframes sway {
  0%   { transform: rotate(var(--lean)) skewX(0deg); }
  25%  { transform: rotate(calc(var(--lean) + 3deg)) skewX(1deg); }
  75%  { transform: rotate(calc(var(--lean) - 3deg)) skewX(-1deg); }
  100% { transform: rotate(var(--lean)) skewX(0deg); }
}