:root {
  --bg: #071015;
  --panel: rgba(5, 16, 24, 0.58);
  --line: rgba(117, 230, 255, 0.24);
  --text: #edf7f9;
  --muted: rgba(232, 240, 244, 0.84);
  --teal: #85f4ff;
  --violet: #c29cff;
  --gold: #e3c98a;
  --gold-soft: rgba(227, 201, 138, 0.32);
  --shadow: 0 24px 54px rgba(0, 0, 0, 0.42);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
  overflow: hidden;
}
button { font: inherit; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.site {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: #04090d;
}
.forest-bg,
.shade,
.mist,
.grain,
.fireflies,
.song-visualizer {
  position: absolute;
  inset: 0;
}
.forest-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96) brightness(0.8);
}
.shade {
  background:
    radial-gradient(circle at 50% 38%, rgba(128, 244, 255, 0.18), transparent 28%),
    radial-gradient(circle at 50% 58%, rgba(178, 137, 255, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(2, 7, 12, 0.22), rgba(2, 7, 12, 0.54));
}
.mist { pointer-events: none; opacity: 0.34; mix-blend-mode: screen; }
.mist-a {
  background:
    radial-gradient(circle at 28% 45%, rgba(133, 252, 255, 0.14), transparent 28%),
    radial-gradient(circle at 68% 48%, rgba(194, 150, 255, 0.08), transparent 26%);
  animation: driftA 24s ease-in-out infinite alternate;
}
.mist-b {
  background:
    radial-gradient(circle at 58% 62%, rgba(151, 255, 247, 0.1), transparent 28%),
    radial-gradient(circle at 38% 36%, rgba(234, 215, 144, 0.07), transparent 24%);
  animation: driftB 30s ease-in-out infinite alternate;
}
.grain {
  opacity: 0.08;
  background-image: radial-gradient(rgba(255,255,255,0.9) 0.45px, transparent 0.55px);
  background-size: 4px 4px;
  mix-blend-mode: soft-light;
}
.fireflies, .song-visualizer, .ritual-lines, .ritual-particles { pointer-events: none; }
.song-visualizer { opacity: 0; transition: opacity .45s ease; z-index: 5; }
body.playing .song-visualizer { opacity: 1; }

.side-character,
.side-sheep {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 28px 28px rgba(0,0,0,.4));
}
.side-character {
  left: -2vw;
  bottom: -1vh;
  width: min(35vw, 610px);
  height: min(95vh, 1080px);
}
.side-sheep {
  right: -1vw;
  bottom: -2vh;
  width: min(28vw, 470px);
  height: min(72vh, 700px);
}
.side-character img,
.side-sheep img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.character-body {
  z-index: 1;
  transform: translate(calc(var(--mx, 0px) * .7), calc(var(--my, 0px) * .7));
  animation: characterBreath 7s ease-in-out infinite;
  filter: saturate(.93) brightness(.88) contrast(1.04);
}
.character-foliage {
  z-index: 2;
  transform: translate(calc(var(--mx, 0px) * 1.05), calc(var(--my, 0px) * 1.03));
  animation: foliageDriftLeft 9s ease-in-out infinite;
  filter: saturate(.98) brightness(.86) contrast(1.04);
}
.sheep-body {
  z-index: 1;
  transform: translate(calc(var(--mx, 0px) * .65), calc(var(--my, 0px) * .6));
  animation: sheepFloat 6.5s ease-in-out infinite;
  filter: saturate(.94) brightness(.9) contrast(1.03);
}
.sheep-foliage {
  z-index: 2;
  transform: translate(calc(var(--mx, 0px) * 1.05), calc(var(--my, 0px) * 1.03));
  animation: foliageDriftRight 8.2s ease-in-out infinite;
  filter: saturate(.98) brightness(.86) contrast(1.04);
}

