@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=IM+Fell+English:ital@0;1&display=swap');

:root {
  --void: #0a0608;
  --deep: #110d0f;
  --engine-red: #8b1a1a;
  --engine-glow: #c0392b;
  --engine-accent: #ff4444;
  --dust: #b8a090;
  --pale: #e8ddd0;
  --ghost: rgba(232,221,208,0.6);
  --zone-newkyushu: #0d0a14;
  --zone-continent: #080d0a;
  --zone-domum: #0d0a08;
  --zone-engine: #0f0808;
  --font-display: 'Bebas Neue', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --font-prose: 'IM Fell English', serif;
  --transition-slow: 0.8s ease;
  --transition-med: 0.4s ease;
  --transition-fast: 0.15s ease;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { width:100%; height:100%; overflow:hidden; }
body {
  background: var(--void);
  color: var(--pale);
  font-family: var(--font-mono);
  cursor: crosshair;
}

body::before {
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
  pointer-events:none; z-index:9999; opacity:0.35; mix-blend-mode:overlay;
}
body::after {
  content:'';
  position:fixed; inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.03) 2px,rgba(0,0,0,0.03) 4px);
  pointer-events:none; z-index:9998;
}

.engine-page {
  width:100vw; height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  animation:fadeIn 0.6s ease both;
}

.engine-page.scrollable {
  overflow-y:auto; height:auto;
  min-height:100vh;
  padding:6rem 2rem 8rem;
}

.bg-image {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  background-repeat:no-repeat;
  filter:brightness(0.55) saturate(0.85);
  z-index:0;
}
.bg-image.vignette::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center,transparent 30%,rgba(10,6,8,0.5) 70%,rgba(10,6,8,0.92) 100%);
}

.content {
  position:relative; z-index:10;
  text-align:center; max-width:720px;
  padding:2rem;
  display:flex; flex-direction:column;
  align-items:center; gap:1.5rem;
}

.site-logo {
  position:fixed; top:1.5rem; left:1.5rem;
  z-index:100;
  opacity:0; animation:fadeIn 1s ease 2s forwards;
}
.site-logo a { text-decoration:none; opacity:0.6; transition:opacity var(--transition-med); display:block; }
.site-logo a img { width:80px; height:auto; filter:brightness(0) invert(1); }
.site-logo a:hover { opacity:1; }

.inscription {
  font-family:var(--font-mono);
  font-size:clamp(0.5rem,1vw,0.65rem);
  letter-spacing:0.3em; color:var(--dust);
  opacity:0.5; text-transform:uppercase;
  animation:fadeIn 1.5s ease 0.5s both;
}

.node-title {
  font-family:var(--font-display);
  font-size:clamp(2rem,5vw,4rem);
  letter-spacing:0.1em; line-height:1;
  color:var(--pale);
  animation:fadeIn 0.8s ease 0.4s both;
  position:relative;
}
.node-title.glitch::before,
.node-title.glitch::after {
  content:attr(data-text);
  position:absolute; top:0; left:0;
  width:100%; height:100%; opacity:0;
}
.node-title.glitch::before {
  color:#ff4444;
  animation:glitch-r 5s infinite;
  clip-path:polygon(0 20%,100% 20%,100% 50%,0 50%);
}
.node-title.glitch::after {
  color:#44ffee;
  animation:glitch-b 5s infinite;
  clip-path:polygon(0 55%,100% 55%,100% 80%,0 80%);
}

.node-label {
  font-family:var(--font-mono);
  font-size:0.55rem; letter-spacing:0.4em;
  color:var(--dust); opacity:0.4;
  text-transform:uppercase;
  animation:fadeIn 0.8s ease 0.6s both;
}

.node-text {
  font-family:var(--font-prose); font-style:italic;
  font-size:clamp(0.85rem,1.5vw,1rem);
  line-height:1.8; color:var(--ghost);
  max-width:520px;
  animation:fadeIn 0.8s ease 0.8s both;
}

.node-fragment {
  font-family:var(--font-mono);
  font-size:clamp(0.75rem,1.3vw,0.88rem);
  line-height:1.9; color:var(--ghost);
  max-width:520px;
  border-left:1px solid rgba(139,26,26,0.4);
  padding-left:1.5rem; text-align:left;
  animation:fadeIn 0.8s ease 0.8s both;
}

