:root {
  color-scheme: dark;
  --bg: #07070a;
  --panel: rgba(14, 13, 18, 0.82);
  --panel-strong: rgba(12, 11, 15, 0.96);
  --line: rgba(230, 184, 109, 0.23);
  --line-strong: rgba(230, 184, 109, 0.62);
  --text: #f8f1e7;
  --muted: #c2b6a5;
  --accent: #e6b86d;
  --glow: #7d5ce5;
  --universe-bg: #09090d;
  --hero-image: url('../img/intro-poster-v1.webp');
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.58);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  overflow-x: hidden;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  opacity: 0.16;
  background-image: radial-gradient(rgba(255,255,255,.32) .5px, transparent .5px);
  background-size: 4px 4px;
  mix-blend-mode: soft-light;
}

.screen { min-height: 100vh; }
.eyebrow {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: rgba(16, 14, 20, .72);
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  backdrop-filter: blur(14px);
}
.button:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.button.primary {
  border-color: color-mix(in srgb, var(--accent) 75%, white 10%);
  color: #1b1107;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 90%, white 10%), color-mix(in srgb, var(--accent) 70%, #8f512f 30%));
  box-shadow: 0 12px 38px color-mix(in srgb, var(--accent) 22%, transparent);
  font-weight: 850;
}
.button.ghost { background: rgba(7, 7, 10, .38); }
.button.compact { min-height: 36px; padding: 0 13px; font-size: .78rem; }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.saga-return {
  min-height: 36px;
  padding: 0 13px;
  font-size: .76rem;
  white-space: nowrap;
}

/* Cinematic intro */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background: #030306;
  transition: opacity .75s ease, visibility .75s ease;
}
.intro.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-media, .intro-media::after, .intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.intro-media {
  z-index: -2;
  background: #050508 var(--intro-poster) center/cover no-repeat;
  animation: cinematic-drift 4.6s ease-out both;
}
.intro-video {
  z-index: 1;
  object-fit: cover;
  filter: brightness(1) saturate(1);
  transform: scale(1);
  transition: filter 1.2s ease, transform 1.6s ease;
}
.intro-media::after {
  content: '';
  z-index: 2;
  background:
    radial-gradient(circle at 50% 56%, rgba(2, 2, 5, .35) 0 16%, rgba(2, 2, 5, .76) 50%, rgba(1, 1, 3, .98) 100%),
    linear-gradient(180deg, rgba(1, 1, 3, .56), rgba(1, 1, 3, .72) 48%, rgba(1, 1, 3, .98));
  opacity: .12;
  transition: opacity 1.15s ease;
}
.intro.is-revealed .intro-media::after { opacity: 1; }
.intro.is-revealed .intro-video {
  filter: brightness(.4) saturate(.72);
  transform: scale(1.025);
}
.intro-content {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100% - 38px));
  padding-top: min(18vh, 170px);
  text-align: center;
  text-shadow: 0 4px 30px #000;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .85s ease, transform .85s ease, visibility 0s linear;
}
.intro.has-video:not(.is-revealed) .intro-content {
  opacity: 0;
  visibility: hidden;
  transform: translateY(28px);
  pointer-events: none;
  transition: none;
}
.intro.has-video.is-revealed .intro-content {
  transition-delay: .5s;
}
.intro-mark, .brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.intro-mark::before, .intro-mark::after, .brand-mark::before {
  content: '';
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.intro-mark::after { transform: scaleX(-1); }
.intro-title {
  margin: 13px 0 2px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4.8rem, 15vw, 10.5rem);
  font-weight: 400;
  line-height: .84;
  letter-spacing: .08em;
  background: linear-gradient(180deg, #fff8df 0%, #e9c786 42%, #9f6e37 100%);
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 28px rgba(230, 184, 109, .22));
}
.intro-copy {
  max-width: 590px;
  margin: 24px auto 0;
  color: #e9dfd2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.55;
}
.intro-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.intro-sound-start {
  position:absolute;
  top:50%;
  left:50%;
  z-index:4;
  display:grid;
  width:min(390px,calc(100vw - 38px));
  justify-items:center;
  gap:4px;
  padding:0;
  border:0;
  color:#fff8e8;
  background:transparent;
  cursor:pointer;
  transform:translate(-50%,-50%);
  transition:transform .25s ease;
}
.intro-sound-start::before {
  content:'';
  position:absolute;
  inset:13% 5% 19%;
  z-index:-1;
  border-radius:999px;
  background:rgba(230,184,109,.3);
  filter:blur(24px);
  opacity:.72;
  animation:intro-imagina-halo 2.8s ease-in-out infinite;
}
.intro-sound-start:hover { transform:translate(-50%,-50%) scale(1.035); }
.intro-sound-start:focus-visible { outline:0; }
.intro-sound-art {
  display:grid;
  justify-items:center;
  gap:8px;
  width:100%;
  color:#fff8e8;
  font-family:Georgia,'Times New Roman',serif;
  text-align:center;
  text-transform:uppercase;
  filter:drop-shadow(0 13px 28px rgba(0,0,0,.7)) drop-shadow(0 0 13px rgba(230,184,109,.34));
  animation:intro-imagina-art 2.8s ease-in-out infinite;
}
.intro-sound-art strong { font-size:clamp(3.4rem,14vw,6.8rem); font-weight:500; letter-spacing:.2em; line-height:.9; }
.intro-sound-art small { font-family:Inter,system-ui,sans-serif; font-size:.7rem; font-weight:800; letter-spacing:.26em; }
.intro-sound-start:hover .intro-sound-art,
.intro-sound-start:focus-visible .intro-sound-art {
  animation:none;
  filter:brightness(1.12) drop-shadow(0 15px 34px rgba(0,0,0,.74)) drop-shadow(0 0 24px rgba(230,184,109,.68));
}
.intro-controls {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease .9s, visibility 0s linear .9s;
}
.intro.has-video:not(.is-revealed) .intro-controls {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}
.intro-sound-toggle {
  position: absolute;
  right: 20px;
  bottom: 18px;
  z-index: 3;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  color: #fff8e8;
  background: rgba(5, 5, 9, .42);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  backdrop-filter: blur(9px);
  cursor: pointer;
  opacity: 1;
  transition: opacity .35s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}