.starlight {
  position: absolute;
  right: clamp(16px, 2.4vw, 36px);
  top: clamp(14px, 2vw, 28px);
  z-index: 18;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: clamp(11px, 0.92vw, 16px);
  color: rgba(244, 228, 255, 0.9);
}
.starlight span { color: #d7b0ff; }

.hero,
.screen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 10;
  padding: clamp(16px, 2vw, 28px);
}
.hero-inner,
.screen-inner {
  width: min(100%, 1280px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-inner { gap: 12px; }
.rune-line {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  opacity: .95;
}
.rune-line span {
  display: block;
  width: clamp(70px, 10vw, 140px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(122,244,255,0.66), transparent);
}
.rune-line i {
  font-style: normal;
  color: #bca1ff;
  font-size: clamp(15px, 1vw, 19px);
  text-shadow: 0 0 16px rgba(188,161,255,.6);
}
.logo {
  width: min(52vw, 520px);
  max-height: 28vh;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(147,255,255,.16));
}
.tagline {
  margin: 0;
  font-size: clamp(30px, 2.8vw, 48px);
  font-weight: 600;
  letter-spacing: .04em;
  text-shadow: 0 4px 16px rgba(0,0,0,.45);
}
.subtag {
  margin: 0;
  font-size: clamp(15px, 1.06vw, 19px);
  max-width: 760px;
  color: var(--muted);
  line-height: 1.55;
}
.hero-actions,
.screen-actions {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 1vw, 20px);
  flex-wrap: wrap;
  margin-top: 4px;
}
.image-action {
  position: relative;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease, opacity .2s ease;
}
.image-action img {
  display: block;
  width: min(34vw, 440px);
  height: auto;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.36));
}
.image-action:hover:not(:disabled),
.image-action:focus-visible:not(:disabled) {
  transform: translateY(-2px) scale(1.015);
  filter: saturate(1.08) brightness(1.04);
  outline: none;
}
.image-action.locked,
.image-action:disabled {
  opacity: .44;
  filter: grayscale(.18) brightness(.82);
  cursor: not-allowed;
}
.image-action.locked img,
.image-action:disabled img { filter: drop-shadow(0 10px 18px rgba(0,0,0,.22)); }
.action-awaken.ready { animation: actionPulse 2.2s ease-in-out infinite; }
.screen-cta { z-index: 2; }
.screen-cta img { width: min(40vw, 520px); }
.button-overlay-text { display: none; }
.status {
  margin: 4px 0 0;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(129,228,255,.18);
  background: rgba(5,14,22,.58);
  color: rgba(233,240,243,.92);
  font-size: clamp(12px, 1vw, 16px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.fallback-play {
  margin-top: 2px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(227, 201, 138, 0.26);
  background: linear-gradient(180deg, rgba(17,52,58,.88), rgba(7,18,24,.92));
  color: #f0f6f8;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.fallback-play:hover {
  transform: translateY(-2px);
  border-color: rgba(227, 201, 138, 0.44);
  box-shadow: 0 0 24px rgba(124,235,255,.16), 0 0 18px rgba(227,201,138,.12);
}

.screen {
  background: rgba(2, 9, 14, 0.86);
  backdrop-filter: blur(10px);
}
body.screen-open .hero-inner {
  opacity: 0.025;
  filter: blur(10px);
  transition: opacity .28s ease, filter .28s ease;
}
body.screen-open .hero .image-action,
body.screen-open .hero .fallback-play {
  pointer-events: none;
}
.screen[hidden] { display: none !important; }
.return-button {
  position: absolute;
  top: clamp(16px, 2vw, 28px);
  left: clamp(16px, 2vw, 28px);
  z-index: 15;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(118,235,255,.32);
  background: rgba(5, 16, 24, .72);
  color: #eef7fb;
  letter-spacing: .08em;
  font-size: clamp(12px, .95vw, 16px);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.return-button:hover { transform: translateY(-2px); border-color: rgba(193, 160, 255, .48); box-shadow: 0 0 22px rgba(129,228,255,.14); }
.screen-header h1 {
  margin: 0;
  font-size: clamp(34px, 3.5vw, 56px);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 10px 24px rgba(0,0,0,.34);
}
.ritual-header { gap: 8px; }
.ritual-title-image {
  display: flex;
  justify-content: center;
  width: 100%;
}
.ritual-title-image img {
  width: min(58vw, 620px);
  max-height: 12vh;
  object-fit: contain;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.34));
}
.screen-header p {
  margin: 8px 0 0;
  font-size: clamp(13px, .95vw, 17px);
  color: var(--muted);
  max-width: 860px;
  line-height: 1.45;
  padding: 0 14px;
}
.grimoire-inner { gap: 14px; }
.screen-actions { margin-top: 14px; }
.book-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.book-wrap img {
  width: auto;
  max-width: min(90vw, 1120px);
  max-height: min(58vh, 640px);
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.38));
}