.node-image {
  max-width:100%; max-height:55vh;
  object-fit:contain;
  opacity:0; animation:revealImage 1.2s ease 0.3s forwards;
  filter:saturate(0.9);
}

.enter-btn {
  display:inline-block;
  font-family:var(--font-display);
  font-size:clamp(1rem,2.5vw,1.4rem);
  letter-spacing:0.5em; color:var(--pale);
  text-decoration:none;
  border:1px solid rgba(232,221,208,0.25);
  padding:0.9rem 3rem; margin-top:0.5rem;
  transition:all var(--transition-med);
  animation:fadeIn 1s ease 1.8s both;
  cursor:pointer;
}
.enter-btn:hover {
  border-color:rgba(192,57,43,0.7);
  color:#fff; letter-spacing:0.6em;
  text-shadow:0 0 20px rgba(192,57,43,0.8);
}

.node-nav {
  position:fixed; bottom:2.5rem;
  left:0; right:0;
  display:flex; justify-content:center;
  gap:4rem; z-index:100;
  opacity:0; animation:fadeIn 0.8s ease 1.5s forwards;
}
.nav-btn {
  font-family:var(--font-mono);
  font-size:0.65rem; letter-spacing:0.3em;
  color:var(--dust); text-decoration:none;
  opacity:0.5; transition:all var(--transition-med);
  text-transform:uppercase; cursor:pointer;
  background:none; border:none;
  position:relative; padding-bottom:0.3rem;
}
.nav-btn::after {
  content:''; position:absolute;
  bottom:0; left:0; width:0; height:1px;
  background:var(--engine-glow);
  transition:width var(--transition-med);
}
.nav-btn:hover { opacity:1; color:var(--pale); cursor:pointer; }
.nav-btn:hover::after { width:100%; }
.nav-btn.deeper { color:var(--pale); opacity:0.7; }
.nav-btn.deeper:hover { text-shadow:0 0 15px rgba(192,57,43,0.6); }

.page-transition {
  position:fixed; inset:0;
  background:var(--void); z-index:9997;
  pointer-events:none; opacity:0;
  transition:opacity 0.4s ease;
}
.page-transition.active { opacity:1; pointer-events:all; }

.coordinates {
  position:fixed; bottom:1rem; right:1.5rem;
  font-family:var(--font-mono);
  font-size:0.5rem; letter-spacing:0.2em;
  color:var(--dust); opacity:0.15; z-index:100;
}

.what-link {
  position:fixed; bottom:1.2rem; right:2rem;
  font-family:var(--font-mono);
  font-size:0.5rem; letter-spacing:0.25em;
  color:var(--dust); opacity:0.2;
  text-decoration:none; text-transform:uppercase;
  z-index:200; transition:opacity var(--transition-med);
  animation:fadeIn 1s ease 4s both;
}
.what-link:hover { opacity:0.6; cursor:pointer; }

.zone-newkyushu { background-color:var(--zone-newkyushu); }
.zone-continent { background-color:var(--zone-continent); }
.zone-domum { background-color:var(--zone-domum); }
.zone-engine { background-color:var(--zone-engine); }

/* GLOSSARY */
.glossary-wrap {
  position:relative; z-index:10;
  max-width:640px; width:100%;
  padding:2rem; text-align:left;
  animation:fadeIn 0.8s ease 0.3s both;
}
.glossary-term {
  font-family:var(--font-display);
  font-size:clamp(2.5rem,6vw,5rem);
  letter-spacing:0.08em; line-height:0.9;
  color:var(--pale);
}
.glossary-pronounce {
  font-family:var(--font-mono);
  font-size:0.65rem; letter-spacing:0.2em;
  color:var(--engine-glow); opacity:0.8;
  margin-top:0.4rem;
}
.glossary-pos {
  font-family:var(--font-prose); font-style:italic;
  font-size:0.8rem; color:var(--dust);
  opacity:0.6; margin-top:0.2rem;
}
.glossary-divider {
  width:40px; height:1px;
  background:rgba(139,26,26,0.5);
  margin:1.2rem 0;
}
.glossary-def {
  font-family:var(--font-prose);
  font-size:clamp(0.88rem,1.5vw,1rem);
  line-height:1.85; color:var(--ghost);
}
.glossary-lore {
  font-family:var(--font-mono);
  font-size:0.62rem; letter-spacing:0.1em;
  line-height:1.8; color:var(--dust);
  opacity:0.55; margin-top:1rem;
  border-left:1px solid rgba(139,26,26,0.3);
  padding-left:1rem;
}
.glossary-world {
  font-family:var(--font-mono);
  font-size:0.5rem; letter-spacing:0.35em;
  color:var(--engine-glow); opacity:0.5;
  text-transform:uppercase; margin-top:1rem;
}

