:root {
  --wild-glow: #ffc06a;
  --wild-teal: #75d8d0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  background: linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
  opacity: .18;
}

.wild-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.wild-mote {
  position: absolute;
  bottom: -18px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #ffd18c;
  opacity: 0;
  box-shadow: 0 0 12px #ffc06a;
  animation: wild-rise var(--duration) linear var(--delay) infinite;
}

@keyframes wild-rise {
  0% { transform: translate3d(0, 0, 0) scale(.35); opacity: 0; }
  12% { opacity: .48; }
  75% { opacity: .14; }
  100% { transform: translate3d(var(--drift), -105vh, 0) scale(1.15); opacity: 0; }
}

.wild-horizon {
  position: fixed;
  left: 6vw;
  right: 6vw;
  bottom: 5.5rem;
  height: 1px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,192,106,.48), rgba(117,216,208,.35), transparent);
  box-shadow: 0 0 24px rgba(255,192,106,.18);
}

.wild-compass {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 120;
  display: grid;
  grid-template-columns: 42px auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 7px 16px 7px 7px;
  border: 1px solid rgba(255,248,233,.22);
  border-radius: 999px;
  color: #fff8e9;
  background: rgba(11,10,23,.78);
  backdrop-filter: blur(20px) saturate(1.25);
  box-shadow: 0 18px 55px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.09);
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.wild-compass:hover { transform: translateY(-3px); border-color: rgba(255,192,106,.64); box-shadow: 0 22px 70px rgba(0,0,0,.5), 0 0 30px rgba(255,192,106,.12); }
.wild-compass__mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #23152a; background: linear-gradient(135deg,#ffe3a8,#ff9569); font-size: 21px; box-shadow: 0 0 22px rgba(255,192,106,.25); }
.wild-compass__copy { display: grid; text-align: left; line-height: 1.08; }
.wild-compass__copy b { font: 16px Georgia,serif; }
.wild-compass__copy small { color: #cfc7da; letter-spacing: .12em; font-size: 7px; margin-top: 4px; }

.wild-backdrop {
  position: fixed;
  inset: 0;
  z-index: 130;
  border: 0;
  background: rgba(5,4,12,.55);
  backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.wild-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 140;
  width: min(440px, 100%);
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) 24px;
  color: #fff8e9;
  background: radial-gradient(circle at 82% 5%,rgba(255,192,106,.16),transparent 34%), linear-gradient(160deg,rgba(27,22,48,.98),rgba(8,7,18,.99));
  border-left: 1px solid rgba(255,248,233,.17);
  box-shadow: -30px 0 90px rgba(0,0,0,.48);
  overflow: auto;
  transform: translateX(104%);
  transition: transform .38s cubic-bezier(.2,.85,.2,1);
}