.ritual-inner {
  width: min(100%, 1320px);
  gap: 8px;
  padding: 0 10px 18px;
}
.ritual-board {
  position: relative;
  width: min(66vmin, 720px);
  height: min(66vmin, 720px);
  margin: 8px auto 10px;
  overflow: visible;
}
.ritual-sigil,
.ritual-lines,
.ritual-particles {
  position: absolute;
  inset: 0;
}
.ritual-sigil {
  z-index: 0;
  inset: -14%;
  opacity: .985;
  background: url("assets/images/ritual-spell-circle-dark.png") center/contain no-repeat;
  filter: drop-shadow(0 0 22px rgba(0,0,0,.34)) drop-shadow(0 0 14px rgba(122,244,255,.10));
}
.ritual-lines { z-index: 2; }
.ritual-particles { z-index: 3; }
.rune {
  position: absolute;
  width: min(12.8vmin, 124px);
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: block;
  z-index: 10;
  --tx: -50%;
  --ty: -50%;
  --scale: 1;
  transform: translate(var(--tx), var(--ty)) scale(var(--scale));
  transition: transform .22s ease, filter .22s ease, opacity .22s ease;
}
.rune img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 12px rgba(193, 162, 106, .18));
}
.rune::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,219,144,.12), rgba(183,132,255,.05) 42%, rgba(0,0,0,0) 72%);
  filter: blur(6px);
  z-index: -1;
  opacity: .72;
  transition: opacity .22s ease, transform .22s ease;
}
.rune:hover,
.rune:focus-visible {
  --scale: 1.08;
  outline: none;
  filter: saturate(1.14) brightness(1.05);
}
.rune:hover img,
.rune:focus-visible img { filter: drop-shadow(0 0 28px rgba(228, 206, 130, .5)) drop-shadow(0 0 18px rgba(133, 248, 255, .2)); }
.rune:hover::before,
.rune:focus-visible::before { opacity: 1; transform: scale(1.1); }
.rune.active { --scale: 1.12; }
.rune.active img { filter: drop-shadow(0 0 28px rgba(255,232,128,.55)) drop-shadow(0 0 26px rgba(165,245,255,.26)); }
.rune.wrong img { filter: drop-shadow(0 0 22px rgba(255,100,118,.76)); }
.bind-rune { width: min(15.2vmin, 142px); z-index: 11; }
.bind-rune.ready img { filter: drop-shadow(0 0 42px rgba(255,224,140,.64)) drop-shadow(0 0 42px rgba(178,149,255,.38)); }

.progress-dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
  margin-bottom: 4px;
  flex-wrap: wrap;
  max-width: 480px;
  position: relative;
  z-index: 20;
}
.progress-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(125,242,255,.32);
  background: rgba(4,15,25,.46);
  box-shadow: inset 0 0 10px rgba(0,0,0,.25);
}
.progress-dots span.active {
  background: radial-gradient(circle at 30% 30%, #feffef, #f2d692 50%, #7de9ff 100%);
  box-shadow: 0 0 14px rgba(244,219,144,.5), 0 0 18px rgba(133,248,255,.2);
}
.magic-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  left: 0;
  top: 0;
  background: radial-gradient(circle, rgba(255,255,255,.92), rgba(158,252,255,.72) 52%, rgba(187,139,255,0) 78%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 30;
  animation: burst .9s ease-out forwards;
}

body.playing .tagline,
body.playing .subtag,
body.playing .status { text-shadow: 0 0 18px rgba(156,255,255,.14), 0 0 24px rgba(183,138,255,.08); }
body.playing .logo { filter: drop-shadow(0 0 16px rgba(134,251,255,.24)) drop-shadow(0 0 22px rgba(182,135,255,.14)); }

@keyframes driftA { from { transform: translate3d(-2%, -1%, 0) scale(1.02); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } }
@keyframes driftB { from { transform: translate3d(3%, 2%, 0) scale(1.02); } to { transform: translate3d(-3%, -1%, 0) scale(1.1); } }
@keyframes burst { to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.3); } }
@keyframes actionPulse { 0%,100% { filter: drop-shadow(0 0 0 rgba(0,0,0,0)); } 50% { filter: drop-shadow(0 0 20px rgba(120,245,255,.18)) drop-shadow(0 0 18px rgba(176,132,255,.14)); } }
@keyframes characterBreath { 0%,100% { transform: translate(calc(var(--mx,0px) * .7), calc(var(--my,0px) * .7)) translateY(0) rotate(0deg); } 50% { transform: translate(calc(var(--mx,0px) * .7), calc(var(--my,0px) * .7)) translateY(-9px) rotate(-.45deg); } }
@keyframes foliageDriftLeft { 0%,100% { transform: translate(calc(var(--mx,0px) * 1.05), calc(var(--my,0px) * 1.03)) translateY(0); } 50% { transform: translate(calc(var(--mx,0px) * 1.05), calc(var(--my,0px) * 1.03)) translateY(-10px); } }
@keyframes sheepFloat { 0%,100% { transform: translate(calc(var(--mx,0px) * .65), calc(var(--my,0px) * .6)) translateY(0); } 50% { transform: translate(calc(var(--mx,0px) * .65), calc(var(--my,0px) * .6)) translateY(-8px) rotate(1deg); } }
@keyframes foliageDriftRight { 0%,100% { transform: translate(calc(var(--mx,0px) * 1.05), calc(var(--my,0px) * 1.03)) translateY(0); } 50% { transform: translate(calc(var(--mx,0px) * 1.05), calc(var(--my,0px) * 1.03)) translateY(-10px); } }