/* AUDIO */
.audio-node-wrap {
  position:relative; z-index:10;
  max-width:600px; width:100%;
  padding:2rem; text-align:center;
  display:flex; flex-direction:column;
  align-items:center; gap:1.8rem;
  animation:fadeIn 0.8s ease 0.3s both;
}
.visualiser-canvas {
  width:100%; height:100px;
  background:transparent;
  display:block;
}
.audio-title {
  font-family:var(--font-display);
  font-size:clamp(1.8rem,4vw,3rem);
  letter-spacing:0.12em; color:var(--pale);
}
.audio-artist {
  font-family:var(--font-mono);
  font-size:0.55rem; letter-spacing:0.35em;
  color:var(--dust); opacity:0.45;
  text-transform:uppercase; margin-top:-1rem;
}
.audio-controls {
  display:flex; align-items:center;
  gap:1.5rem; width:100%;
  max-width:480px;
}
.play-btn {
  width:48px; height:48px;
  border:1px solid rgba(192,57,43,0.5);
  background:none; color:var(--pale);
  font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--transition-med);
  flex-shrink:0;
}
.play-btn:hover { background:rgba(139,26,26,0.2); border-color:var(--engine-glow); }
.audio-progress-wrap {
  flex:1; display:flex;
  flex-direction:column; gap:0.4rem;
}
.audio-progress {
  width:100%; height:2px;
  background:rgba(184,160,144,0.15);
  cursor:pointer; position:relative;
}
.audio-progress-fill {
  height:100%; background:var(--engine-glow);
  width:0%; pointer-events:none;
}
.audio-time {
  font-family:var(--font-mono);
  font-size:0.5rem; letter-spacing:0.2em;
  color:var(--dust); opacity:0.4;
}
.audio-note {
  font-family:var(--font-prose); font-style:italic;
  font-size:0.78rem; color:var(--ghost);
  opacity:0.55; max-width:440px;
  line-height:1.75; text-align:center;
}

/* LYRICS */
.lyric-wrap {
  position:relative; z-index:10;
  max-width:560px; width:100%;
  padding:2rem; text-align:center;
  animation:fadeIn 0.8s ease 0.3s both;
  overflow-y:auto; max-height:72vh;
}
.lyric-title {
  font-family:var(--font-display);
  font-size:clamp(2rem,5vw,3.5rem);
  letter-spacing:0.1em; color:var(--pale);
  margin-bottom:0.4rem;
}
.lyric-sub {
  font-family:var(--font-mono);
  font-size:0.55rem; letter-spacing:0.3em;
  color:var(--dust); opacity:0.35;
  text-transform:uppercase; margin-bottom:2rem;
}
.lyric-body {
  font-family:var(--font-prose); font-style:italic;
  font-size:clamp(0.85rem,1.6vw,1rem);
  line-height:2.4; color:var(--ghost);
}
.lyric-body p { margin-bottom:1.5rem; }

