/* ================= Mystery Sisters — official site =================
   Same visual DNA as the game: IM Fell display type, parchment paper,
   oak-and-brass chrome, watercolor art, candlelight warmth. */

@font-face {
  font-family: 'IM Fell English';
  src: url('../assets/fonts/imfell-normal.woff2') format('woff2');
  font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IM Fell English';
  src: url('../assets/fonts/imfell-italic.woff2') format('woff2');
  font-style: italic; font-display: swap;
}

:root {
  --ink: #2b2016;
  --ink-soft: #4c3b2a;
  --paper: #efe3c8;
  --brass: #b98a2e;
  --brass-bright: #e3b95c;
  --wax: #8e2f24;
  --night: #131a26;
  --teal: #29566b;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--ink);
  background: var(--night);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
.display { font-family: 'IM Fell English', Georgia, serif; font-weight: normal; }

/* ---------------- top nav ---------------- */
.topnav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 22px;
  background: linear-gradient(180deg, rgba(19,15,10,.92), rgba(19,15,10,.75));
  border-bottom: 1px solid rgba(227,185,92,.28);
  backdrop-filter: blur(6px);
  transition: transform .35s ease;
}
.topnav.hidden { transform: translateY(-100%); }
.nav-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--brass-bright); font-family: 'IM Fell English', serif; font-size: 1.05rem; letter-spacing: .04em; }
.nav-brand img { border-radius: 6px; }
.nav-links { display: flex; gap: 16px; margin-left: 6px; }
.nav-links a { color: #d8c9a6; text-decoration: none; font-size: .92rem; letter-spacing: .03em; opacity: .85; }
.nav-links a:hover { color: var(--brass-bright); opacity: 1; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.audio-toggle {
  display: flex; align-items: center; gap: 7px;
  background: linear-gradient(180deg, #3a2c1a, #241a0f);
  color: #d8c9a6; border: 1px solid rgba(227,185,92,.4);
  border-radius: 999px; padding: 6px 13px; cursor: pointer; font-size: .8rem;
  font-family: Georgia, serif;
}
.audio-toggle[aria-pressed="true"] { color: var(--brass-bright); box-shadow: 0 0 12px rgba(227,185,92,.25); }
.audio-toggle .wav { opacity: .25; transition: opacity .3s; }
.audio-toggle[aria-pressed="true"] .wav { opacity: 1; }

.lang-switch { display: flex; border: 1px solid rgba(227,185,92,.4); border-radius: 999px; overflow: hidden; }
.lang-switch button {
  background: transparent; color: #d8c9a6; border: 0; padding: 6px 11px;
  font-size: .78rem; cursor: pointer; font-family: Georgia, serif;
}
.lang-switch button + button { border-left: 1px solid rgba(227,185,92,.25); }
.lang-switch button.active { background: rgba(227,185,92,.18); color: var(--brass-bright); }

/* ---------------- hero ---------------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.hero-layer {
  position: absolute; inset: -6% -4%;
  background-size: cover; background-position: center;
  will-change: transform;
}
.hero-near { inset: -8% -5%; }
.hero-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 42%, rgba(10,8,14,.62) 100%),
    linear-gradient(180deg, rgba(10,8,14,.35), transparent 26%, transparent 68%, rgba(10,8,14,.78));
}
.motes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* god-rays from the upper sky, the game's ray language */
.rays {
  position: absolute; inset: -30% -20%; pointer-events: none; mix-blend-mode: screen;
  background: conic-gradient(from 168deg at 62% -8%,
    transparent 0deg, rgba(255,222,160,.10) 5deg, transparent 11deg,
    rgba(255,222,160,.07) 17deg, transparent 24deg,
    rgba(255,222,160,.11) 31deg, transparent 39deg,
    rgba(255,222,160,.06) 47deg, transparent 56deg);
  transform-origin: 62% -8%;
  animation: rays-sway 17s ease-in-out infinite alternate;
  opacity: .85;
}
@keyframes rays-sway {
  from { transform: rotate(-2.4deg); opacity: .65; }
  to   { transform: rotate(2.4deg);  opacity: 1; }
}

/* drifting lens flares (game's flare language) */
.flare { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; filter: blur(2px); }
.flare-a {
  width: 34vmin; height: 34vmin; left: 12%; top: 16%;
  background: radial-gradient(circle, rgba(255,220,150,.55) 0%, rgba(255,190,110,.18) 34%, transparent 70%);
  animation: flare-drift 11s ease-in-out infinite alternate;
}
.flare-b {
  width: 20vmin; height: 20vmin; right: 16%; top: 32%;
  background: radial-gradient(circle, rgba(170,215,255,.4) 0%, rgba(170,215,255,.12) 40%, transparent 72%);
  animation: flare-drift 14s ease-in-out -5s infinite alternate-reverse;
}
.flare-c {
  width: 11vmin; height: 11vmin; left: 30%; bottom: 24%; top: auto;
  background: radial-gradient(circle, rgba(255,196,120,.5) 0%, rgba(255,170,90,.14) 42%, transparent 70%);
  animation: flare-drift 9s ease-in-out -3s infinite alternate;
}
@keyframes flare-drift {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .75; }
  to   { transform: translate3d(4vmin, 2.5vmin, 0) scale(1.18); opacity: 1; }
}

.hero-content {
  position: relative; z-index: 3; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 72px 20px 40px; gap: 20px;
}
.logo-wrap { position: relative; display: inline-block; animation: logo-in 1.4s cubic-bezier(.2,.7,.25,1) both; }
.hero-logo { width: min(560px, 82vw); filter: drop-shadow(0 10px 28px rgba(0,0,0,.55)); }
/* golden shimmer sweeping across the letterforms every few seconds */
.logo-wrap::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,242,205,.95) 50%, transparent 62%);
  background-size: 260% 100%;
  -webkit-mask: var(--logo-url) center / contain no-repeat;
  mask: var(--logo-url) center / contain no-repeat;
  mix-blend-mode: screen;
  animation: logo-sheen 7.5s ease-in-out infinite;
}
@keyframes logo-sheen {
  0%, 54%  { background-position: 130% 0; opacity: 0; }
  60%      { opacity: 1; }
  82%, 100% { background-position: -30% 0; opacity: 0; }
}
@keyframes logo-in { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
.hero-tagline {
  color: #f0e3c2; font-style: italic; font-family: 'IM Fell English', serif;
  font-size: clamp(1.05rem, 2.4vw, 1.45rem); max-width: 34em;
  text-shadow: 0 2px 10px rgba(0,0,0,.75);
  animation: logo-in 1.4s .25s cubic-bezier(.2,.7,.25,1) both;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; animation: logo-in 1.4s .45s cubic-bezier(.2,.7,.25,1) both; }

/* oak & brass buttons (game plaque language) */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; border-radius: 12px; text-decoration: none;
  font-family: 'IM Fell English', serif; font-size: 1.06rem; letter-spacing: .03em;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
.btn:active { transform: translateY(0) scale(.985); }
.btn-primary {
  color: #f7ecd2;
  position: relative; overflow: hidden;
  background: url('../assets/img/ui_oakbrass.webp') center/cover, #3a2c1a;
  border: 1px solid #7c5a22;
  box-shadow: 0 3px 0 #241a0f, 0 10px 26px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,230,170,.35);
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,235,180,.38), transparent);
  transform: skewX(-20deg); transition: left .55s ease;
  pointer-events: none;
}
.btn-primary:hover::after { left: 125%; }
.btn-primary .btn-seal {
  width: 30px; height: 30px; margin: -6px 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.btn-primary:hover .btn-seal { transform: scale(1.2) rotate(-9deg); }
.btn-ghost {
  color: #ead9ac; border: 1px solid rgba(227,185,92,.55); background: rgba(19,15,10,.35);
  backdrop-filter: blur(3px);
}
.btn-small { padding: 9px 18px; font-size: .95rem; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3;
  color: #d8c9a6; font-size: .72rem; letter-spacing: .25em; text-transform: uppercase;
  text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: .8;
}
.scroll-cue i { width: 1px; height: 34px; background: linear-gradient(180deg, var(--brass-bright), transparent); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%,100% { transform: scaleY(.5); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---------------- sections ---------------- */
.section { position: relative; padding: 84px 20px; }
.section-title { color: #f0e3c2; text-align: center; font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 10px; text-shadow: 0 2px 12px rgba(0,0,0,.6); }

/* brass filigree divider (gear-and-quill flourish) */
.ornament {
  display: block; margin: 2px auto 30px; height: 42px; width: auto; max-width: 74vw;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
  opacity: .95;
}
.ornament-dark { filter: drop-shadow(0 0 12px rgba(227,185,92,.35)) drop-shadow(0 2px 4px rgba(0,0,0,.5)); }

/* episode 1 — big parchment case file */
.ep1 { background: linear-gradient(180deg, var(--night), #1d1a14 30%, #241d13); }
.parchment-panel {
  max-width: 1120px; margin: 0 auto; padding: clamp(26px, 5vw, 62px);
  background: url('../assets/img/parchment_page.webp') center/cover, var(--paper);
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6), inset 0 0 90px rgba(112,78,34,.18);
}
.case-badge {
  display: inline-block; padding: 6px 16px; margin-bottom: 14px;
  background: var(--wax); color: #f7e6cf; border-radius: 999px;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(80,20,10,.4);
  transform: rotate(-1.2deg);
}
.ep1 h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); color: var(--ink); margin-bottom: 22px; }
.ep1-cols { display: grid; grid-template-columns: 1.1fr .9fr; gap: 34px; align-items: center; }
.ep1-text p { font-size: 1.06rem; line-height: 1.65; color: var(--ink-soft); margin-bottom: 16px; }
.ep1-text .btn { margin-top: 8px; }
.ep1-art img { border-radius: 8px; border: 6px solid #fffdf4; box-shadow: 0 14px 34px rgba(43,32,22,.4); transform: rotate(1.6deg); }
.tilt-card { transition: transform .3s ease; }
.tilt-card:hover { transform: rotate(0deg) scale(1.02); }

.features {
  list-style: none; margin: 46px 0 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px;
}
.features li {
  padding: 18px 20px; border-radius: 9px;
  background: rgba(255,252,240,.55); border: 1px solid rgba(148,110,55,.35);
  box-shadow: 0 4px 14px rgba(43,32,22,.12);
}
.features h3 { font-family: 'IM Fell English', serif; color: #6d4718; font-size: 1.12rem; margin-bottom: 6px; }
.features p { color: var(--ink-soft); font-size: .93rem; line-height: 1.5; }

.gallery-title { margin: 52px 0 22px; font-size: 1.7rem; color: var(--ink); }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.polaroid {
  position: relative;
  background: #fffdf4; padding: 9px 9px 26px; border-radius: 4px;
  box-shadow: 0 8px 22px rgba(43,32,22,.3);
  transform: rotate(var(--tilt, -1.5deg));
  transition: transform .28s ease, box-shadow .28s ease;
}
/* brass tack pinning each photo to the case file */
.polaroid::before {
  content: ''; position: absolute; top: -7px; left: 50%; margin-left: -7px;
  width: 14px; height: 14px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 30%, #ffe9ad, #b98a2e 62%, #6e4f1d);
  box-shadow: 0 2px 5px rgba(43,32,22,.45);
}
.polaroid:nth-child(2n) { --tilt: 1.6deg; }
.polaroid:nth-child(3n) { --tilt: -0.8deg; }
.polaroid:hover { transform: rotate(0) scale(1.045); box-shadow: 0 16px 38px rgba(43,32,22,.42); z-index: 2; }
.polaroid img { border-radius: 2px; aspect-ratio: 3/2; object-fit: cover; }

/* sisters */
.sisters { background: linear-gradient(180deg, #241d13, #17141c 60%, var(--night)); }
.cast { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; max-width: 1050px; margin: 0 auto; }
.cast-card {
  text-align: center; padding: 24px 22px 28px; border-radius: 12px;
  background: url('../assets/img/ui_parchment.webp') center/cover, var(--paper);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  transition: transform .3s ease, box-shadow .3s ease;
}
.cast-card:hover { transform: translateY(-7px); box-shadow: 0 26px 56px rgba(0,0,0,.6); }
.cast-card:hover .cast-portrait img { transform: scale(1.03); }
.cast-card .cast-portrait img { transition: transform .45s ease; }
/* the scene leans in gently behind them on hover */
.cast-card .cast-portrait::before { transition: transform .6s ease; }
.cast-card:hover .cast-portrait::before { transform: scale(1.04); }
.cast-portrait {
  width: 100%; aspect-ratio: 6 / 7; margin-bottom: 14px;
  display: flex; align-items: flex-end; justify-content: center;
  border-radius: 9px; overflow: hidden; position: relative;
  background: #202531; /* paint-over while the scene loads */
}
/* each detective stands IN a scene from the game */
.cast-portrait::before {
  content: ''; position: absolute; inset: -6px;
  background: var(--paper) center / cover no-repeat;
  filter: blur(1.1px) brightness(.94);
}
.portrait-lem::before   { background-image: url('../assets/img/bg_museum_entrance.webp'); background-position: center 32%; }
.portrait-ally::before  { background-image: url('../assets/img/bg_canal_bridge_modern.webp'); background-position: center 38%; }
.portrait-mouse::before { background-image: url('../assets/img/bg_workshop_1672.webp'); filter: blur(1px) brightness(.78); }
/* candlelight vignette keeps the character the subject */
.cast-portrait::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 52px rgba(16,20,30,.55);
}
.cast-portrait img {
  position: relative; z-index: 1;
  height: 96%; width: auto; max-width: 94%;
  object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 6px 14px rgba(20,30,40,.5));
}
.cast-card h3 { font-family: 'IM Fell English', serif; font-size: 1.6rem; color: var(--ink); }
.cast-role { font-style: italic; color: #7a5c33; margin: 2px 0 10px; font-size: .95rem; }
.cast-bio { color: var(--ink-soft); font-size: .94rem; line-height: 1.55; }
.mouse-stage { cursor: grab; }
.mouse-stage:active { cursor: grabbing; }
.mouse-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.mouse-hint {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  color: rgba(240,227,194,.75); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; z-index: 2;
  pointer-events: none;
}

/* voyage */
.voyage { background: linear-gradient(180deg, var(--night), #101720); padding-bottom: 100px; }
.voyage-sub { text-align: center; color: #c9b98f; font-style: italic; font-family: 'IM Fell English', serif; margin: -20px 0 34px; font-size: 1.08rem; }
.map-wrap {
  position: relative; max-width: 1060px; margin: 0 auto 44px;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 26px 70px rgba(0,0,0,.65);
}
.map-img { width: 100%; }
.map-pin {
  position: absolute; width: 44px; height: 44px; transform: translate(-50%, -50%);
  background: transparent; border: 0; cursor: pointer;
}
.map-pin i {
  position: absolute; inset: 8px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--brass-bright), var(--brass) 58%, #7c5a22);
  border: 2px solid #fdf3d0; box-shadow: 0 3px 10px rgba(0,0,0,.55);
  transition: transform .2s ease;
}
/* pins drop onto the map as it scrolls into view */
.map-wrap.shown .map-pin { animation: pin-drop .65s cubic-bezier(.34,1.56,.64,1) backwards; }
.map-wrap.shown .pin-ep1 { animation-delay: .25s; }
.map-wrap.shown .pin-ep2 { animation-delay: .5s; }
.map-wrap.shown .pin-ep3 { animation-delay: .75s; }
@keyframes pin-drop {
  from { transform: translate(-50%, -300%) scale(1.6); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.map-pin::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(227,185,92,.8);
  animation: pin-pulse 2.4s ease-out infinite;
}
.map-pin.live i { background: radial-gradient(circle at 34% 30%, #ff9d80, var(--wax) 60%, #5c1c14); }
.map-pin:hover i { transform: scale(1.2); }
@keyframes pin-pulse { 0% { transform: scale(.55); opacity: .9; } 75% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } }
.pin-ep1 { left: 21%; top: 26%; }
.pin-ep2 { left: 70%; top: 54%; }
.pin-ep3 { left: 48%; top: 78%; }

.episodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; max-width: 1120px; margin: 0 auto; }
.ep-card {
  background: url('../assets/img/ui_parchment.webp') center/cover, var(--paper);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 16px 44px rgba(0,0,0,.55);
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ep-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(227,185,92,.55), 0 26px 60px rgba(0,0,0,.65); }
.ep-card figure { overflow: hidden; }
.ep-card figure img { transition: transform .6s ease; }
.ep-card:hover figure img { transform: scale(1.055); }
.ep-card.spot { animation: card-spot 1.6s ease; }
@keyframes card-spot { 0%, 45% { box-shadow: 0 0 0 3px var(--brass-bright), 0 16px 44px rgba(0,0,0,.55); } 100% { box-shadow: 0 16px 44px rgba(0,0,0,.55); } }
.ep-card figure { position: relative; }
.ep-card figure img { aspect-ratio: 3/2; object-fit: cover; }
.ep-card .state {
  position: absolute; top: 12px; left: 12px;
  background: rgba(19,15,10,.82); color: #ead9ac; border: 1px solid rgba(227,185,92,.5);
  padding: 4px 12px; border-radius: 999px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
}
.ep-card .state.live { background: var(--wax); color: #f7e6cf; border-color: rgba(255,220,190,.4); }
.ep-card h3 { font-family: 'IM Fell English', serif; font-size: 1.28rem; color: var(--ink); padding: 16px 20px 4px; }
.ep-card p { color: var(--ink-soft); font-size: .95rem; line-height: 1.55; padding: 0 20px 18px; flex: 1; }
.ep-card .btn { margin: 0 20px 20px; align-self: flex-start; }

/* footer */
.footer {
  text-align: center; padding: 52px 20px 60px;
  background: #0d1118; color: #b9a87f;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.foot-studio { font-family: 'IM Fell English', serif; font-size: 1.06rem; color: #e0d0a4; }
.foot-fiction { font-size: .82rem; opacity: .7; font-style: italic; }
.foot-copy { font-size: .8rem; opacity: .55; }

/* reveals */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.25,1); }
.reveal.shown { opacity: 1; transform: none; }

/* responsive */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .ep1-cols { grid-template-columns: 1fr; }
  .ep1-art { order: -1; max-width: 480px; margin: 0 auto; }
  .cast { max-width: 460px; }  /* stacked cards stay portrait-shaped, not stretched */
}
@media (max-width: 520px) {
  .lang-switch button { padding: 6px 8px; font-size: .7rem; }
  .audio-toggle span { display: none; }
  .section { padding: 60px 14px; }
  .map-pin { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flare, .map-pin, .map-pin::after, .scroll-cue i, .hero-logo, .hero-tagline,
  .hero-ctas, .rays, .logo-wrap, .logo-wrap::after { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-layer, .hero-content { transform: none !important; opacity: 1 !important; }
}