@media (max-width: 1100px) {
  .side-character { width: min(40vw, 560px); }
  .side-sheep { width: min(30vw, 380px); height: 54vh; right: -2vw; bottom: 0; }
  .image-action img { width: min(42vw, 420px); }
  .book-wrap img { max-height: 60vh; }
}
@media (max-width: 780px) {
  .logo { width: min(74vw, 420px); max-height: 24vh; }
  .tagline { font-size: clamp(24px, 7vw, 38px); }
  .subtag { font-size: 14px; max-width: 92%; }
  .hero-actions, .screen-actions { flex-direction: column; align-items: center; }
  .image-action img, .screen-cta img { width: min(86vw, 420px); }
  .side-character { width: min(56vw, 360px); height: 62vh; left: -9vw; }
  .side-sheep { width: min(41vw, 240px); height: 32vh; right: -4vw; bottom: 6vh; }
  .screen-header h1 { font-size: clamp(28px, 7vw, 42px); }
  .screen-header p { font-size: 14px; }
  .book-wrap img { max-width: 96vw; max-height: 52vh; }
  .ritual-title-image img { width: min(82vw, 520px); max-height: 11vh; }
  .ritual-board { width: min(90vw, 560px); height: min(90vw, 560px); }
  .rune { width: min(18vw, 98px); }
  .bind-rune { width: min(21vw, 120px); }
}


/* v24 ritual spacing fixes */
#ritualPrompt { display: none !important; }
.ritual-header {
  gap: 0 !important;
  margin-top: -28px !important;
  margin-bottom: 6px !important;
}
.ritual-title-image {
  margin-top: -18px !important;
  margin-bottom: 28px !important;
}
.ritual-title-image img {
  max-height: 11vh !important;
}
.ritual-board {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}
.progress-dots {
  margin-top: 52px !important;
  margin-bottom: 10px !important;
}


/* v25 style-blend asset swap + title card nudge */
.ritual-title-image {
  margin-top: -38px !important;
}
@media (max-width: 780px) {
  .ritual-title-image {
    margin-top: -28px !important;
  }
}


/* v27 — uploaded transparent assets + final layout fixes */
#ritualPrompt { display: none !important; }
.ritual-title-image {
  margin-top: -48px !important;
  margin-bottom: 28px !important;
}
.ritual-title-image img {
  max-height: 11vh !important;
}
.progress-dots {
  margin-top: 52px !important;
  margin-bottom: 10px !important;
}