/* VIDEO */
.video-wrap {
  position:relative; z-index:10;
  max-width:900px; width:100%;
  padding:1rem 2rem;
  display:flex; flex-direction:column;
  align-items:center; gap:1rem;
  animation:fadeIn 0.8s ease 0.3s both;
}
.video-title {
  font-family:var(--font-display);
  font-size:clamp(1.5rem,3.5vw,2.5rem);
  letter-spacing:0.1em; color:var(--pale);
  text-align:center;
}
.video-credit {
  font-family:var(--font-mono);
  font-size:0.55rem; letter-spacing:0.2em;
  color:var(--dust); opacity:0.4;
  text-align:center;
}
.video-credit a { color:var(--engine-glow); text-decoration:none; opacity:0.7; transition:opacity var(--transition-med); }
.video-credit a:hover { opacity:1; }
.video-player-container { width:100%; background:#000; position:relative; }
.video-player-container.landscape { padding-bottom:56.25%; }
.video-player-container.portrait { max-width:360px; padding-bottom:177.78%; margin:0 auto; }
.video-player-container video { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain; }

/* GIF */
.gif-wrap {
  position:relative; z-index:10;
  max-width:700px; width:100%;
  padding:1rem 2rem;
  display:flex; flex-direction:column;
  align-items:center; gap:1rem;
  animation:fadeIn 0.8s ease 0.3s both;
}
.gif-image { max-width:100%; max-height:68vh; object-fit:contain; }

/* MAP */
.map-container {
  position:relative; z-index:10;
  width:100vw; height:100vh;
  overflow:hidden; cursor:grab;
}
.map-container:active { cursor:grabbing; }
.map-container img {
  position:absolute; transform-origin:0 0;
  user-select:none; -webkit-user-drag:none; max-width:none;
}
.map-hint {
  position:fixed; bottom:5rem; left:50%;
  transform:translateX(-50%);
  font-family:var(--font-mono);
  font-size:0.55rem; letter-spacing:0.3em;
  color:var(--dust); opacity:0.35;
  text-transform:uppercase; z-index:200;
  pointer-events:none;
  animation:fadeIn 1s ease 1s both, fadeOut 1s ease 5s forwards;
}

/* NOVEL READER */
.novel-reader {
  position:relative; z-index:10;
  width:100%; max-width:780px;
  display:flex; flex-direction:column;
  align-items:center; gap:1.2rem;
  padding:1rem 2rem;
  animation:fadeIn 0.8s ease 0.3s both;
}
.novel-page-wrap { width:100%; overflow:hidden; }
.novel-page-img {
  width:100%; display:block;
  cursor:zoom-in; transition:transform 0.3s ease;
}
.novel-page-img.zoomed {
  cursor:zoom-out; transform:scale(1.9);
  transform-origin:var(--zoom-x,50%) var(--zoom-y,50%);
}
.novel-controls { display:flex; align-items:center; gap:2rem; }
.novel-btn {
  font-family:var(--font-mono);
  font-size:0.6rem; letter-spacing:0.3em;
  color:var(--dust); background:none;
  border:1px solid rgba(184,160,144,0.2);
  padding:0.5rem 1.2rem; cursor:pointer;
  transition:all var(--transition-med); text-transform:uppercase;
}
.novel-btn:hover { border-color:rgba(192,57,43,0.5); color:var(--pale); }
.novel-btn:disabled { opacity:0.2; cursor:default; }
.novel-counter { font-family:var(--font-mono); font-size:0.55rem; letter-spacing:0.2em; color:var(--dust); opacity:0.4; }

/* ABOUT */
.about-wrap {
  width:100vw; min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:4rem 2rem; background:var(--deep); overflow-y:auto;
}
.about-content { max-width:560px; display:flex; flex-direction:column; gap:1.8rem; animation:fadeIn 1s ease both; }
.about-label { font-family:var(--font-mono); font-size:0.55rem; letter-spacing:0.4em; color:var(--dust); opacity:0.4; text-transform:uppercase; }
.about-title { font-family:var(--font-display); font-size:clamp(2rem,5vw,3rem); letter-spacing:0.1em; color:var(--pale); }
.about-body { font-family:var(--font-prose); font-size:clamp(0.9rem,1.6vw,1.05rem); line-height:1.85; color:var(--ghost); }
.about-body p+p { margin-top:1.2rem; }
.about-link { font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.25em; color:var(--dust); text-decoration:none; border-bottom:1px solid rgba(184,160,144,0.2); padding-bottom:0.1rem; transition:all var(--transition-med); }
.about-link:hover { color:var(--pale); border-bottom-color:rgba(192,57,43,0.5); }
.about-divider { width:30px; height:1px; background:rgba(139,26,26,0.4); }
.about-return { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.3em; color:var(--dust); opacity:0.4; text-decoration:none; text-transform:uppercase; transition:opacity var(--transition-med); margin-top:1rem; }
.about-return:hover { opacity:0.9; }

/* ANIMATIONS */
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeOut { from{opacity:0.35} to{opacity:0} }
@keyframes revealImage { 0%{opacity:0;filter:saturate(0) brightness(0.3)} 60%{opacity:0.8;filter:saturate(0.5) brightness(0.6)} 100%{opacity:1;filter:saturate(0.9) brightness(1)} }
@keyframes pulse { 0%,100%{opacity:0.5} 50%{opacity:1} }
@keyframes glitch-r { 0%,87%,94%,100%{opacity:0;transform:translate(0)} 88%{opacity:0.8;transform:translate(-3px,1px)} 89%{opacity:0} 90%{opacity:0.6;transform:translate(2px,-1px)} 91%{opacity:0} }
@keyframes glitch-b { 0%,87%,94%,100%{opacity:0;transform:translate(0)} 88%{opacity:0.7;transform:translate(3px,-1px)} 89%{opacity:0} 90%{opacity:0.5;transform:translate(-2px,1px)} 91%{opacity:0} }

@media (max-width:768px) {
  .content { padding:1.5rem; gap:1.2rem; }
  .node-nav { gap:2.5rem; bottom:2rem; }
  .site-logo { top:1.2rem; left:1.2rem; }
  .node-image { max-height:42vh; }
  .enter-btn { padding:0.8rem 2rem; letter-spacing:0.35em; }
  .audio-controls { gap:1rem; }
  .novel-reader { padding:1rem; }
  .glossary-wrap { padding:1.5rem; }
}

/* ── PHASE 2 ADDITIONS ─────────────────────────────────────────────────────── */

/* Red type fix — was too dark, now readable */
:root {
  --engine-glow: #e05040;
  --engine-red:  #a02020;
  --engine-accent: #ff6655;
}

.holding-status,
.entry-latin,
.glossary-pronounce,
.glossary-world,
.video-credit a,
.about-link:hover {
  color: var(--engine-glow);
}

/* Text-only page engine background */
.engine-bg-fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(139,26,26,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(80,20,80,0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 80%, rgba(20,60,80,0.05) 0%, transparent 50%),
    var(--void);
  z-index: 0;
}

/* Subtle animated scan line for text-only pages */
.engine-bg-fallback::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(139,26,26,0.015) 3px,
    rgba(139,26,26,0.015) 4px
  );
  animation: scanMove 8s linear infinite;
  pointer-events: none;
}