.intro-sound-toggle:hover,
.intro-sound-toggle:focus-visible {
  border-color: rgba(230, 184, 109, .72);
  background: rgba(12, 10, 12, .7);
  transform: translateY(-2px);
}
.intro-sound-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.intro-sound-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.intro-sound-toggle svg > path:first-child { fill: currentColor; stroke: none; }
.intro-sound-toggle .sound-wave { display: none; }
.intro-sound-toggle.is-audible .sound-wave { display: block; }
.intro-sound-toggle.is-audible .sound-slash { display: none; }
.intro.is-revealed .intro-sound-toggle {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Stories */
.stories-view {
  position: relative;
  padding: 26px clamp(18px, 4vw, 68px) 70px;
  background:
    radial-gradient(circle at 50% -20%, rgba(125, 92, 229, .14), transparent 42rem),
    linear-gradient(155deg, #08080c, #111017 55%, #07070a);
}
.site-header {
  width: min(1440px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand-cluster { display:flex; align-items:center; gap:19px; }
.brand { display:grid; flex:0 0 auto; gap:3px; }
.brand strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.38rem;
  font-weight: 500;
  letter-spacing: .13em;
}
.brand-divider { width:1px; height:45px; flex:0 0 auto; background:linear-gradient(180deg,transparent,rgba(255,255,255,.2),transparent); }
.brand-mark::before { width: 22px; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.language-switcher {
  display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 10px;
  border:1px solid var(--line); border-radius:999px; background:rgba(7,7,10,.38);
  color:var(--muted); font-size:.7rem; font-weight:800; letter-spacing:.12em;
}
.language-switcher a { color:inherit; text-decoration:none; transition:color .2s ease; }
.language-switcher a:hover, .language-switcher a[aria-current="true"] { color:var(--accent); }
.language-switcher a[aria-current="true"] { cursor:default; }
.stories-saga-return { border-color:rgba(230,184,109,.34); }
.saga-experience { display:grid; gap:4px; color:#bdb5aa; text-decoration:none; transition:opacity .2s ease,transform .2s ease; }
.saga-experience > span { font-size:.57rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.saga-experience img { display:block; width:176px; height:30px; object-fit:contain; object-position:left center; }
.saga-experience:hover { opacity:.82; transform:translateY(-1px); }
.saga-experience:focus-visible { outline:2px solid var(--accent); outline-offset:5px; border-radius:3px; }
.stories-hero {
  width: min(920px, 100%);
  margin: clamp(38px, 5vh, 60px) auto clamp(26px, 3.6vh, 40px);
  text-align: center;
}
.stories-hero h1 {
  margin: 5px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.8rem, 5.2vw, 4.9rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.035em;
}
.stories-hero p:not(.eyebrow) {
  max-width: 590px;
  margin: 17px auto 0;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  line-height: 1.55;
}
.stories-showcase {
  width: min(1040px, 100%);
  margin: 0 auto;
  display: grid;
  justify-items: center;
  gap: clamp(28px, 4vw, 46px);
}
.stories-access-empty {
  width:min(680px,100%);
  padding:clamp(28px,5vw,48px);
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));
  border-radius:24px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 8%,rgba(11,12,16,.95)),rgba(5,7,9,.96));
  box-shadow:0 28px 70px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.045);
  text-align:center;
}
.stories-access-empty h2 { margin:8px 0 0; color:#fffaf3; font:400 clamp(1.8rem,4vw,2.75rem)/1.08 Georgia,serif; }
.stories-access-empty p { max-width:540px; margin:16px auto 23px; color:var(--muted); line-height:1.65; }
.stories-access-empty .button { display:inline-flex; }
.universe-list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 390px));
  justify-content: center;
  gap: clamp(20px, 3vw, 32px);
}
.universe-card {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 30px;
  overflow: hidden;
  color: white;
  background: #08080c;
  box-shadow: 0 28px 76px rgba(0,0,0,.46);
  cursor: pointer;
  text-align: left;
  isolation: isolate;
  font: inherit;
  transition: transform .35s cubic-bezier(.2,.75,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.universe-card__media,
.universe-card__image,
.universe-card__video,
.universe-card__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.universe-card__media {
  z-index: 0;
  display: block;
  overflow: hidden;
  background: #08080c;
}
.universe-card__image,
.universe-card__video {
  object-fit: cover;
  object-position: center;
  filter: saturate(.86) contrast(1.06) brightness(.82);
  transform: scale(1.015);
  transition: opacity .6s ease, filter .8s ease, transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.universe-card__video {
  z-index: 1;
  opacity: 0;
}
.universe-card.is-video-playing .universe-card__video { opacity: 1; }
.universe-card__veil {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(3,3,6,.22) 0%, transparent 31%, rgba(3,3,6,.1) 49%, rgba(3,3,6,.94) 84%, #050508 100%),
    linear-gradient(115deg, transparent 36%, color-mix(in srgb, var(--card-glow, var(--glow)) 15%, transparent) 100%);
}
.universe-card::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: .18;
  border-radius: inherit;
  box-shadow: inset 0 0 88px color-mix(in srgb, var(--card-glow, var(--glow)) 30%, transparent);
  transition: opacity .35s ease;
  pointer-events: none;
}
.universe-card__content {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(22px, 2.5vw, 30px);
}
.universe-card__hit-area {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.universe-card__hit-area:focus { outline: 0; }
.universe-card:hover,
.universe-card:focus-within,
.universe-card.is-active {
  border-color: var(--card-accent, var(--accent));
  box-shadow: 0 38px 96px rgba(0,0,0,.58), 0 0 0 1px color-mix(in srgb, var(--card-accent, var(--accent)) 20%, transparent), 0 0 74px color-mix(in srgb, var(--card-glow, var(--glow)) 13%, transparent);
  transform: translateY(-7px);
}
.universe-card:hover .universe-card__image,
.universe-card:hover .universe-card__video,
.universe-card:focus-within .universe-card__image,
.universe-card:focus-within .universe-card__video,
.universe-card.is-active .universe-card__image,
.universe-card.is-active .universe-card__video {
  filter: saturate(1) contrast(1.04) brightness(.92);
  transform: scale(1.055);
}
.universe-card:hover::after,
.universe-card:focus-within::after,
.universe-card.is-active::after { opacity: 1; }
.universe-card:focus-within { outline: 2px solid var(--card-accent, var(--accent)); outline-offset: 4px; }
.universe-card h2 {
  margin: 6px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.45rem, 4vw, 3.55rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.035em;
  text-shadow: 0 7px 34px rgba(0,0,0,.95);
}
.universe-card .eyebrow { font-size: .62rem; }
.universe-card__tagline {
  max-width: 31ch;
  margin: 10px 0 0;
  color: #eee6db;
  font: 400 .92rem/1.38 Georgia, serif;
  text-shadow: 0 3px 18px rgba(0,0,0,.92);
}
.universe-card-meta { display: flex; align-items:center; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.meta-pill {
  display:inline-flex;
  min-height:31px;
  align-items:center;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: #f0e8df;
  background: rgba(4,4,7,.46);
  font-size: .66rem;
  backdrop-filter: blur(12px);
}
.universe-card__enter {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.17);
  color: #fffaf3;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.universe-card__enter span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  color: #171006;
  background: var(--card-accent, var(--accent));
  font-size: 1rem;
  transition: transform .25s ease;
}
.universe-card:hover .universe-card__enter span,
.universe-card:focus-within .universe-card__enter span { transform: translateX(4px); }
.coming-card {
  min-height: 112px;
  grid-column: span 12;
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 22px 26px;
  border: 1px dashed rgba(255,255,255,.15);
  border-radius: 20px;
  color: var(--muted);
  background:
    radial-gradient(circle at 8% 50%, rgba(125,92,229,.15), transparent 24%),
    linear-gradient(110deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  text-align: left;
}
.coming-card__ornament {
  display:grid;
  width:52px;
  height:52px;
  flex:0 0 auto;
  place-items:center;
  color:var(--accent);
  border:1px solid rgba(230,184,109,.24);
  border-radius:16px;
  background:rgba(230,184,109,.07);
  font-size:1.2rem;
}
.coming-card__copy { flex:1 1 auto; }
.coming-card strong { display: block; color: #e6ddd2; font-family: Georgia, serif; font-size: 1.15rem; margin-bottom: 5px; }
.coming-card__copy span { font-size:.82rem; line-height:1.45; }
.stories-coming { min-height:92px; grid-column:auto; padding:17px; border-radius:18px; }
.stories-coming .coming-card__ornament { width:44px; height:44px; border-radius:13px; }
.saga-footer {
  width:min(1180px,100%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:clamp(46px,7vw,76px) auto 0;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.09);
  color:#77716b;
  font-size:.65rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.saga-footer span:last-child { color:#9c9183; }
.saga-signature {
  display:grid;
  width:max-content;
  gap:3px;
  color:#aaa197;
  text-decoration:none;
  transition:opacity .2s ease,transform .2s ease;
}
.saga-signature span { font-size:.54rem; font-weight:800; letter-spacing:.2em; line-height:1; text-transform:uppercase; }
.saga-signature img { display:block; width:118px; height:26px; object-fit:contain; object-position:left center; }
.saga-signature:hover { opacity:.82; transform:translateY(-1px); }
.saga-signature:focus-visible { outline:1px solid var(--accent); outline-offset:5px; border-radius:3px; }
.saga-signature--footer { justify-items:end; }
.saga-signature--footer img { object-position:right center; }
.stories-coming strong { font-size:1rem; }
.coming-card__status {
  flex:0 0 auto;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:#cfc4b8;
  background:rgba(0,0,0,.2);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* Universe */
.universe-view {
  position: relative;
  padding: 26px clamp(18px, 4vw, 68px) 70px;
  background: var(--universe-bg);
  isolation: isolate;
}
.universe-backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--hero-image) center/cover no-repeat;
  filter: saturate(.8);
}
.universe-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,5,8,.48), var(--universe-bg) 78%), radial-gradient(circle at 72% 24%, transparent, var(--universe-bg) 72%);
}
.universe-topbar { width: min(1440px,100%); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.universe-topbar-leading { display:flex; align-items:center; gap:18px; }
.universe-topbar-brand { display:grid; gap:3px; padding-left:17px; border-left:1px solid rgba(255,255,255,.12); }
.universe-topbar-brand .brand-mark { font-size:.66rem; letter-spacing:.24em; }
.universe-topbar-brand .brand-mark::before { width:19px; }
.universe-topbar-brand small { color:#8f877d; font-size:.54rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.universe-topbar-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.universe-reader {
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
  padding:5px 11px 5px 6px;
  border:1px solid rgba(230,184,109,.22);
  border-radius:999px;
  background:rgba(6,6,9,.38);
  backdrop-filter:blur(12px);
}
.universe-reader__avatar { display:grid; width:28px; height:28px; flex:0 0 auto; place-items:center; border:1px solid rgba(230,184,109,.46); border-radius:50%; color:#1d1309; background:var(--accent); font-size:.7rem; font-weight:900; }
.universe-reader__copy { min-width:0; display:grid; gap:1px; }
.universe-reader__copy small { color:#8f877d; font-size:.48rem; font-weight:800; letter-spacing:.15em; line-height:1; text-transform:uppercase; }
.universe-reader__copy strong { max-width:190px; overflow:hidden; color:#e9e1d6; font-size:.7rem; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.universe-hero {
  width:min(1180px,100%);
  min-height:0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding:clamp(74px,10vh,112px) 0 clamp(38px,5vw,56px);
}
.universe-hero h1 { margin:0; max-width:1000px; font:400 clamp(3.6rem,8vw,7.1rem)/.9 Georgia,serif; letter-spacing:-.04em; }
.universe-hero .tagline { max-width:720px; margin:16px 0 0; font:400 clamp(1.12rem,2.2vw,1.55rem)/1.45 Georgia,serif; }
.universe-hero .description { max-width:650px; margin:13px 0 0; color:var(--muted); line-height:1.6; }
.universe-content { width:min(1280px,100%); margin:0 auto; display:grid; gap:clamp(48px,6vw,72px); }
.section-title { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 18px; }
.section-title h2 { margin: 0; font: 400 clamp(1.8rem,4vw,3rem)/1 Georgia,serif; }
.section-title p { max-width: 540px; margin: 0; color: var(--muted); line-height: 1.5; }
.reading-progress {
  position:relative;
  overflow:hidden;
  padding:clamp(26px,3.5vw,42px) clamp(22px,3.6vw,44px) clamp(20px,3vw,34px);
  border:1px solid color-mix(in srgb,var(--accent) 21%,rgba(255,255,255,.08));
  border-radius:30px;
  background:
    radial-gradient(circle at 9% 0%,color-mix(in srgb,var(--glow) 15%,transparent),transparent 35%),
    linear-gradient(145deg,rgba(12,14,14,.88),rgba(5,7,7,.94));
  box-shadow:0 30px 85px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(10px);
}
.reading-progress::after {
  content:'';
  position:absolute;
  top:0;
  left:clamp(28px,5vw,70px);
  width:min(240px,38%);
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.65;
}
.reading-progress .section-title { margin-bottom:24px; }
.reading-progress .section-title h2 { font-size:clamp(2.25rem,4.2vw,3.55rem); }
.reading-progress-description { max-width:680px!important; margin-top:13px!important; color:#b9b2a9!important; font-size:.86rem; line-height:1.55!important; }
.characters-section { padding:0 clamp(4px,1vw,12px); }
.investigation-mode-rail {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  max-width:760px;
  margin-inline:auto;
  padding:5px 3px 22px;
}
.investigation-mode {
  position:relative;
  min-height:132px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:14px;
  padding:20px;
  border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));
  border-radius:18px;
  color:var(--text);
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 8%,#101116),rgba(7,8,11,.9));
  box-shadow:0 17px 34px rgba(0,0,0,.25);
  cursor:pointer;
  text-align:left;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.investigation-mode__marker {
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);
  border-radius:50%;
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  font:700 1rem/1 Georgia,serif;
}
.investigation-mode__copy { display:grid; gap:6px; }
.investigation-mode small { color:var(--accent); font-size:.66rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.investigation-mode strong { color:#fffaf3; font:400 1.15rem/1.1 Georgia,serif; }
.investigation-mode__copy > span { color:#c9c1b7; font-size:.74rem; line-height:1.4; }
.investigation-mode:hover,
.investigation-mode:focus-visible { transform:translateY(-3px); border-color:var(--accent); box-shadow:0 22px 44px rgba(0,0,0,.38),0 0 28px color-mix(in srgb,var(--glow) 13%,transparent); outline:0; }
.investigation-mode.active { border-color:color-mix(in srgb,var(--accent) 82%,white); background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 18%,#11131a),rgba(7,8,11,.94)); box-shadow:0 24px 48px rgba(0,0,0,.42),0 0 0 1px color-mix(in srgb,var(--accent) 58%,transparent),0 0 42px color-mix(in srgb,var(--glow) 24%,transparent); }
.investigation-mode.active .investigation-mode__marker { color:#fff; border-color:var(--accent); background:color-mix(in srgb,var(--accent) 32%,transparent); }
@media (max-width:700px) {
  .investigation-mode-rail { grid-template-columns:1fr; }
  .investigation-mode { min-height:0; }
}
.characters-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; }
.character-card {
  position: relative;
  min-height: 348px;
  display: grid;
  grid-template-rows: 220px 1fr;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 21px;
  color: var(--text);
  background: linear-gradient(155deg,color-mix(in srgb,var(--accent) 6%,#111116),#08080b);
  box-shadow:0 18px 46px rgba(0,0,0,.27);
  cursor: pointer;
  text-align: left;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s ease,box-shadow .3s ease;
  isolation: isolate;
}
.character-card img.character-card__avatar { width:100%; height:220px; object-fit:cover; object-position:top center; filter:saturate(.78) contrast(1.04); transition:filter .5s ease,transform .7s ease; }
.character-card .character-monogram {
  position:relative;
  display:grid;
  width:100%;
  height:220px;
  place-items:center;
  overflow:hidden;
  color:color-mix(in srgb,var(--accent) 70%,white);
  background:
    radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--glow) 34%,transparent),transparent 37%),
    linear-gradient(var(--character-angle),color-mix(in srgb,var(--accent) 14%,#17201c),#070909 72%);
  font:400 6rem/1 Georgia,serif;
  text-shadow:0 0 38px color-mix(in srgb,var(--glow) 40%,transparent);
}
.character-card .character-monogram::before,
.character-card .character-monogram::after { content:''; position:absolute; border:1px solid color-mix(in srgb,var(--accent) 18%,transparent); border-radius:50%; }
.character-card .character-monogram::before { width:145px; height:145px; }
.character-card .character-monogram::after { width:188px; height:188px; border-style:dashed; opacity:.55; }
.character-card > div { position:relative; z-index:2; padding:18px 18px 19px; border-top:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg,rgba(15,15,20,.94),#09090c); }
.character-card:hover { transform:translateY(-6px); border-color:var(--accent); box-shadow:0 28px 60px rgba(0,0,0,.42),0 0 35px color-mix(in srgb,var(--glow) 10%,transparent); }
.character-card:hover img.character-card__avatar { filter:saturate(1) contrast(1.03); transform:scale(1.04); }
.character-card:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.character-card h3 { margin:0; font:400 1.7rem/1 Georgia,serif; }
.character-card p { margin:9px 0 0; color:#c9c1b7; font-size:.82rem; line-height:1.45; }
.character-card small { display:block; margin-bottom:7px; color:var(--accent); font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.character-card__action { display:block; margin-top:15px; padding-top:13px; border-top:1px solid rgba(255,255,255,.09); color:#f1e8dc; font-size:.69rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.character-card.is-locked { cursor:default; filter:saturate(.45); opacity:.72; }
.character-card.is-locked:hover { transform:none; border-color:var(--line); box-shadow:none; }
.character-card.is-locked .character-card__avatar { filter:grayscale(.7) brightness(.5); }
.character-card.is-locked .character-card__action { color:#8d8c87; }
.chat-character-button.is-locked { opacity:.48; cursor:not-allowed; filter:grayscale(.65); }

/* Chat */
.chat-view { height: 100vh; padding: 14px; background: var(--universe-bg); overflow: hidden; }
.chat-backdrop { position: fixed; inset: 0; z-index: -2; background: var(--hero-image) center/cover no-repeat; opacity: .28; filter: blur(3px) saturate(.6); transform: scale(1.03); }
.chat-backdrop::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg,var(--universe-bg) 0%,rgba(7,7,10,.83) 48%,var(--universe-bg) 100%); }
.chat-layout { height: calc(100vh - 28px); display: grid; grid-template-columns: minmax(270px,340px) minmax(0,1fr); gap: 13px; }
.chat-sidebar, .chat-shell { border:1px solid var(--line); border-radius:22px; background:var(--panel); box-shadow:var(--shadow); backdrop-filter:blur(18px); }
.chat-sidebar { display:flex; flex-direction:column; gap:18px; padding:18px; overflow:auto; }
.chat-sidebar-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.chat-saga-return { width:100%; margin-top:auto; }
.saga-signature--chat { align-self:center; justify-items:center; margin-top:-7px; }
.saga-signature--chat img { object-position:center; }
.chat-universe { padding:14px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.035); }
.chat-universe h2 { margin:0; font:400 1.45rem/1.1 Georgia,serif; }
.chat-universe p { margin:8px 0 0; color:var(--muted); font-size:.82rem; line-height:1.45; }
.investigation-mode-control { display:grid; gap:7px; color:#e6ddd2; font-size:.78rem; font-weight:750; }
.investigation-mode-control select { width:100%; padding:10px; border:1px solid var(--line); border-radius:11px; color:var(--text); background:rgba(6,6,9,.78); }
.chat-character-list { display:grid; gap:8px; }
.chat-character-button { display:grid; grid-template-columns:42px 1fr; align-items:center; gap:10px; padding:9px; border:1px solid var(--line); border-radius:13px; color:var(--text); background:rgba(255,255,255,.025); cursor:pointer; text-align:left; }
.chat-character-button.active { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); }
.chat-character-button__avatar { display:grid; width:42px; height:42px; place-items:center; object-fit:cover; object-position:top; border-radius:50%; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,#17151b); font:400 1.15rem/1 Georgia,serif; }
.chat-character-button span { display:grid; gap:2px; }
.chat-character-button small { color:var(--muted); font-size:.7rem; }
.conversation-panel { display:grid; gap:10px; padding-top:4px; border-top:1px solid var(--line); }
.conversation-panel-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.conversation-panel-head h3 { margin:0; color:#e6ddd2; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
.conversation-list { display:grid; gap:7px; }
.conversation-item { display:grid; grid-template-columns:minmax(0,1fr) 36px; align-items:stretch; gap:6px; }
.conversation-button { display:grid; gap:4px; width:100%; padding:10px; overflow:hidden; border:1px solid var(--line); border-radius:12px; color:var(--text); background:rgba(255,255,255,.025); cursor:pointer; text-align:left; }
.conversation-button:hover, .conversation-button.active { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); }
.conversation-button strong, .conversation-button small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversation-button strong { font-size:.76rem; }
.conversation-button small { color:var(--muted); font-size:.67rem; }
.conversation-delete { display:grid; min-width:36px; place-items:center; padding:0; border:1px solid var(--line); border-radius:11px; color:var(--muted); background:rgba(255,255,255,.02); cursor:pointer; transition:border-color .2s ease,color .2s ease,background .2s ease; }
.conversation-delete svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.conversation-delete:hover { border-color:rgba(255,132,112,.48); color:#ff9d8a; background:rgba(163,50,35,.13); }
.conversation-delete:focus-visible { outline:2px solid #ff9d8a; outline-offset:2px; }
.conversation-delete:disabled { opacity:.45; cursor:wait; }
.conversation-empty { margin:0; color:var(--muted); font-size:.72rem; line-height:1.45; }
.chat-shell { min-width:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; }
.chat-head { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:13px 18px; border-bottom:1px solid var(--line); background:rgba(8,8,11,.62); }
.chat-head > div:last-child { display:flex; align-items:center; gap:10px; }
.plan-status { display:grid; gap:1px; min-width:92px; padding:7px 11px; border:1px solid rgba(214,179,106,.28); border-radius:12px; color:var(--text); background:rgba(214,179,106,.07); cursor:pointer; text-align:left; }
.plan-status strong { color:var(--accent); font-size:.57rem; letter-spacing:.12em; }
.plan-status small { color:var(--muted); font-size:.62rem; }
.plan-status.is-premium { border-color:rgba(214,179,106,.55); background:linear-gradient(135deg,rgba(214,179,106,.17),rgba(104,76,160,.1)); }
.speech-toggle { display:inline-flex; min-height:34px; align-items:center; gap:7px; padding:5px 9px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.025); cursor:pointer; font:inherit; font-size:.68rem; letter-spacing:.03em; transition:border-color .2s ease,color .2s ease,background .2s ease,box-shadow .2s ease; }
.speech-toggle:hover { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); color:#f0e7dc; }
.speech-toggle.is-active { border-color:color-mix(in srgb,var(--accent) 68%,transparent); color:#fff3df; background:color-mix(in srgb,var(--accent) 15%,rgba(255,255,255,.025)); box-shadow:0 0 18px color-mix(in srgb,var(--accent) 14%,transparent); }
.speech-toggle.is-locked { border-color:rgba(214,179,106,.3); color:#c9ad79; background:rgba(214,179,106,.06); }
.speech-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.speech-toggle[hidden] { display:none; }
.speech-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.speech-toggle svg path:first-child { fill:color-mix(in srgb,var(--accent) 65%,transparent); }
.speech-toggle small { display:grid; min-width:19px; min-height:19px; place-items:center; border-radius:50%; color:#17100a; background:var(--accent); font-size:.52rem; font-weight:900; letter-spacing:0; }
.speech-toggle__loader { width:14px; height:14px; border:2px solid rgba(255,255,255,.2); border-top-color:var(--accent); border-radius:50%; animation:speech-spin .7s linear infinite; }
.casebook-trigger { display:inline-flex; min-height:34px; align-items:center; gap:7px; padding:5px 9px; border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line)); border-radius:999px; color:#f3e9dc; background:color-mix(in srgb,var(--accent) 8%,rgba(255,255,255,.025)); cursor:pointer; font:inherit; font-size:.68rem; letter-spacing:.03em; transition:border-color .2s ease,background .2s ease,box-shadow .2s ease; }
.casebook-trigger:hover, .casebook-trigger[aria-expanded="true"] { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,rgba(255,255,255,.025)); box-shadow:0 0 20px color-mix(in srgb,var(--accent) 12%,transparent); }
.casebook-trigger:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.casebook-trigger svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.casebook-trigger small { display:grid; min-width:19px; min-height:19px; place-items:center; border-radius:50%; color:#17100a; background:var(--accent); font-size:.56rem; font-weight:900; }
.casebook-trigger small[hidden] { display:none; }
.chat-person { display:flex; align-items:center; gap:12px; }
.chat-avatar { width:50px; height:50px; border:1px solid var(--line-strong); border-radius:50%; object-fit:cover; object-position:top; background:#17151b; }
.chat-avatar-fallback { display:grid; flex:0 0 auto; place-items:center; color:var(--accent); background:color-mix(in srgb,var(--accent) 13%,#17151b); font:400 1.4rem/1 Georgia,serif; }
.chat-avatar-fallback[hidden] { display:none; }
.chat-person h2 { margin:0; font:400 1.35rem/1 Georgia,serif; }
.chat-person p { margin:5px 0 0; color:var(--muted); font-size:.75rem; }
.messages { min-height:0; overflow-y:auto; padding:22px clamp(14px,4vw,55px); display:flex; flex-direction:column; gap:12px; scroll-behavior:smooth; }
.bubble { max-width:min(720px,82%); padding:13px 16px; border:1px solid var(--line); border-radius:18px; line-height:1.55; box-shadow:0 12px 30px rgba(0,0,0,.18); }
.bubble__text { display:block; white-space:pre-wrap; }
.bubble.bot { align-self:flex-start; background:rgba(20,18,23,.82); border-bottom-left-radius:5px; }
.bubble.user { align-self:flex-end; color:#211406; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 88%,white 12%),color-mix(in srgb,var(--accent) 68%,#905535 32%)); border-bottom-right-radius:5px; }
.bubble.status { align-self:center; max-width:90%; padding:8px 11px; border-style:dashed; color:var(--muted); background:rgba(8,8,11,.45); font-size:.74rem; text-align:center; }
.bubble-actions { display:flex; justify-content:flex-end; margin-top:10px; padding-top:8px; border-top:1px solid rgba(255,255,255,.07); }
.bubble-save-clue { padding:0; border:0; color:color-mix(in srgb,var(--accent) 84%,white); background:transparent; cursor:pointer; font:inherit; font-size:.65rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.bubble-save-clue::before { content:'+'; display:inline-grid; width:16px; height:16px; margin-right:6px; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:.72rem; line-height:1; }
.bubble-save-clue:hover { color:#fff4e3; }
.bubble-save-clue.is-saved { color:#85baa0; cursor:default; }
.bubble-save-clue.is-saved::before { content:'\2713'; }
.bubble-save-clue:disabled:not(.is-saved) { opacity:.58; cursor:wait; }
@keyframes speech-spin { to { transform:rotate(360deg); } }
.composer { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:13px; border-top:1px solid var(--line); background:rgba(8,8,11,.74); }
.composer-status { display:flex; justify-content:space-between; gap:12px; padding:7px 18px 0; border-top:1px solid var(--line); color:#777974; background:rgba(8,8,11,.74); font-size:.6rem; }
.composer-status span:first-child { color:var(--muted); font-variant-numeric:tabular-nums; }
.composer-status.is-near-limit span:first-child { color:#e7b768; }
.composer-status.is-over-limit span:first-child { color:#ef9b89; }
.composer input { min-width:0; padding:0 16px; border:1px solid var(--line); border-radius:999px; color:var(--text); background:rgba(4,4,7,.75); outline:none; }
.composer input:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent); }

/* Cuaderno del caso */
body.casebook-open { overflow:hidden; }
.casebook-backdrop { position:fixed; inset:0; z-index:130; opacity:0; background:rgba(1,5,7,.69); backdrop-filter:blur(5px); transition:opacity .22s ease; }
.casebook-backdrop.is-open { opacity:1; }
.casebook-drawer { position:fixed; top:0; right:0; z-index:140; width:min(540px,100vw); height:100dvh; overflow:hidden; border-left:1px solid color-mix(in srgb,var(--accent) 45%,rgba(255,255,255,.08)); color:#ece8e0; background:linear-gradient(145deg,rgba(17,25,28,.99),rgba(6,11,14,.995) 58%,rgba(8,13,16,.995)); box-shadow:-35px 0 90px rgba(0,0,0,.58); transform:translateX(102%); transition:transform .24s cubic-bezier(.22,.75,.26,1); }
.casebook-drawer::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.18; background-image:linear-gradient(rgba(214,179,106,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(214,179,106,.025) 1px,transparent 1px); background-size:31px 31px; mask-image:linear-gradient(to bottom,#000,transparent 88%); }
.casebook-drawer.is-open { transform:translateX(0); }
.casebook-head { position:relative; z-index:1; display:flex; min-height:104px; align-items:center; justify-content:space-between; gap:18px; padding:20px 23px; border-bottom:1px solid rgba(214,179,106,.19); background:rgba(4,9,12,.7); }
.casebook-head .eyebrow { margin:0 0 7px; }
.casebook-head h2 { margin:0; font:400 clamp(1.65rem,4vw,2.2rem)/1 Georgia,serif; }
.casebook-close { flex:0 0 auto; width:38px; height:38px; border:1px solid rgba(255,255,255,.13); border-radius:50%; color:#d7d0c7; background:rgba(255,255,255,.025); cursor:pointer; font:300 1.45rem/1 sans-serif; }
.casebook-close:hover { border-color:var(--accent); color:#fff; }
.casebook-close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.casebook-body { position:relative; z-index:1; height:calc(100dvh - 104px); padding:22px 23px 45px; overflow-y:auto; overscroll-behavior:contain; scrollbar-color:rgba(214,179,106,.35) transparent; }
.casebook-summary { margin:0 0 27px; color:#bab9b3; font-size:.85rem; line-height:1.65; }
.casebook-cover { width:100%; height:190px; display:block; margin:-6px 0 27px; border:1px solid color-mix(in srgb,var(--accent) 28%,rgba(255,255,255,.08)); border-radius:16px; object-fit:cover; object-position:center 43%; filter:saturate(.8) contrast(1.04) brightness(.82); box-shadow:0 18px 42px rgba(0,0,0,.34); }
.casebook-cover[hidden] { display:none; }
.casebook-section { display:grid; gap:13px; margin-top:28px; padding-top:25px; border-top:1px solid rgba(214,179,106,.18); }
.casebook-section:first-of-type { margin-top:0; }
.casebook-section__head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.casebook-section__head > div { display:flex; align-items:center; gap:9px; }
.casebook-section__head span { display:grid; width:28px; height:28px; place-items:center; border:1px solid rgba(214,179,106,.33); border-radius:50%; color:var(--accent); font-size:.58rem; font-weight:900; }
.casebook-section__head h3 { margin:0; font:400 1.2rem/1.1 Georgia,serif; }
.casebook-section__head > small { color:#858681; font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.casebook-help { margin:-2px 0 1px; color:#8f918d; font-size:.72rem; line-height:1.55; }
.case-premium-hints { display:grid; gap:9px; }
.case-premium-hint { padding:14px; border:1px solid rgba(214,179,106,.24); border-radius:14px; background:linear-gradient(135deg,rgba(214,179,106,.08),rgba(71,55,99,.07)); }
.case-premium-hint small { color:var(--accent); font-size:.57rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.case-premium-hint h4 { margin:5px 0 6px; font:400 1.02rem/1.2 Georgia,serif; }
.case-premium-hint p { margin:0; color:#b7b5af; font-size:.72rem; line-height:1.55; }
.case-hint-unlock { width:100%; }
.case-hint-feedback { min-height:1em; color:#d2a96c; font-size:.7rem; line-height:1.45; }
.case-hint-feedback.is-error { color:#ef9b89; }
.casebook-evidence { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.casebook-evidence-card { min-width:0; padding:12px; border:1px solid rgba(214,179,106,.17); border-radius:13px; background:rgba(255,255,255,.025); }
.casebook-evidence-card small { display:block; margin-bottom:7px; color:var(--accent); font-size:.52rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.casebook-evidence-card strong { display:block; color:#f4eee4; font:400 .98rem/1.15 Georgia,serif; }
.casebook-evidence-card p { margin:7px 0 0; color:#9d9e99; font-size:.64rem; line-height:1.45; }
.case-acts { display:grid; gap:8px; }
.case-act { display:grid; grid-template-columns:34px minmax(0,1fr); gap:11px; align-items:start; padding:12px; border:1px dashed rgba(255,255,255,.1); border-radius:13px; opacity:.54; background:rgba(255,255,255,.015); }
.case-act.is-unlocked { border-style:solid; border-color:rgba(214,179,106,.25); opacity:1; background:linear-gradient(135deg,rgba(214,179,106,.07),rgba(255,255,255,.015)); }
.case-act > span { display:grid; width:31px; height:31px; place-items:center; border:1px solid rgba(214,179,106,.3); border-radius:50%; color:var(--accent); font:700 .68rem/1 Georgia,serif; }
.case-act strong { display:block; color:#eee6db; font:400 .98rem/1.2 Georgia,serif; }
.case-act p { margin:5px 0 0; color:#92938e; font-size:.64rem; line-height:1.5; }
.case-investigations,.case-confrontations { display:grid; gap:11px; }
.case-investigation,.case-confrontation { display:grid; gap:10px; padding:15px; border:1px solid rgba(214,179,106,.19); border-radius:15px; background:linear-gradient(145deg,rgba(214,179,106,.045),rgba(255,255,255,.012)); }
.case-investigation.is-completed,.case-confrontation.is-completed { border-color:rgba(92,194,141,.37); background:linear-gradient(145deg,rgba(65,137,99,.1),rgba(255,255,255,.012)); }
.case-investigation.is-locked,.case-confrontation.is-locked { border-style:dashed; opacity:.7; }
.case-investigation > header,.case-confrontation > header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.case-investigation > header small,.case-confrontation > header small { color:var(--accent); font-size:.54rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.case-investigation > header span,.case-confrontation > header span { color:#858984; font-size:.52rem; font-weight:800; text-transform:uppercase; }
.case-investigation h4,.case-confrontation h4 { margin:0; color:#f2ece2; font:400 1.08rem/1.2 Georgia,serif; }
.case-investigation > p,.case-confrontation > p { margin:0; color:#9b9d98; font-size:.67rem; line-height:1.52; }
.case-investigation__actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(125px,1fr)); gap:7px; }
.case-investigation__finding,.case-confrontation__result { padding:12px; border:1px solid rgba(92,194,141,.29); border-radius:11px; background:rgba(54,128,87,.1); }
.case-investigation__finding strong,.case-confrontation__result strong { display:block; color:#8dd0aa; font-size:.61rem; letter-spacing:.06em; text-transform:uppercase; }
.case-investigation__finding p,.case-confrontation__result p { margin:6px 0 0; color:#b9c9bd; font-size:.67rem; line-height:1.52; }
.case-confrontation blockquote { margin:0; padding:11px 12px; border-left:2px solid var(--accent); color:#d9c6a7; background:rgba(214,179,106,.055); font:italic .76rem/1.52 Georgia,serif; }
.case-confrontation__evidence { display:grid; gap:6px; }
.case-confrontation__evidence label { display:flex; align-items:flex-start; gap:8px; padding:9px 10px; border:1px solid rgba(255,255,255,.08); border-radius:9px; color:#b9b9b3; background:rgba(0,0,0,.12); font-size:.63rem; line-height:1.4; cursor:pointer; }
.case-confrontation__evidence input { margin-top:2px; accent-color:var(--accent); }
.case-evidence-match { display:grid; gap:8px; }
.case-evidence-match label { display:grid; gap:6px; }
.case-evidence-match label > span { color:#c5c0b7; font-size:.64rem; line-height:1.4; }
.case-evidence-match select { width:100%; min-height:40px; padding:8px 10px; border:1px solid rgba(255,255,255,.1); border-radius:9px; color:#e5ddd1; background:#111116; font:inherit; font-size:.64rem; }
.casebook-ending { margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.1); }
.casebook-ending strong { color:var(--accent); font:400 1rem/1.2 Georgia,serif; }
.casebook-ending p { margin:6px 0 0; }
.casebook-notes { display:grid; gap:9px; }
.casebook-empty { display:grid; grid-template-columns:35px 1fr; align-items:start; gap:10px; padding:15px; border:1px dashed rgba(214,179,106,.2); border-radius:14px; color:#898b87; background:rgba(255,255,255,.015); }
.casebook-empty span { color:var(--accent); font:400 1.5rem/1 Georgia,serif; }
.casebook-empty p { margin:0; font-size:.7rem; line-height:1.55; }
.casebook-note { padding:14px; border:1px solid rgba(214,179,106,.19); border-radius:14px; background:linear-gradient(135deg,rgba(214,179,106,.055),rgba(255,255,255,.018)); }
.casebook-note header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.casebook-note header span { color:var(--accent); font-size:.67rem; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.casebook-note header small { color:#747773; font-size:.55rem; letter-spacing:.08em; text-transform:uppercase; }
.casebook-note p { max-height:170px; margin:10px 0; overflow:auto; color:#c8c6bf; font-size:.74rem; line-height:1.55; white-space:pre-wrap; }
.casebook-note__remove { padding:0; border:0; color:#7d807b; background:transparent; cursor:pointer; font:inherit; font-size:.6rem; text-decoration:underline; text-underline-offset:3px; }
.casebook-note__remove:hover { color:#e6a28f; }
.casebook-note__remove:disabled { opacity:.45; cursor:wait; }
.case-challenges { display:grid; gap:12px; }
.case-challenge { display:grid; gap:12px; padding:16px; overflow:hidden; border:1px solid rgba(214,179,106,.2); border-radius:16px; background:linear-gradient(145deg,rgba(214,179,106,.055),rgba(255,255,255,.016)); transition:border-color .2s ease,background .2s ease; }
.case-challenge.is-completed { border-color:rgba(92,194,141,.4); background:linear-gradient(145deg,rgba(65,137,99,.11),rgba(255,255,255,.016)); }
.case-challenge.is-locked { border-style:dashed; background:rgba(255,255,255,.012); }
.case-challenge > header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.case-challenge > header small { color:var(--accent); font-size:.55rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.case-challenge > header span { padding:4px 7px; border:1px solid rgba(255,255,255,.09); border-radius:999px; color:#858984; font-size:.52rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.case-challenge.is-completed > header span { border-color:rgba(92,194,141,.3); color:#85c7a4; }
.case-challenge h4 { margin:0; color:#f2ece2; font:400 1.13rem/1.15 Georgia,serif; }
.case-challenge__instructions { margin:-4px 0 0; color:#999b96; font-size:.68rem; line-height:1.55; }
.case-challenge__lock { padding:13px; border:1px solid rgba(255,255,255,.07); border-radius:11px; color:#92948f; background:rgba(0,0,0,.15); font-size:.67rem; line-height:1.5; }
.case-sequence { display:grid; gap:7px; }
.case-sequence__item { display:grid; grid-template-columns:28px 1fr; align-items:center; gap:9px; width:100%; min-height:44px; padding:7px 10px 7px 7px; border:1px solid rgba(255,255,255,.09); border-radius:11px; color:#b8b8b2; background:rgba(2,7,9,.43); cursor:pointer; font:inherit; font-size:.66rem; line-height:1.4; text-align:left; transition:border-color .15s ease,color .15s ease,background .15s ease,transform .15s ease; }
.case-sequence__item:hover:not(:disabled) { border-color:color-mix(in srgb,var(--accent) 48%,rgba(255,255,255,.09)); color:#eee9df; transform:translateX(2px); }
.case-sequence__item > span:first-child { display:grid; width:27px; height:27px; place-items:center; border:1px solid rgba(255,255,255,.11); border-radius:50%; color:#70746f; font-size:.61rem; font-weight:900; }
.case-sequence__item.is-selected { border-color:color-mix(in srgb,var(--accent) 52%,rgba(255,255,255,.09)); color:#f0eae0; background:color-mix(in srgb,var(--accent) 9%,rgba(2,7,9,.43)); }
.case-sequence__item.is-selected > span:first-child { border-color:var(--accent); color:#17100a; background:var(--accent); }
.case-sequence__item:disabled { cursor:default; }
.case-challenge__actions { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px; }
.case-challenge__secondary { min-height:38px; padding:0 11px; border:1px solid rgba(255,255,255,.1); border-radius:9px; color:#a5a7a1; background:rgba(255,255,255,.02); cursor:pointer; font:inherit; font-size:.62rem; }
.case-challenge__secondary:hover:not(:disabled) { border-color:var(--accent); color:#eee9df; }
.case-challenge__secondary:disabled { opacity:.4; cursor:default; }
.case-challenge__submit { min-height:40px; padding:9px 14px; font-size:.65rem; }
.case-word-grid { --grid-size:9; width:min(100%,360px); display:grid; grid-template-columns:repeat(var(--grid-size),minmax(0,1fr)); gap:4px; margin-inline:auto; }
.case-word-grid__cell { aspect-ratio:1; min-width:0; padding:0; border:1px solid rgba(255,255,255,.09); border-radius:6px; color:#d2d0c8; background:rgba(2,7,9,.55); cursor:pointer; font:800 clamp(.58rem,2.2vw,.76rem)/1 ui-monospace,SFMono-Regular,Consolas,monospace; transition:border-color .12s ease,color .12s ease,background .12s ease,transform .12s ease; }
.case-word-grid__cell:hover:not(:disabled) { border-color:var(--accent); color:#fff; transform:scale(1.06); }
.case-word-grid__cell.is-start { border-color:var(--accent); color:#1c1208; background:var(--accent); box-shadow:0 0 13px color-mix(in srgb,var(--accent) 30%,transparent); }
.case-word-grid__cell.is-found { border-color:rgba(92,194,141,.46); color:#a8dfc0; background:rgba(55,127,88,.24); }
.case-word-grid__cell:focus-visible,.case-sequence__item:focus-visible,.case-challenge__secondary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.case-word-list { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.case-word-list span { padding:5px 8px; border:1px solid rgba(255,255,255,.08); border-radius:999px; color:#8e918c; font-size:.55rem; font-weight:850; letter-spacing:.08em; }
.case-word-list span.is-found { border-color:rgba(92,194,141,.34); color:#91cfad; text-decoration:line-through; text-decoration-thickness:1px; }
.case-word-cancel { width:100%; }
.case-challenge__feedback { padding:10px 11px; border-left:2px solid var(--accent); color:#d4bc95; background:rgba(214,179,106,.055); font-size:.65rem; line-height:1.48; }
.case-challenge__reward { padding:13px; border:1px solid rgba(92,194,141,.29); border-radius:12px; background:rgba(54,128,87,.1); }
.case-challenge__reward strong { display:block; color:#8dd0aa; font-size:.62rem; letter-spacing:.07em; text-transform:uppercase; }
.case-challenge__reward p { margin:6px 0 0; color:#b9c9bd; font-size:.69rem; line-height:1.55; }
.casebook-fields { display:grid; gap:10px; }
.casebook-field { display:grid; gap:8px; padding:12px; border:1px solid rgba(255,255,255,.09); border-radius:13px; background:rgba(255,255,255,.018); transition:border-color .2s ease,background .2s ease; }
.casebook-field > span:first-child { display:flex; align-items:center; gap:8px; }
.casebook-field > span:first-child small { color:var(--accent); font-size:.55rem; font-weight:900; }
.casebook-field > span:first-child strong { font-size:.72rem; }
.casebook-field select { width:100%; min-height:41px; padding:0 10px; border:1px solid rgba(255,255,255,.11); border-radius:9px; color:#ece8e0; background:#0a1013; font:inherit; font-size:.72rem; outline:none; }
.casebook-field select:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent); }
.casebook-field.is-correct { border-color:rgba(100,190,143,.42); background:rgba(66,137,99,.08); }
.casebook-field.is-incorrect { border-color:rgba(215,155,98,.36); background:rgba(166,105,49,.07); }
.casebook-field__feedback { color:#b9b9b3; font-size:.65rem; line-height:1.48; }
.casebook-field.is-correct .casebook-field__feedback { color:#87c5a5; }
.casebook-field.is-incorrect .casebook-field__feedback { color:#dfb47e; }
.casebook-submit { width:100%; min-height:44px; margin-top:2px; }
.casebook-result { padding:15px; border:1px solid rgba(214,179,106,.29); border-radius:14px; background:rgba(214,179,106,.07); }
.casebook-result strong { display:block; color:var(--accent); font:400 1.12rem/1.15 Georgia,serif; }
.casebook-result p { margin:7px 0 0; color:#bbb9b3; font-size:.72rem; line-height:1.55; }
.casebook-result.is-solved { border-color:rgba(92,194,141,.42); background:linear-gradient(135deg,rgba(64,139,100,.15),rgba(214,179,106,.06)); }
.casebook-result.is-solved strong { color:#8bd0aa; }
.casebook-result.is-error { border-color:rgba(225,119,96,.4); color:#efab9c; background:rgba(162,63,43,.1); font-size:.72rem; }

.auth-overlay { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px; background:rgba(2,2,4,.84); backdrop-filter:blur(15px); }
.auth-card { position:relative; width:min(440px,100%); padding:26px; border:1px solid var(--line-strong); border-radius:23px; background:var(--panel-strong); box-shadow:var(--shadow); text-align:center; }
.auth-card h2 { margin:6px 0 9px; font:400 2rem/1 Georgia,serif; }
.auth-card p { color:var(--muted); line-height:1.55; }
.store-card { width:min(760px,100%); max-height:min(90vh,760px); overflow:auto; text-align:left; }
.store-card > .eyebrow, .store-card > h2, .store-card > p { text-align:center; }
.store-plans { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-top:20px; }
.store-plan { padding:18px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.025); }
.store-plan.featured { border-color:rgba(214,179,106,.5); background:linear-gradient(145deg,rgba(214,179,106,.13),rgba(82,58,125,.08)); }
.store-plan > small { color:var(--accent); font-size:.58rem; font-weight:900; letter-spacing:.14em; }
.store-plan h3 { margin:8px 0 10px; font:400 1.35rem/1.1 Georgia,serif; }
.store-plan ul { display:grid; gap:7px; margin:0; padding-left:18px; color:#aaa9a4; font-size:.72rem; line-height:1.45; }
.store-credits { margin-top:14px; padding:15px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.02); }
.store-credits strong { color:var(--accent); }
.store-credits p, .store-availability { margin:6px 0 0; font-size:.7rem; }
.auth-close { position:absolute; top:10px; right:12px; width:36px; height:36px; border:0; color:var(--muted); background:transparent; cursor:pointer; font-size:1.5rem; }
.auth-form { display:grid; gap:10px; margin-top:19px; }
.auth-form input { min-height:46px; padding:0 13px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:#08080c; }
.auth-error { min-height:20px; margin-top:9px; color:#ffad9b; font-size:.82rem; }
.auth-error.success { color:#96e1b4; }
.auth-mode-toggle { border:0; color:var(--accent); background:transparent; cursor:pointer; font:inherit; font-size:.82rem; }

@keyframes cinematic-drift { from { transform:scale(1.03); } to { transform:scale(1.1); } }
@keyframes intro-imagina-halo { 0%,100% { opacity:.5; transform:scale(.96); } 50% { opacity:.92; transform:scale(1.04); } }
@keyframes intro-imagina-art { 0%,100% { filter:drop-shadow(0 13px 28px rgba(0,0,0,.7)) drop-shadow(0 0 10px rgba(230,184,109,.26)); } 50% { filter:brightness(1.06) drop-shadow(0 14px 31px rgba(0,0,0,.72)) drop-shadow(0 0 22px rgba(230,184,109,.56)); } }

@media (max-width: 900px) {
  .universe-list { max-width:780px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stories-coming { width:min(780px,100%); }
  .coming-card { min-height:0; }
  .chat-view { height:auto; min-height:100vh; overflow:auto; }
  .chat-layout { height:auto; min-height:calc(100vh - 28px); grid-template-columns:1fr; }
  .chat-sidebar { max-height:none; }
  .chat-character-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .chat-shell { min-height:72vh; }
  .messages { min-height:52vh; }
}

@media (max-width: 620px) {
  .stories-view, .universe-view { padding:18px 12px 46px; }
  .site-header { align-items:flex-start; flex-wrap:wrap; }
  .header-actions { width:100%; justify-content:flex-end; }
  .brand-cluster { width:100%; justify-content:space-between; gap:10px; }
  .brand .brand-mark { font-size:.52rem; letter-spacing:.14em; }
  .brand .brand-mark::before { width:14px; }
  .brand strong { font-size:1.2rem; }
  .brand-divider { height:38px; }
  .saga-experience > span { font-size:.49rem; letter-spacing:.16em; }
  .saga-experience img { width:132px; height:24px; }
  .stories-hero { margin-top:42px; margin-bottom:27px; text-align:center; }
  .stories-hero h1 { font-size:clamp(2.65rem,13vw,3.6rem); }
  .stories-hero p:not(.eyebrow) { max-width:320px; margin-inline:auto; }
  .stories-showcase { width:100%; gap:24px; }
  .universe-list {
    width:calc(100% + 24px);
    max-width:none;
    display:flex;
    justify-content:flex-start;
    gap:15px;
    margin-inline:-12px;
    padding:5px 12px 20px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:12px;
    scrollbar-width:none;
  }
  .universe-list::-webkit-scrollbar { display:none; }
  .universe-card {
    width:min(84vw,360px);
    flex:0 0 min(84vw,360px);
    min-height:410px;
    aspect-ratio:20 / 27;
    border-radius:25px;
    scroll-snap-align:center;
  }
  .universe-card__content { padding:24px 21px; }
  .universe-card h2 { font-size:clamp(2.65rem,13vw,3.6rem); }
  .universe-card__tagline { font-size:.9rem; }
  .universe-card:hover,
  .universe-card:focus-within,
  .universe-card.is-active { transform:translateY(-3px); }
  .stories-coming { width:100%; }
  .saga-footer { align-items:flex-start; flex-direction:column; gap:7px; padding-inline:2px; line-height:1.5; }
  .universe-topbar { align-items:flex-start; flex-wrap:wrap; }
  .universe-topbar-leading { width:100%; justify-content:space-between; gap:10px; }
  .universe-topbar-brand { padding-left:12px; }
  .universe-topbar-brand small { display:none; }
  .universe-topbar-actions { width:100%; }
  .universe-reader__copy strong { max-width:150px; }
  .coming-card { align-items:flex-start; gap:13px; padding:18px; }
  .coming-card__ornament { width:44px; height:44px; border-radius:13px; }
  .coming-card__status { display:none; }
  .universe-hero { min-height:0; padding:64px 3px 36px; }
  .universe-hero h1 { font-size:clamp(3.2rem,18vw,5rem); }
  .universe-hero .tagline { margin-top:13px; font-size:1.08rem; }
  .universe-hero .description { margin-top:11px; font-size:.87rem; }
  .section-title { align-items:flex-start; flex-direction:column; }
  .reading-progress { margin-inline:-3px; padding:25px 12px 18px; border-radius:23px; }
  .reading-progress .section-title { margin-bottom:20px; padding-inline:8px; }
  .reading-progress .section-title h2 { font-size:clamp(2.15rem,11vw,3rem); }
  .chat-view { padding:7px; }
  .chat-layout { min-height:calc(100vh - 14px); }
  .chat-sidebar, .chat-shell { border-radius:17px; }
  .chat-character-list { grid-template-columns:1fr 1fr; }
  .chat-head { padding:11px; }
  .chat-head > div:last-child { flex-wrap:wrap; justify-content:flex-end; gap:7px; }
  .plan-status { min-width:0; padding:7px 8px; }
  .plan-status small { display:none; }
  .casebook-trigger > span { display:none; }
  .casebook-trigger { padding-inline:9px; }
  .speech-toggle { padding-inline:8px; }
  .speech-toggle__label { max-width:72px; line-height:1.15; text-align:left; }
  .messages { padding:15px 11px; }
  .bubble { max-width:91%; }
  .composer { grid-template-columns:1fr; }
  .composer-status span:last-child { display:none; }
  .composer input { min-height:46px; }
  .composer .button { width:100%; }
  .store-plans { grid-template-columns:1fr; }
  .casebook-head { min-height:91px; padding:17px; }
  .casebook-body { height:calc(100dvh - 91px); padding:18px 16px 38px; }
  .casebook-evidence { grid-template-columns:1fr; }
  .casebook-evidence-card { display:grid; grid-template-columns:70px 1fr; gap:4px 8px; align-items:baseline; }
  .casebook-evidence-card small { grid-row:1 / span 2; margin:0; }
  .casebook-evidence-card p { grid-column:2; margin:2px 0 0; }
  .intro-title { font-size:clamp(4.3rem,25vw,7rem); }
  .intro-content { padding-top:16vh; }
  .intro-sound-toggle { right:14px; bottom:14px; }
}

@media (max-width: 760px) and (orientation: portrait) {
  .intro-media {
    background-color:#030306;
    animation:none;
    transform:none;
  }
  .intro-media::before {
    content:'';
    position:absolute;
    inset:-8%;
    z-index:0;
    background:var(--intro-poster) center/cover no-repeat;
    filter:blur(18px) brightness(.46) saturate(.8);
    transform:scale(1.06);
  }
  .intro-video {
    object-fit:contain;
    object-position:center center;
  }
  .intro.is-revealed .intro-video { transform:none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}