/* Foliage is now a stationary foreground frame; characters behind still breathe/float. */
.side-character {
  left: -4vw !important;
  top: 0 !important;
  bottom: auto !important;
  width: min(43vw, 780px) !important;
  height: 100vh !important;
  z-index: 7 !important;
}
.side-sheep {
  right: -3.5vw !important;
  bottom: -1vh !important;
  width: min(44vw, 780px) !important;
  height: min(68vh, 760px) !important;
  z-index: 7 !important;
}
.side-character img,
.side-sheep img {
  position: absolute !important;
  display: block !important;
}
.character-body {
  z-index: 1 !important;
  left: -2% !important;
  right: auto !important;
  top: auto !important;
  bottom: 4% !important;
  width: 74% !important;
  height: 82% !important;
  object-fit: contain !important;
  object-position: left bottom !important;
  animation: characterBreath 7s ease-in-out infinite !important;
  filter: saturate(.96) brightness(.84) contrast(1.05) drop-shadow(0 20px 28px rgba(0,0,0,.42)) !important;
}
.character-foliage {
  z-index: 3 !important;
  left: -4% !important;
  right: auto !important;
  top: -5% !important;
  bottom: auto !important;
  width: 96% !important;
  height: 110% !important;
  object-fit: cover !important;
  object-position: left center !important;
  animation: none !important;
  transform: none !important;
  filter: saturate(1.02) brightness(.82) contrast(1.05) drop-shadow(0 18px 30px rgba(0,0,0,.38)) !important;
}
.sheep-body {
  z-index: 1 !important;
  left: auto !important;
  right: 11% !important;
  top: auto !important;
  bottom: 8% !important;
  width: 58% !important;
  height: 78% !important;
  object-fit: contain !important;
  object-position: right bottom !important;
  animation: sheepFloat 6.5s ease-in-out infinite !important;
  filter: saturate(.98) brightness(.96) contrast(1.03) drop-shadow(0 18px 24px rgba(0,0,0,.38)) !important;
}
.sheep-foliage {
  z-index: 3 !important;
  left: auto !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: right bottom !important;
  animation: none !important;
  transform: none !important;
  filter: saturate(1.04) brightness(.84) contrast(1.08) drop-shadow(0 20px 30px rgba(0,0,0,.4)) !important;
}

@media (max-width: 1100px) {
  .side-character {
    width: min(54vw, 620px) !important;
  }
  .side-sheep {
    width: min(50vw, 560px) !important;
    height: 58vh !important;
  }
}
@media (max-width: 780px) {
  .ritual-title-image {
    margin-top: -32px !important;
  }
  .side-character {
    width: min(66vw, 430px) !important;
    left: -12vw !important;
  }
  .side-sheep {
    width: min(58vw, 350px) !important;
    height: 38vh !important;
    right: -8vw !important;
  }
  .character-foliage {
    height: 106% !important;
  }
}


/* v28 larger rune labels */
.ritual-board { width: min(66vmin, 720px) !important; height: min(66vmin, 720px) !important; }
.rune { width: min(12.8vmin, 124px) !important; }
.bind-rune { width: min(15.2vmin, 142px) !important; }
@media (max-width: 780px) {
  .ritual-board { width: min(90vw, 560px) !important; height: min(90vw, 560px) !important; }
  .rune { width: min(18vw, 98px) !important; }
  .bind-rune { width: min(21vw, 120px) !important; }
}


/* v29 clearer rune names */
.rune { overflow: visible !important; }
.rune img {
  filter: saturate(1.06) brightness(1.08) contrast(1.12) drop-shadow(0 0 14px rgba(193,162,106,.22)) !important;
}
.rune::after {
  content: attr(data-rune);
  position: absolute;
  left: 50%;
  top: 74%;
  transform: translateX(-50%);
  padding: 4px 10px 5px;
  border-radius: 999px;
  white-space: nowrap;
  text-transform: uppercase;
  font-family: "Cinzel", serif;
  font-size: clamp(10px, 1vmin, 14px);
  letter-spacing: .14em;
  line-height: 1;
  color: #f3deb0;
  background: linear-gradient(180deg, rgba(6,18,28,.96), rgba(8,24,34,.88));
  border: 1px solid rgba(192,163,106,.44);
  box-shadow: 0 6px 14px rgba(0,0,0,.30), inset 0 0 10px rgba(126,246,255,.07);
  text-shadow: 0 1px 0 rgba(0,0,0,.72), 0 0 10px rgba(255,231,170,.18);
  pointer-events: none;
  z-index: 4;
}
.bind-rune::after { display: none !important; }
.progress-dots { margin-top: 72px !important; }
@media (max-width: 780px) {
  .rune::after {
    top: 73%;
    font-size: clamp(9px, 2.1vw, 12px);
    padding: 3px 7px 4px;
    letter-spacing: .12em;
  }
  .progress-dots { margin-top: 76px !important; }
}