@keyframes scanMove {
  from { background-position: 0 0; }
  to   { background-position: 0 100px; }
}

/* Node image zoom transition */
.node-image, .zoomable {
  transition: transform 0.3s ease, z-index 0s;
  position: relative;
}
.node-image.zoomed, .zoomable.zoomed {
  position: relative;
  z-index: 500;
}

/* Visualiser canvas — taller for abstract viz */
.visualiser-canvas {
  height: 140px;
  border: none;
  background: transparent;
}

/* Character page — image + text side by side on wider screens */
.char-layout {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
  max-width: 820px;
  width: 100%;
  padding: 2rem;
  position: relative;
  z-index: 10;
  animation: fadeIn 0.8s ease 0.3s both;
}
.char-image {
  flex-shrink: 0;
  width: clamp(160px, 30vw, 280px);
  opacity: 0;
  animation: revealImage 1.2s ease 0.4s forwards;
  filter: saturate(0.88);
}
.char-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}

@media (max-width: 600px) {
  .char-layout { flex-direction: column; align-items: center; }
  .char-image { width: 100%; max-width: 260px; }
  .char-text { text-align: center; }
}

/* Glossary legibility */
.glossary-wrap {
  overflow-y: auto;
  max-height: 80vh;
}
.glossary-def, .glossary-lore {
  color: rgba(232,221,208,0.82);
}
.glossary-pronounce {
  font-size: 0.72rem;
  opacity: 1;
  letter-spacing: 0.15em;
}

/* Nav pulse on deeper button */
.nav-btn.deeper {
  animation: navPulse 4s ease 3s infinite;
}
@keyframes navPulse {
  0%,85%,100% { opacity: 0.7; }
  90% { opacity: 1; text-shadow: 0 0 12px rgba(224,80,64,0.7); }
}

/* ── PHASE 2 STEP 2 ─────────────────────────────────────────────────────────── */