body.wild-drawer-open .wild-backdrop { opacity: 1; pointer-events: auto; }
body.wild-drawer-open .wild-drawer { transform: translateX(0); }
.wild-drawer__top { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
.wild-kicker { color: #ffc06a; letter-spacing: .2em; font-size: 8px; font-weight: 850; }
.wild-drawer h2 { margin: 5px 0 0; font: 36px/1.05 Georgia,serif; }
.wild-close { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; border: 1px solid rgba(255,248,233,.18); color: #fff8e9; background: rgba(255,255,255,.06); cursor: pointer; }
.wild-route { margin: 28px 0 18px; padding: 20px; border-radius: 22px; border: 1px solid rgba(255,192,106,.25); background: rgba(255,255,255,.055); }
.wild-route__row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.wild-route strong { font: 56px/.9 Georgia,serif; color: #ffd18c; }
.wild-route span { color: #d2cbdc; font-size: 11px; text-align: right; }
.wild-route__bar { height: 4px; margin-top: 18px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.wild-route__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg,#ff7c67,#ffc06a,#75d8d0); box-shadow: 0 0 18px #ffc06a; transition: width .5s ease; }
.wild-territory { display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: center; margin: 18px 0; }
.wild-territory__mark { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(117,216,208,.34); color: #75d8d0; background: rgba(117,216,208,.08); font: 24px Georgia,serif; }
.wild-territory small { color: #75d8d0; letter-spacing: .16em; font-size: 7px; }
.wild-territory b { display: block; margin-top: 3px; font: 21px Georgia,serif; }
.wild-question { margin: 18px 0; padding: 17px 18px; border-left: 2px solid #ffc06a; background: rgba(255,192,106,.07); color: #e9e1ec; font: italic 16px/1.55 Georgia,serif; }
.wild-realms { display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; margin: 22px 0; }
.wild-realms span { height: 7px; border-radius: 99px; background: rgba(255,255,255,.09); overflow: hidden; }
.wild-realms i { display: block; height: 100%; background: linear-gradient(90deg,#ff7c67,#ffc06a); }
.wild-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.wild-stats div { display: grid; gap: 2px; padding: 14px 8px; text-align: center; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: rgba(255,255,255,.035); }
.wild-stats b { color: #ffc06a; font-size: 18px; }
.wild-stats small { color: #bdb4c8; letter-spacing: .1em; font-size: 7px; }
.wild-controls { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
.wild-controls span { color: #cfc7da; font-size: 10px; line-height: 1.5; }
.wild-sound { min-height: 42px; padding: 0 15px; border-radius: 999px; border: 1px solid rgba(255,192,106,.35); color: #ffc06a; background: rgba(255,192,106,.08); cursor: pointer; font-size: 9px; letter-spacing: .1em; }
.wild-online { display: flex; align-items: center; gap: 7px; margin-top: 16px; color: #aaa2b7; font-size: 8px; letter-spacing: .1em; }
.wild-online::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #72d7a5; box-shadow: 0 0 12px #72d7a5; }
.wild-online.offline::before { background: #ffc06a; box-shadow: 0 0 12px #ffc06a; }
.san-drawer-link { width: 100%; min-height: 70px; margin-top: 20px; padding: 10px; display: grid; grid-template-columns: 45px 1fr 24px; align-items: center; gap: 12px; text-align: left; color: #fff8e9; border: 1px solid rgba(221,80,86,.35); border-radius: 17px; background: linear-gradient(115deg,rgba(163,34,53,.18),rgba(255,192,106,.07)); cursor: pointer; }
.san-drawer-link > span { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; color: #ffd18c; border: 1px solid rgba(255,192,106,.35); background: rgba(255,192,106,.08); font: 15px Georgia,serif; box-shadow: 0 0 22px rgba(221,80,86,.14); }
.san-drawer-link div { display: grid; gap: 3px; }
.san-drawer-link small { color: #e87876; letter-spacing: .13em; font-size: 7px; }
.san-drawer-link b { font: 14px/1.2 Georgia,serif; }
.san-drawer-link i { color: #ffc06a; font-style: normal; }

.wild-save-toast, .wild-pace {
  position: fixed;
  left: 50%;
  z-index: 125;
  transform: translate(-50%, 18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.wild-save-toast { bottom: max(24px, env(safe-area-inset-bottom)); padding: 10px 16px; border: 1px solid rgba(255,248,233,.16); border-radius: 999px; color: #d9d1df; background: rgba(10,9,22,.9); backdrop-filter: blur(16px); font-size: 9px; letter-spacing: .1em; }
.wild-save-toast.show, .wild-pace.show { opacity: 1; transform: translate(-50%,0); }
.wild-pace { top: 92px; padding: 9px 15px; border-radius: 999px; color: #241529; background: linear-gradient(120deg,#ffe29d,#ff9770); box-shadow: 0 10px 38px rgba(255,160,92,.28); font-size: 9px; font-weight: 900; letter-spacing: .14em; }

.stage::before { content: ""; position: absolute; inset: auto 0 0; z-index: 3; height: 38%; pointer-events: none; background-image: radial-gradient(circle,rgba(255,226,141,.72) 0 1px,transparent 1.5px); background-size: 47px 27px; opacity: .24; animation: wild-ground 2.2s linear infinite; }
.stage::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 70px rgba(5,4,13,.42), inset 0 -50px 80px rgba(8,5,14,.36); }
@keyframes wild-ground { to { background-position: -94px 0; } }
.runner .horse { animation: wild-gallop .38s ease-in-out infinite alternate; }
.runner .horse.jumping { animation-play-state: paused; }
@keyframes wild-gallop { to { transform: translateY(-3px) rotate(-.35deg); } }

.tap-flare { position: fixed; z-index: 999; width: 12px; height: 12px; margin: -6px; pointer-events: none; border: 1px solid #ffd18c; border-radius: 50%; box-shadow: 0 0 18px #ffc06a; animation: tap-flare .55s ease-out forwards; }
@keyframes tap-flare { to { opacity: 0; transform: scale(5); } }

.chapterGrid button.lockedChapter { opacity: .5; cursor: pointer; }
.chapterGrid button.lockedChapter:hover { opacity: .72; border-color: rgba(255,192,106,.45); }

.san-preview-host { display: none; position: relative; z-index: 2; padding: clamp(22px,4vw,56px) clamp(16px,5vw,64px) clamp(92px,8vw,130px); color: #fff8e9; background: radial-gradient(circle at 82% 20%,rgba(183,37,61,.22),transparent 34%), radial-gradient(circle at 8% 75%,rgba(67,120,159,.2),transparent 36%), linear-gradient(150deg,#0b0916,#17101d 55%,#080712); overflow: hidden; }
body[data-wild-screen="home"] .san-preview-host, body[data-wild-screen="map"] .san-preview-host { display: block; }
.san-preview-host::before { content: "VIII"; position: absolute; right: 2vw; bottom: -4vw; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.045); font: 700 clamp(130px,28vw,430px)/.75 Georgia,serif; pointer-events: none; }
.san-preview-card { position: relative; max-width: 1250px; margin: auto; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(330px,.8fr); gap: clamp(24px,5vw,72px); align-items: center; padding: 13px; border: 1px solid rgba(255,248,233,.16); border-radius: 30px; background: linear-gradient(135deg,rgba(255,255,255,.085),rgba(11,8,21,.62)); box-shadow: 0 34px 100px rgba(0,0,0,.44), inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(22px); overflow: hidden; }
.san-card-image { position: relative; aspect-ratio: 16/9; min-height: 290px; border-radius: 21px; overflow: hidden; background: #0a0812; }
.san-card-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,transparent 45%,rgba(9,6,16,.3)),linear-gradient(0deg,rgba(7,5,13,.65),transparent 48%); }
.san-card-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.05); transition: transform 1.2s ease, filter .8s ease; }
.san-preview-card:hover .san-card-image img { transform: scale(1.035); filter: saturate(1.08) contrast(1.05); }
.san-eight-stars { position: absolute; z-index: 2; left: 22px; bottom: 18px; color: #ffd18c; letter-spacing: .13em; font-size: 10px; text-shadow: 0 0 15px rgba(255,192,106,.55); }
.san-card-copy { padding: clamp(18px,3vw,38px) clamp(15px,3vw,34px) clamp(18px,3vw,38px) 0; }
.san-card-copy > small { color: #ee7d78; letter-spacing: .22em; font-size: 8px; font-weight: 850; }
.san-card-copy h2 { margin: 10px 0 18px; font: 500 clamp(34px,4.3vw,61px)/1.02 Georgia,serif; letter-spacing: -.025em; }
.san-card-copy p { max-width: 540px; color: #d2cbdc; font-size: 15px; line-height: 1.7; }
.san-card-fragments { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.san-card-fragments > div { display: flex; padding-left: 5px; }
.san-card-fragments img { width: 40px; height: 48px; margin-left: -6px; object-fit: cover; object-position: 50% 24%; border: 2px solid #18101d; border-radius: 11px; filter: grayscale(.55) saturate(.7) brightness(.72); box-shadow: 0 8px 20px rgba(0,0,0,.32); transform: rotate(-2deg); transition: filter .35s ease,transform .35s ease; }
.san-card-fragments img:nth-child(even) { transform: translateY(3px) rotate(2deg); }
.san-preview-card:hover .san-card-fragments img,.san-preview-host.gallery-seen .san-card-fragments img { filter: none; transform: translateY(-2px); }
.san-card-fragments > span { display: grid; gap: 3px; }
.san-card-fragments b { color: #ffd18c; letter-spacing: .13em; font-size: 8px; }
.san-card-fragments small { color: #92899b; letter-spacing: .11em; font-size: 6px; }
.san-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 15px 20px; margin-top: 24px; }
.san-card-actions em { color: #aaa2b7; letter-spacing: .11em; font-size: 8px; font-style: normal; }
.san-preview-host.seen .san-card-actions em { color: #75d8d0; }

.san-modal { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); color: #fff8e9; background: rgba(4,3,10,.8); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, visibility .35s ease; }
body.san-preview-open { overflow: hidden; }
body.san-preview-open .san-modal { opacity: 1; visibility: visible; pointer-events: auto; }
.san-experience { position: relative; width: min(1120px,100%); height: min(790px,calc(100svh - 24px)); min-height: 570px; border: 1px solid rgba(255,248,233,.2); border-radius: 30px; background: #090611; box-shadow: 0 45px 130px rgba(0,0,0,.72); overflow: hidden; }
.san-close { position: absolute; z-index: 20; top: 16px; right: 16px; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #fff8e9; background: rgba(5,4,12,.5); backdrop-filter: blur(14px); cursor: pointer; font-size: 20px; }
.san-visual { position: absolute; inset: 0; }
.san-hero-image,.san-reveal-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1s ease, transform 6s ease; }
.san-hero-image { opacity: 1; }
.san-reveal-image { opacity: 0; object-position: 50% 24%; }
.san-modal[data-phase="reveal"] .san-hero-image { opacity: 0; }
.san-modal[data-phase="reveal"] .san-reveal-image { opacity: 1; transform: scale(1.045); }
.san-vignette { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(7,4,12,.87) 0%,rgba(7,4,12,.45) 47%,rgba(7,4,12,.2)),linear-gradient(0deg,rgba(7,4,12,.78),transparent 52%),radial-gradient(circle at 70% 20%,transparent 0 25%,rgba(8,4,13,.22) 70%); }
.san-modal[data-phase="rhythm"] .san-vignette { background: linear-gradient(0deg,rgba(7,4,12,.75),rgba(7,4,12,.2)),radial-gradient(circle at 50% 45%,transparent,rgba(4,3,10,.72)); }
.san-modal[data-phase="reveal"] .san-vignette { background: linear-gradient(90deg,rgba(7,4,12,.88),rgba(7,4,12,.26) 62%,rgba(7,4,12,.08)),linear-gradient(0deg,rgba(7,4,12,.82),transparent 54%); }
.san-phase { position: absolute; z-index: 5; inset: 0; display: none; padding: clamp(30px,7vw,92px); }
.san-phase[aria-hidden="false"] { display: flex; }
.san-phase > small { color: #ee7d78; letter-spacing: .23em; font-size: 8px; font-weight: 850; }
.san-intro-phase { flex-direction: column; justify-content: end; align-items: start; max-width: 750px; }
.san-intro-phase h2 { max-width: 690px; margin: 11px 0 16px; font: 500 clamp(45px,7vw,88px)/.94 Georgia,serif; letter-spacing: -.04em; }
.san-intro-phase p { max-width: 580px; margin: 0 0 25px; color: #ddd4df; font-size: clamp(14px,1.6vw,18px); line-height: 1.7; }
.san-start,.san-gallery-open,.san-keep,.san-replay,.san-gallery-back,.san-gallery-keep { min-height: 50px; padding: 0 21px; border-radius: 999px; cursor: pointer; letter-spacing: .14em; font-size: 9px; font-weight: 900; }
.san-start,.san-gallery-open,.san-keep,.san-gallery-keep { color: #251326; border: 0; background: linear-gradient(120deg,#ffd28c,#f36f72); box-shadow: 0 12px 40px rgba(226,77,83,.28); }
.san-replay,.san-gallery-back { color: #fff8e9; border: 1px solid rgba(255,248,233,.22); background: rgba(255,255,255,.07); }
.san-experience button:focus-visible,.san-photo-track:focus-visible { outline: 2px solid #ffe1a2; outline-offset: 3px; }
.san-rhythm-phase { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.san-constellation { position: relative; width: min(660px,86vw); height: min(390px,42svh); margin: 12px auto 5px; }
.san-constellation::before { content: ""; position: absolute; inset: 8% 10%; border: 1px solid rgba(255,209,140,.14); border-radius: 50%; transform: rotate(-8deg); box-shadow: 0 0 60px rgba(224,62,77,.08); }
.san-constellation button { position: absolute; display: grid; place-items: center; width: clamp(45px,6vw,64px); height: clamp(45px,6vw,64px); border: 1px solid rgba(255,255,255,.15); border-radius: 50%; color: rgba(255,255,255,.42); background: rgba(7,5,14,.56); backdrop-filter: blur(12px); cursor: pointer; font-size: 19px; transition: color .25s ease, transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.san-constellation button:nth-child(1){left:7%;top:46%}.san-constellation button:nth-child(2){left:22%;top:12%}.san-constellation button:nth-child(3){left:43%;top:3%}.san-constellation button:nth-child(4){right:19%;top:16%}.san-constellation button:nth-child(5){right:5%;top:48%}.san-constellation button:nth-child(6){right:22%;bottom:4%}.san-constellation button:nth-child(7){left:42%;bottom:0}.san-constellation button:nth-child(8){left:19%;bottom:11%}
.san-constellation button.active { color: #ffe1a2; border-color: rgba(255,209,140,.65); background: rgba(214,67,77,.2); box-shadow: 0 0 18px rgba(255,192,106,.48),0 0 60px rgba(224,62,77,.32); animation: san-pulse 1.1s ease-in-out infinite; }
.san-constellation button.lit { color: #fff0bd; border-color: rgba(255,209,140,.5); background: rgba(255,192,106,.18); box-shadow: 0 0 22px rgba(255,192,106,.35); }
.san-constellation button.wrong { animation: san-wrong .3s ease; }
@keyframes san-pulse { 50% { transform: scale(1.14); box-shadow: 0 0 28px rgba(255,192,106,.68),0 0 75px rgba(224,62,77,.44); } }
@keyframes san-wrong { 40% { transform: translateX(-6px); border-color: #e86f73; } 75% { transform: translateX(5px); } }
.san-beat-progress { width: min(420px,78%); height: 4px; margin: 8px auto 10px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.san-beat-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#d93e55,#ffd18c); box-shadow: 0 0 18px #f87b75; transition: width .35s ease; }
.san-rhythm-phase > b { color: #ffd18c; letter-spacing: .18em; font-size: 10px; }
.san-rhythm-phase > p { min-height: 20px; color: #cfc5d3; font-size: 10px; }
.san-reveal-phase { flex-direction: column; justify-content: end; align-items: start; max-width: 720px; }
.san-reveal-phase h2 { margin: 7px 0 0; color: #ffe0a2; font: 500 clamp(72px,13vw,165px)/.72 Georgia,serif; letter-spacing: .13em; text-shadow: 0 0 60px rgba(230,77,84,.36); }
.san-reveal-phase h3 { margin: 22px 0 12px; font: 500 clamp(26px,4vw,48px)/1 Georgia,serif; }
.san-reveal-phase > p { max-width: 580px; margin: 0; color: #ded4df; font-size: 15px; line-height: 1.65; }
.san-reveal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 23px; }
.san-reveal-phase > em { margin-top: 16px; color: #9d929f; letter-spacing: .12em; font-size: 7px; font-style: normal; }

.san-gallery-phase { flex-direction: column; gap: 11px; padding: 48px clamp(58px,7vw,88px) 20px; background: radial-gradient(circle at 16% 12%,rgba(220,66,79,.18),transparent 30%),radial-gradient(circle at 87% 82%,rgba(255,197,112,.12),transparent 28%),#080611; }
.san-gallery-heading { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: end; gap: 20px; padding-right: 42px; }
.san-gallery-heading small { color: #ee7d78; letter-spacing: .22em; font-size: 8px; font-weight: 850; }
.san-gallery-heading h2 { margin: 5px 0 0; font: 500 clamp(26px,4.1vw,48px)/1 Georgia,serif; letter-spacing: -.02em; }
.san-gallery-meter { display: grid; grid-template-columns: auto auto; align-items: center; gap: 3px 13px; min-width: 210px; text-align: right; }
.san-gallery-meter b { color: #ffe0a2; letter-spacing: .17em; font-size: 11px; }
.san-gallery-meter > span { color: #a99eae; letter-spacing: .12em; font-size: 7px; }
.san-gallery-meter > i { grid-column: 1/-1; justify-self: stretch; height: 3px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.san-gallery-meter > i span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#d93e55,#ffd18c); box-shadow: 0 0 16px #f87b75; transition: width .35s ease; }
.san-gallery-phase.is-complete .san-gallery-meter > span { color: #75d8d0; }
.san-photo-track { position: relative; flex: 1 1 auto; min-height: 260px; display: flex; overflow-x: auto; overflow-y: hidden; border: 1px solid rgba(255,248,233,.16); border-radius: 24px; background: #08050d; box-shadow: 0 22px 70px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.08); scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
.san-photo-track::-webkit-scrollbar { display: none; }
.san-photo-slide { position: relative; flex: 0 0 100%; height: 100%; min-width: 100%; margin: 0; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
.san-photo-frame { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.san-photo-blur { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(30px) saturate(.82) brightness(.42); transform: scale(1.04); }
.san-photo-frame::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg,rgba(7,4,12,.64),transparent 36% 72%,rgba(7,4,12,.3)),linear-gradient(0deg,rgba(6,4,10,.86),transparent 50%); pointer-events: none; }
.san-photo-main { position: relative; z-index: 1; display: block; width: auto; max-width: 100%; height: 100%; object-fit: contain; filter: saturate(.94) contrast(1.03); user-select: none; -webkit-user-drag: none; }
.san-photo-slide figcaption { position: absolute; z-index: 4; left: clamp(16px,3vw,34px); bottom: clamp(14px,2.5vw,28px); width: min(430px,calc(100% - 90px)); padding: 15px 17px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: rgba(7,4,12,.6); box-shadow: 0 14px 48px rgba(0,0,0,.3); backdrop-filter: blur(14px); opacity: .38; transform: translateY(8px); transition: opacity .35s ease,transform .35s ease; }
.san-photo-slide.is-active figcaption { opacity: 1; transform: none; }
.san-photo-slide figcaption small { color: #ef817b; letter-spacing: .2em; font-size: 7px; font-weight: 850; }
.san-photo-slide figcaption h3 { margin: 5px 0 4px; color: #fff0c4; font: 500 clamp(23px,3vw,37px)/1 Georgia,serif; }
.san-photo-slide figcaption p { margin: 0; color: #ddd4df; font-size: 12px; line-height: 1.55; }
.san-photo-prev,.san-photo-next { position: absolute; z-index: 12; top: 50%; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #fff4d5; background: rgba(7,4,12,.58); box-shadow: 0 10px 35px rgba(0,0,0,.32); backdrop-filter: blur(12px); cursor: pointer; font-size: 18px; }
.san-photo-prev { left: clamp(62px,7vw,91px); }
.san-photo-next { right: clamp(62px,7vw,91px); }
.san-photo-rail { flex: 0 0 auto; display: flex; justify-content: center; gap: 7px; }
.san-photo-rail button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; color: #9f95a5; background: rgba(255,255,255,.055); cursor: pointer; font-size: 8px; transition: color .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease; }
.san-photo-rail button.is-viewed { color: #ffd18c; border-color: rgba(255,209,140,.34); }
.san-photo-rail button.is-viewed::after { content: "✦"; position: absolute; right: -2px; top: -4px; color: #ef7775; font-size: 7px; }
.san-photo-rail button.is-active { color: #241225; border-color: transparent; background: linear-gradient(135deg,#ffd18c,#ef7172); box-shadow: 0 0 24px rgba(238,105,107,.32); }
.san-gallery-actions { flex: 0 0 auto; display: flex; justify-content: center; gap: 9px; }
.san-gallery-actions button { min-height: 44px; }
.san-gallery-phase > em { flex: 0 0 auto; align-self: center; color: #817785; letter-spacing: .11em; font-size: 6px; font-style: normal; text-align: center; }

body[data-wild-view="mission"] .wild-compass { opacity: .64; transform: scale(.86); transform-origin: right bottom; }
body[data-wild-view="mission"] .wild-compass__copy { display: none; }
body[data-wild-view="mission"] .wild-compass { grid-template-columns: 42px; padding-right: 7px; }

@media (max-width: 660px) {
  .shell { padding-bottom: 82px; }
  .shell > .top nav { position: fixed; z-index: 115; left: 10px; right: 10px; bottom: max(9px, env(safe-area-inset-bottom)); justify-content: space-around; overflow: visible; padding: 6px; border: 1px solid rgba(255,248,233,.16); border-radius: 999px; background: rgba(10,9,22,.9); backdrop-filter: blur(20px); box-shadow: 0 16px 55px rgba(0,0,0,.4); }
  .shell > .top nav button { flex: 1; min-width: 0; padding: 8px 5px; }
  .shell > footer { padding-bottom: calc(94px + env(safe-area-inset-bottom)); }
  .wild-compass { right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); grid-template-columns: 40px; padding: 6px; }
  .wild-compass__mark { width: 40px; height: 40px; }
  .wild-compass__copy { display: none; }
  body[data-wild-view="mission"] .wild-compass { bottom: max(12px, env(safe-area-inset-bottom)); }
  .wild-drawer { border-left: 0; padding-left: 20px; }
  .wild-save-toast { bottom: calc(83px + env(safe-area-inset-bottom)); }
  body[data-wild-view="mission"] .wild-save-toast { bottom: max(18px, env(safe-area-inset-bottom)); }
  .san-preview-host { padding: 18px 12px calc(104px + env(safe-area-inset-bottom)); }
  .san-preview-card { grid-template-columns: 1fr; gap: 4px; border-radius: 24px; }
  .san-card-image { min-height: 220px; }
  .san-card-copy { padding: 20px 13px 23px; }
  .san-card-copy h2 { font-size: 38px; }
  .san-card-fragments { align-items: start; flex-direction: column; gap: 9px; }
  .san-card-actions { display: grid; }
  .san-card-actions button { width: 100%; }
  .san-experience { min-height: 0; height: calc(100svh - max(20px,env(safe-area-inset-top)) - max(20px,env(safe-area-inset-bottom))); border-radius: 22px; }
  .san-phase { padding: 28px 22px 36px; }
  .san-intro-phase h2 { font-size: 49px; }
  .san-constellation { width: 100%; height: 42svh; }
  .san-reveal-phase h2 { font-size: 84px; }
  .san-reveal-phase h3 { font-size: 30px; }
  .san-reveal-actions { display: grid; width: 100%; }
  .san-reveal-actions button { width: 100%; }
  .san-gallery-phase { gap: 8px; padding: 54px 12px 13px; }
  .san-gallery-heading { align-items: center; gap: 8px; padding: 0 43px 0 3px; }
  .san-gallery-heading small { letter-spacing: .15em; font-size: 6px; }
  .san-gallery-heading h2 { margin-top: 3px; font-size: 25px; }
  .san-gallery-meter { grid-template-columns: 1fr; gap: 2px; min-width: 78px; }
  .san-gallery-meter > span { font-size: 6px; }
  .san-photo-track { min-height: 220px; border-radius: 18px; }
  .san-photo-frame::after { background: linear-gradient(0deg,rgba(6,4,10,.9),transparent 58%); }
  .san-photo-slide figcaption { left: 10px; right: 10px; bottom: 9px; width: auto; padding: 10px 12px; border-radius: 13px; }
  .san-photo-slide figcaption h3 { font-size: 21px; }
  .san-photo-slide figcaption p { font-size: 10px; line-height: 1.4; }
  .san-photo-prev,.san-photo-next { top: 51%; width: 46px; height: 46px; }
  .san-photo-prev { left: 20px; }
  .san-photo-next { right: 20px; }
  .san-photo-rail { gap: 5px; }
  .san-gallery-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 6px; }
  .san-gallery-actions button { min-width: 0; padding: 0 8px; letter-spacing: .09em; font-size: 7px; }
  .san-gallery-phase > em { max-width: 92%; line-height: 1.4; }
}

@media (max-width: 660px) and (max-height: 650px) {
  .san-reveal-phase h2 { font-size: 62px; }
  .san-reveal-phase h3 { margin-top: 14px; font-size: 25px; }
  .san-reveal-phase > p { font-size: 12px; line-height: 1.45; }
  .san-reveal-actions { margin-top: 13px; }
  .san-reveal-actions button { min-height: 44px; }
  .san-reveal-phase > em { display: none; }
  .san-gallery-phase { gap: 5px; padding-top: 50px; }
  .san-gallery-heading h2 { display: none; }
  .san-photo-slide figcaption p { display: none; }
  .san-photo-slide figcaption h3 { margin-bottom: 0; font-size: 18px; }
  .san-photo-rail button { width: 44px; height: 44px; }
  .san-gallery-phase > em { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wild-mote, .stage::before, .runner .horse, .san-constellation button.active { animation: none !important; }
  .wild-drawer, .wild-backdrop, .wild-save-toast, .wild-pace, .san-modal, .san-hero-image, .san-reveal-image, .san-photo-slide figcaption, .san-gallery-meter > i span { transition-duration: .01ms !important; }
  .san-photo-track { scroll-behavior: auto; }
  .san-photo-blur { transform: none; }
}