/* Restore distortion on enter + nav buttons */
.enter-btn:hover,
.nav-btn:hover {
  filter: url(#reality-warp);
}

/* Text legibility — feathered dark centre vignette behind text */
.content::before {
  content: '';
  position: absolute;
  inset: -20% -30%;
  background: radial-gradient(
    ellipse at center,
    rgba(8,5,7,0.72) 0%,
    rgba(8,5,7,0.55) 35%,
    rgba(8,5,7,0.2) 65%,
    transparent 100%
  );
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
}

/* Ensure content sits above the vignette */
.content {
  position: relative;
  z-index: 10;
}

/* Char layout text legibility */
.char-layout::before {
  content: '';
  position: absolute;
  inset: -10% -20%;
  background: radial-gradient(
    ellipse at center,
    rgba(8,5,7,0.65) 0%,
    rgba(8,5,7,0.35) 55%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}
.char-text { position: relative; z-index: 2; }
.char-image { position: relative; z-index: 2; }

/* Video player — larger, fills available width */
.video-wrap {
  max-width: 100% !important;
  width: 100%;
  padding: 0.5rem 1rem 1rem !important;
}
.video-player-container.landscape {
  padding-bottom: 56.25%;
  width: 100%;
}
.video-player-container.portrait {
  max-width: 480px;
  padding-bottom: 177.78%;
}

/* Lyric page — clean full scroll */
.lyric-wrap {
  max-height: none !important;
  overflow: visible !important;
}

/* Engine bg images — slightly more visible */
.bg-image[style*="engine-exterior"] {
  filter: brightness(0.3) saturate(0.55) !important;
}

/* ── PHASE 2 STEP 3 ─────────────────────────────────────────────────────────── */

/* Fix dark circle - proper feathered vignette, much larger spread */
.content::before {
  content: '';
  position: fixed;
  inset: -50%;
  background: radial-gradient(
    ellipse 55% 60% at 50% 50%,
    rgba(6,4,6,0.62) 0%,
    rgba(6,4,6,0.38) 38%,
    rgba(6,4,6,0.12) 62%,
    transparent 80%
  );
  pointer-events: none;
  z-index: -1;
}

/* Zone colours only for character/location pages, not media */
.zone-newkyushu { background-color: #08060d; }
.zone-continent { background-color: #060808; }
.zone-domum     { background-color: #070605; }
.zone-engine    { background-color: #080404; }

/* Media nodes - pure dark, no zone tint */
main.engine-page:not(.zone-newkyushu):not(.zone-continent):not(.zone-domum):not(.zone-engine) {
  background: #060606;
}

/* Force art/gif/video/image pages to near-black */
[class*="gif-wrap"],
[class*="video-wrap"],
[class*="novel-reader"] {
  background: transparent;
}

/* Override blue/green zone bg on media pages */
.gif-wrap ~ * { background: transparent; }

/* Video player - adaptive, fills page properly */
.video-wrap {
  width: 100%;
  max-width: 100% !important;
  padding: 0 !important;
  gap: 0.5rem;
}

.video-player-container {
  width: 100%;
  position: relative;
  background: #000;
}

/* Auto-detect portrait via JS class, default landscape */
.video-player-container.landscape {
  padding-bottom: 56.25%;
  max-width: 100%;
}

.video-player-container.portrait {
  padding-bottom: 177.78%;
  max-width: min(85vh * 0.5625, 100%);
  max-width: min(360px, 100%);
  margin: 0 auto;
}

/* For pages where we don't know orientation - use auto */
.video-player-container.auto {
  padding-bottom: 56.25%;
}

.video-player-container video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
}

/* Video title - reduce to tiny label, not big heading */
.video-wrap .video-title {
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  opacity: 0.3;
  font-family: var(--font-mono);
  color: var(--dust);
}

/* Visualiser - more ethereal, blend into bg */
.visualiser-canvas {
  height: 140px;
  background: transparent !important;
  border: none !important;
  opacity: 0.85;
  mix-blend-mode: screen;
}

/* Remove all automatic node-text under media */
.gif-wrap .node-text,
.video-wrap .node-text,
.gif-wrap p,
.video-wrap p:not(.video-credit) {
  display: none;
}

/* Font size bump for legibility */
.node-text {
  font-size: clamp(0.92rem, 1.6vw, 1.05rem);
}
.glossary-def {
  font-size: clamp(0.92rem, 1.6vw, 1.05rem);
}
.node-label {
  font-size: 0.6rem;
}

/* Char layout vignette - fixed version */
.char-layout {
  position: relative;
  z-index: 10;
}