:root {
  color-scheme: dark;
  --game-edge-rgb: 255, 255, 255;
  --bg: #000000;
  --fg: rgba(245, 245, 245, 0.55);
  --fg-strong: rgba(245, 245, 245, 0.9);
  --fg-soft: rgba(245, 245, 245, 0.4);
  --line-strong: var(--fg-strong);
  --line-soft: var(--fg-soft);
  --halo-line: rgba(210, 220, 230, 0.95);
  --halo-glow: rgba(210, 220, 230, 0.65);
  --halo-bright: rgba(240, 246, 255, 0.9);
  --star-line: rgba(255, 255, 255, 0.92);
  --star-glow: rgba(255, 255, 255, 0.6);
  --font-accessible: "Atkinson Hyperlegible", "Atkinson Hyperlegible Next", "Noto Sans", "Verdana", "Trebuchet MS", sans-serif;
  --font-default: var(--font-accessible);
  --font-ui: "Ancient Geek", var(--font-accessible);
  --font-rune-greek: "Times New Roman", "Noto Serif", "DejaVu Serif", serif;
  --font-arcano-invocacion-lux: "Arcano Lux Bengali", "Noto Sans Bengali", "Hind Siliguri", "Nirmala UI", "Vrinda", "Noto Sans", serif;
  --font-arcano-invocacion-umbra: "Arcano Umbra Hebrew", "MAT Noto Sans Hebrew", "Noto Sans Hebrew", "Noto Sans", serif;
  --font-past: "Atkinson Hyperlegible", var(--font-accessible);
  --font-future: "Atkinson Hyperlegible", var(--font-accessible);
  --font-present: "Atkinson Hyperlegible", var(--font-accessible);
  --font-bitacora: "Fredericka the Great", var(--font-accessible);
  --title-size: clamp(2.75rem, 10vw, 7.5rem);
  --title-weight: 700;
  --title-letter: 0.04em;
  --hero-size: clamp(160px, 35vmin, 420px);
  --hero-gap: 1.15rem;
  --name-pad: 0.4rem;
  --name-input-height: clamp(2.6rem, 5vw, 3.4rem);
  --title-hero-tighten: 0.35rem;
  --line-text-gap: calc((var(--name-pad) + 0.1rem) * 1.9);
  --line-anchor: calc(var(--line-text-gap) + var(--name-input-height));
  --legend-gap-adjust: 0.05rem;
  --name-rise: clamp(-0.7rem, -1.2vw, -0.4rem);
  --push-distance: calc(var(--hero-size) * 0.35);
  --stack-gap: 5px;
  --sym-offset: calc(var(--hero-size) * 0.8 + var(--stack-gap));
  --title-sub-gap: 8px;
  --subtitle-offset: calc(var(--title-sub-gap));
  --audio-hud-top: 1rem;
  --intro-fade-duration: 15000ms;
  --hero-poster-scale: 1.08;
}

@property --name-push {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --game-reveal-radius {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --loading-reveal-radius {
  syntax: "<length>";
  inherits: false;
  initial-value: 95vmax;
}

@font-face {
  font-family: "Arcano Umbra Hebrew";
  src: url("Sistema-Tripleuurus/Arcanos/UMBRA/NotoSansHebrew-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "MAT Noto Sans Hebrew";
  src: url("Sistema-Tripleuurus/Arcanos/UMBRA/NotoSansHebrew-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Arcano Lux Bengali";
  src: url("Sistema-Tripleuurus/Arcanos/LUX/NotoSansBengali-VariableFont_wdth,wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-BoldItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Ancient Geek";
  src: url("fonts/ancient-geek.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Dalek Pinpoint";
  src: url("fonts/dalek-pinpoint.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Cybersky";
  src: url("fonts/cybersky.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Rostex";
  src: url("fonts/rostex.regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Jancient";
  src: url("fonts/JANCIENT.TTF") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "JMH Moreneta";
  src: url("fonts/JMH Moreneta.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Ancient Park";
  src: url("fonts/AncientParkDemoRegular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Diogenes";
  src: url("fonts/diogenes.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Fredericka the Great";
  src: url("fonts/FrederickatheGreat-Regular.ttf") format("truetype");
  font-display: swap;
}

* {
  box-sizing: border-box;
}

/* Prevent accidental selection/drag highlight on interactive/decorative UI controls. */
.screen button,
.game-root button,
.screen img,
.game-root img,
.screen canvas,
.game-root canvas,
.game-orb,
.sense-wheel,
.epoch-triangle,
.hero-wrap,
.hero-frame,
.hero,
.game-mini-book,
.game-book-front,
.game-page-up,
.game-page-turn,
.mute-toggle,
.fullscreen-toggle,
.master-volume-control,
.master-volume-slider,
.codex-dock,
.codex-book-cover,
.codex-holo-control {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Disable text selection in UI copy while keeping form fields editable. */
.screen :not(input):not(textarea),
.game-root :not(input):not(textarea),
.codex-holo :not(input):not(textarea) {
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  height: 100%;
  margin: 0 0 -4px;
  position: relative;
  z-index: 7;
}

/* TEMAS ELEMENTALES - OPUESTOS CROMÁTICOS PARA CONTRASTE */
body[data-element-theme="mental"] {
  --epoch-triangle-color: #ffd400 !important;
  --epoch-triangle-rgb: 255, 212, 0 !important;
  --element-sense-glyph-rgb: 70, 110, 170;
  --element-accent-rgb: 105, 168, 255;
  --element-logo-hue: 205deg;
  --element-bg-1: #eef5ff;
  --element-bg-2: #dce9ff;
  --element-bg-3: #c7dafc;
  --element-text-color: color-mix(in srgb, #69a8ff 35%, #1a1a1a 65%);
}
body[data-element-theme="material"] {
  --epoch-triangle-color: #ff00ff !important;
  --epoch-triangle-rgb: 255, 0, 255 !important;
  --element-sense-glyph-rgb: 60, 150, 100;
  --element-accent-rgb: 97, 240, 160;
  --element-logo-hue: 130deg;
  --element-bg-1: #e6fff2;
  --element-bg-2: #d4f7e4;
  --element-bg-3: #bfead3;
  --element-text-color: color-mix(in srgb, #61f0a0 35%, #1a1a1a 65%);
}
body[data-element-theme="animic"] {
  --epoch-triangle-color: #00ffff !important;
  --epoch-triangle-rgb: 0, 255, 255 !important;
  --element-sense-glyph-rgb: 170, 70, 90;
  --element-accent-rgb: 255, 110, 132;
  --element-logo-hue: 340deg;
  --element-bg-1: #ffeef3;
  --element-bg-2: #ffd7e2;
  --element-bg-3: #f7bfd2;
  --element-text-color: color-mix(in srgb, #ff6e84 35%, #1a1a1a 65%);
}
body[data-element-theme="vital"] {
  --epoch-triangle-color: #5555ff !important;
  --epoch-triangle-rgb: 85, 85, 255 !important;
  --element-sense-glyph-rgb: 165, 140, 60;
  --element-accent-rgb: 246, 211, 95;
  --element-logo-hue: 45deg;
  --element-bg-1: #fff5e6;
  --element-bg-2: #ffe6c7;
  --element-bg-3: #ffd8a8;
  --element-text-color: color-mix(in srgb, #f6d35f 35%, #1a1a1a 65%);
}
body[data-element-theme="tech"] {
  --epoch-triangle-color: #ff4d00 !important;
  --epoch-triangle-rgb: 255, 77, 0 !important;
  --element-sense-glyph-rgb: 90, 160, 170;
  --element-accent-rgb: 140, 247, 255;
  --element-logo-hue: 185deg;
  --element-bg-1: #f5f7f8;
  --element-bg-2: #e1e6ea;
  --element-bg-3: #cbd3da;
  --element-text-color: color-mix(in srgb, #8cf7ff 35%, #1a1a1a 65%);
}
body[data-element-theme="understanding"] {
  --epoch-triangle-color: #32cd32 !important;
  --epoch-triangle-rgb: 50, 205, 50 !important;
  --element-sense-glyph-rgb: 140, 105, 170;
  --element-accent-rgb: 210, 156, 255;
  --element-logo-hue: 275deg;
  --element-bg-1: #f4edff;
  --element-bg-2: #e2d6ff;
  --element-bg-3: #c9b8ff;
  --element-text-color: color-mix(in srgb, #d29cff 35%, #1a1a1a 65%);
}
body[data-element-theme="nibbaana"] {
  --epoch-triangle-color: #e8d9a8 !important;
  --epoch-triangle-rgb: 232, 217, 168 !important;
  --element-bg-1: #f9f9f9;
  --element-bg-2: #f0f0f0;
  --element-bg-3: #e7e7e7;
  --element-sense-glyph-rgb: 200, 200, 200;
  --element-accent-rgb: 255, 255, 255;
  --element-logo-hue: 0deg;
  --element-text-color: color-mix(in srgb, #ffffff 35%, #1a1a1a 65%);
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-default);
  transition: background 2s ease, color 2s ease;
  overflow: hidden;
  position: relative;
}

:root {
  --portal-offset-x: 0px;
  --portal-offset-y: 0px;
}

body.game-screen {
  background: var(--bg) !important;
}

body.game-screen[data-element-theme] {
  background: radial-gradient(circle at 50% 50%, var(--element-bg-1, var(--bg)) 0%, var(--element-bg-2, var(--bg)) 55%, var(--element-bg-3, var(--bg)) 100%) !important;
}

body.game-screen[data-element-theme] .game-root {
  background: radial-gradient(circle at 50% 50%, var(--element-bg-1, var(--bg)) 0%, var(--element-bg-2, var(--bg)) 55%, var(--element-bg-3, var(--bg)) 100%) !important;
}

body.game-screen::after,
body.game-screen::before {
  opacity: 0 !important;
}

body.game-screen .screen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.is-partida-cerrada.game-screen .screen {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.is-partida-cerrada.game-screen .screen > *:not(.codex-dock):not(.codex-holo) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.game-root {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--fg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}

body.game-screen .game-root {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


.game-root::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      ellipse at center,
      rgba(var(--game-edge-rgb), 0) 52%,
      rgba(var(--game-edge-rgb), 0.08) 68%,
      rgba(var(--game-edge-rgb), 0.2) 82%,
      rgba(var(--game-edge-rgb), 0.42) 100%
    );
}

.game-root::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  --game-reveal-radius: 0px;
  --game-reveal-feather: 120px;
  background: radial-gradient(
    circle at calc(50% + var(--portal-offset-x)) calc(50% + var(--portal-offset-y)),
    #000000 0%,
    #000000 55%,
    #050505 85%,
    #0a0a0a 100%
  );
  -webkit-mask-image: radial-gradient(
    circle at calc(50% + var(--portal-offset-x)) calc(50% + var(--portal-offset-y)),
    rgba(0, 0, 0, 0) 0 calc(var(--game-reveal-radius) - var(--game-reveal-feather)),
    rgba(0, 0, 0, 0.12) calc(var(--game-reveal-radius) - calc(var(--game-reveal-feather) * 0.45)),
    rgba(0, 0, 0, 0.32) calc(var(--game-reveal-radius) - calc(var(--game-reveal-feather) * 0.2)),
    rgba(0, 0, 0, 0.64) calc(var(--game-reveal-radius) + calc(var(--game-reveal-feather) * 0.2)),
    rgba(0, 0, 0, 1) calc(var(--game-reveal-radius) + var(--game-reveal-feather))
  );
  mask-image: radial-gradient(
    circle at calc(50% + var(--portal-offset-x)) calc(50% + var(--portal-offset-y)),
    rgba(0, 0, 0, 0) 0 calc(var(--game-reveal-radius) - var(--game-reveal-feather)),
    rgba(0, 0, 0, 0.12) calc(var(--game-reveal-radius) - calc(var(--game-reveal-feather) * 0.45)),
    rgba(0, 0, 0, 0.32) calc(var(--game-reveal-radius) - calc(var(--game-reveal-feather) * 0.2)),
    rgba(0, 0, 0, 0.64) calc(var(--game-reveal-radius) + calc(var(--game-reveal-feather) * 0.2)),
    rgba(0, 0, 0, 1) calc(var(--game-reveal-radius) + var(--game-reveal-feather))
  );
  z-index: 12;
}

body.game-screen .game-root.is-portal-revealing::after {
  opacity: 1;
  animation: game-portal-grow 12s ease forwards;
}

.game-layout {
  width: min(1100px, 92vw);
  min-height: 100vh;
  height: 100vh;
  position: relative;
  isolation: isolate;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: clamp(12px, 2.4vw, 28px);
  text-align: center;
  font-family: var(--font-present);
  --tri-orb-size: clamp(144px, 20vw, 240px);
  --tri-apex-offset: 28px;
  --tri-height: calc(100vh - (2 * 1cm) - var(--tri-orb-size) - var(--tri-apex-offset));
  --tri-size: calc(var(--tri-height) / 0.866);
  --tri-center-x: 50%;
  --tri-center-y: calc(50vh + (var(--tri-apex-offset) / 2));
  --tri-side-y: calc(var(--tri-center-y) + (var(--tri-height) / 2));
  --tri-top-center-y: calc(var(--tri-center-y) - (var(--tri-height) / 2) - 28px);
  --location-banner-width: clamp(
    calc(300px + var(--location-banner-width-boost-x, 0cm)),
    calc(42vw + var(--location-banner-width-boost-x, 0cm)),
    calc(760px + var(--location-banner-width-boost-x, 0cm))
  );
  --location-banner-height: clamp(86px, 10vw, 172px);
  --location-banner-center-y: var(--tri-top-center-y);
  --location-banner-radius: clamp(18px, 2.4vw, 42px);
  --epoch-triangle-color: #ffd400;
  --epoch-triangle-rgb: 255, 212, 0;
  --sense-glyph-rgb: 255, 212, 0;
  --narracion-color: var(--fg);
  --retrato-ring-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
  --retrato-glow-shadow: none;
  --hud-top: 2px;
  --hud-line-height: 1.25;
  perspective: 1400px;
  transform-style: preserve-3d;
}

.location-banner {
  --location-banner-image: none;
  position: absolute;
  left: 50%;
  top: var(--location-banner-center-y);
  transform: translate(-50%, -50%);
  width: min(var(--location-banner-width), calc(100vw - 2rem));
  height: var(--location-banner-height);
  border-radius: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background-image: var(--location-banner-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: opacity 360ms ease, transform 360ms ease;
}

.location-banner::before,
.location-banner::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.location-banner::before {
  content: "";
  border: 1px solid rgba(var(--epoch-triangle-rgb), 0.92);
  box-shadow:
    0 0 10px rgba(var(--epoch-triangle-rgb), 0.88),
    0 0 22px rgba(var(--epoch-triangle-rgb), 0.72),
    0 0 40px rgba(var(--epoch-triangle-rgb), 0.5);
}

.location-banner::after {
  content: none;
}

.location-banner.is-active {
  opacity: 0.94;
}

.sense-wheel {
  --wheel-radius: calc((100vh - var(--glyph-size)) / 2);
  --wheel-size: calc(var(--wheel-radius) * 2);
  --glyph-size: clamp(52px, 8.6vmin, 96px);
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--wheel-size);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1300;
  opacity: 0.2;
  filter:
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.18))
    saturate(0.86);
  animation: sense-wheel-spin 78s linear infinite;
}

.sense-beam-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1290;
  mix-blend-mode: screen;
}

body[data-era="past"].game-screen .sense-wheel {
  opacity: 0.34;
  filter:
    drop-shadow(0 0 24px rgba(255, 255, 255, 0.34))
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.26))
    saturate(1.08)
    brightness(1.16)
    contrast(1.14);
}

body[data-era="present"].game-screen .sense-wheel {
  opacity: 0.8;
  filter:
    drop-shadow(0 0 22px rgba(255, 255, 255, 0.34))
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.26))
    saturate(1.08)
    brightness(1.18)
    contrast(1.12);
}

body[data-era="future"].game-screen .sense-wheel {
  opacity: 0.33;
  filter:
    drop-shadow(0 0 24px rgba(255, 255, 255, 0.34))
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.26))
    saturate(1.08)
    brightness(1.18)
    contrast(1.14);
}

.sense-wheel-glyph {
  --slot-angle: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--glyph-size);
  aspect-ratio: 1 / 1;
  transform-origin: center center;
  transform: translate(-50%, -50%) rotate(var(--slot-angle)) translateY(calc(var(--wheel-radius) * -1));
  border-radius: 50%;
  padding: 2px;
}

.sense-wheel-glyph::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  border: 1.6px solid rgba(var(--sense-glyph-rgb), 0.82);
  box-shadow:
    0 0 10px rgba(var(--sense-glyph-rgb), 0.42),
    inset 0 0 8px rgba(var(--sense-glyph-rgb), 0.18);
  pointer-events: none;
}

.sense-wheel-glyph-art {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(var(--sense-glyph-rgb), 0.95);
  -webkit-mask-image: var(--glyph-image);
  mask-image: var(--glyph-image);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 70%;
  mask-size: 70%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
  box-shadow:
    0 0 0 1px rgba(var(--sense-glyph-rgb), 0.3),
    0 0 14px rgba(var(--sense-glyph-rgb), 0.3);
  animation: sense-wheel-glyph-upright 78s linear infinite;
  opacity: 1;
  transition: opacity 1000ms ease;
}

.sense-wheel-glyph-letter {
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.sense-wheel-glyph-letter-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-family: var(--font-rune-greek);
  font-size: calc(var(--glyph-size) * 0.88);
  font-weight: 700;
  line-height: 1;
  color: rgba(var(--sense-glyph-rgb), 0.96);
  text-align: center;
  text-shadow: none;
  transform-origin: center center;
  animation: sense-wheel-glyph-upright 78s linear infinite;
}

.sense-wheel-glyph-vista .sense-wheel-glyph-letter,
.sense-wheel-glyph-olfato .sense-wheel-glyph-letter,
.sense-wheel-glyph-gusto .sense-wheel-glyph-letter {
  --glyph-letter-offset-y: -0.4cm;
}

.sense-wheel-glyph-bursting .sense-wheel-glyph-letter {
  animation: sense-wheel-glyph-rune-bloom 1000ms ease forwards;
}

.sense-wheel-glyph.is-spell-active::before {
  border-color: transparent;
  box-shadow: none;
}

.sense-wheel-glyph.is-spell-active .sense-wheel-glyph-art {
  background-color: rgba(var(--sense-glyph-rgb), 1);
  opacity: 1;
  box-shadow: none;
  filter: none;
}

.sense-wheel-glyph.is-spell-active {
  opacity: 1;
}

body[data-era="past"].game-screen .sense-wheel-glyph-art,
body[data-era="present"].game-screen .sense-wheel-glyph-art,
body[data-era="future"].game-screen .sense-wheel-glyph-art {
  filter: none;
  background: rgba(var(--sense-glyph-rgb), 0.94);
  box-shadow:
    0 0 12px rgba(var(--sense-glyph-rgb), 0.84),
    0 0 28px rgba(var(--sense-glyph-rgb), 0.66),
    0 0 56px rgba(var(--sense-glyph-rgb), 0.48),
    0 0 108px rgba(255, 240, 190, 0.38),
    0 0 170px rgba(255, 250, 232, 0.3);
}

body[data-era="past"].game-screen .sense-wheel-glyph::before,
body[data-era="present"].game-screen .sense-wheel-glyph::before,
body[data-era="future"].game-screen .sense-wheel-glyph::before {
  border-color: rgba(var(--sense-glyph-rgb), 0.94);
  box-shadow:
    0 0 12px rgba(var(--sense-glyph-rgb), 0.84),
    0 0 28px rgba(var(--sense-glyph-rgb), 0.66),
    0 0 56px rgba(var(--sense-glyph-rgb), 0.48),
    0 0 108px rgba(255, 240, 190, 0.38),
    0 0 170px rgba(255, 250, 232, 0.3);
}

.sense-wheel-glyph-vista {
  --slot-angle: 0deg;
  --glyph-image: url("Imagenes/Interface/Glifos-Sentidos/Vista.png");
}

.sense-wheel-glyph-vista .sense-wheel-glyph-art {
  background-image: var(--glyph-image);
}

.sense-wheel-glyph-audicion {
  --slot-angle: 72deg;
  --glyph-image: url("Imagenes/Interface/Glifos-Sentidos/Audicion.png");
}

.sense-wheel-glyph-audicion .sense-wheel-glyph-art {
  background-image: var(--glyph-image);
  -webkit-mask-size: 100%;
  mask-size: 100%;
  background-size: 100%;
}

.sense-wheel-glyph-olfato {
  --slot-angle: 144deg;
  --glyph-image: url("Imagenes/Interface/Glifos-Sentidos/Olfato.png");
}

.sense-wheel-glyph-olfato .sense-wheel-glyph-art {
  background-image: var(--glyph-image);
}

.sense-wheel-glyph-gusto {
  --slot-angle: 288deg;
  --glyph-image: url("Imagenes/Interface/Glifos-Sentidos/Gusto.png");
}

.sense-wheel-glyph-gusto .sense-wheel-glyph-art {
  background-image: var(--glyph-image);
}

.sense-wheel-glyph-tacto {
  --slot-angle: 216deg;
  --glyph-image: url("Imagenes/Interface/Glifos-Sentidos/Tacto.png");
}

.sense-wheel-glyph-tacto .sense-wheel-glyph-art {
  background-image: var(--glyph-image);
}

@keyframes sense-wheel-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes sense-wheel-glyph-upright {
  from {
    transform: rotate(calc(-1 * var(--slot-angle)));
  }
  to {
    transform: rotate(calc(-360deg - var(--slot-angle)));
  }
}

.narracion-status {
  position: absolute;
  left: var(--tri-center-x);
  top: calc(var(--tri-center-y) + (var(--tri-height) / 6) - 20px);
  transform: translate(calc(-50% + 0.2cm), -50%);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  letter-spacing: 0.02em;
  text-align: center;
  white-space: pre-line;
  line-height: 1.1;
  color: rgba(245, 243, 238, 0.6);
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.7),
    0 0 12px rgba(255, 255, 255, 0.8),
    0 0 24px rgba(255, 255, 255, 0.65);
  font-style: normal;
  font-family: "Atkinson Hyperlegible", var(--font-accessible);
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  z-index: 6;
}

.narracion-status.is-visible {
  opacity: 1;
  animation: voluntad-fade 6s ease-in-out infinite;
}

body[data-era="present"].game-screen .narracion-status {
  color: rgba(24, 24, 24, 0.9);
  text-shadow:
    0 0 2px rgba(255, 244, 190, 0.28),
    0 0 8px rgba(0, 0, 0, 0.24),
    0 0 16px rgba(0, 0, 0, 0.18);
  font-family: "Atkinson Hyperlegible", var(--font-accessible);
  font-weight: 700;
}

.loading-waves {
  position: absolute;
  inset: -24vmax;
  pointer-events: none;
  z-index: 900;
  opacity: 0;
  transition: opacity 900ms ease-out;
  mix-blend-mode: normal;
}

.loading-waves-screen {
  position: fixed;
}

body.portal-loading-waves-active .loading-waves-screen {
  opacity: 1;
}

.loading-waves::after {
  display: none;
}

body.portal-loading-waves-active {
  background: #000000 !important;
  transition: none !important;
}

body.portal-loading-waves-active .screen {
  background: #000000 !important;
}

.loading-memories {
  position: fixed;
  inset: 0;
  display: block;
  pointer-events: none;
  opacity: 0;
  z-index: 850;
  transition: opacity 400ms ease;
  overflow: hidden;
}

.loading-memories.is-active {
  opacity: 1;
}

.loading-tarot {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 875;
  opacity: 0;
  transition: opacity 380ms ease;
}

.loading-tarot.is-active {
  opacity: 1;
}

.loading-tarot-card {
  --tarot-card-width: clamp(7.8rem, 11.7vw, 15rem);
  position: absolute;
  width: var(--tarot-card-width);
  aspect-ratio: 0.62;
  perspective: 1000px;
  filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.62));
}

.loading-tarot-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 760ms cubic-bezier(0.2, 0.72, 0.24, 1);
}

.loading-tarot-card.is-revealed .loading-tarot-card-inner {
  transform: rotateY(180deg);
}

.loading-tarot-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.55rem;
  object-fit: cover;
  backface-visibility: hidden;
  border: 1px solid rgba(230, 230, 230, 0.35);
}

.loading-tarot-face-front {
  transform: rotateY(180deg);
}

.loading-tarot-card-top {
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% - (clamp(8.5rem, 13vw, 13.6rem) + 1cm)));
}

.loading-tarot-card-bottom {
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + (clamp(8.5rem, 13vw, 13.6rem) + 1cm)));
}

.loading-tarot-card-left {
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% - (clamp(8.5rem, 12vw, 12.8rem) + 3cm)), -50%);
}

.loading-tarot-card-right {
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + (clamp(8.5rem, 12vw, 12.8rem) + 3cm)), -50%);
}

@media (max-width: 960px) {
  .loading-tarot-card {
    --tarot-card-width: clamp(6.45rem, 18vw, 9rem);
  }
}

.loading-memory-image {
  position: absolute;
  left: var(--loading-memory-x, 50%);
  top: var(--loading-memory-y, 50%);
  width: min(36vw, 39vh);
  max-width: 26rem;
  max-height: 36vh;
  object-fit: contain;
  opacity: 0;
  transition: opacity 300ms ease;
  filter: drop-shadow(0 0 24px rgba(0, 0, 0, 0.6));
  transform: translate(-50%, -50%);
}

.loading-memory-image.is-visible {
  opacity: 1;
}

.loading-wave {
  --wave-duration: 5.4s;
  --wave-delay: 0s;
  --loading-reveal-radius: 112vmax;
  --loading-reveal-feather: 16vmax;
  position: fixed;
  inset: -36vmax;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.62) 0%,
      rgba(224, 224, 224, 0.52) 30%,
      rgba(164, 164, 164, 0.38) 58%,
      rgba(98, 98, 98, 0.24) 100%
    );
  -webkit-mask-image:
    radial-gradient(
      circle at 50% 50%,
      transparent calc(var(--loading-reveal-radius) - var(--loading-reveal-feather)),
      #000 calc(var(--loading-reveal-radius) + var(--loading-reveal-feather))
    );
  mask-image:
    radial-gradient(
      circle at 50% 50%,
      transparent calc(var(--loading-reveal-radius) - var(--loading-reveal-feather)),
      #000 calc(var(--loading-reveal-radius) + var(--loading-reveal-feather))
    );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
  opacity: 0;
  filter: blur(9px) drop-shadow(0 0 96px rgba(236, 236, 236, 0.36));
}

body.portal-loading-waves-active .loading-wave {
  animation: loading-portal-collapse-wave var(--wave-duration) linear infinite;
  animation-delay: var(--wave-delay);
  filter: blur(3px);
}

.loading-wave-a {
  --wave-duration: 5.4s;
  --loading-reveal-feather: 17vmax;
  filter: blur(10px) drop-shadow(0 0 108px rgba(246, 246, 246, 0.42));
}

.loading-wave-b {
  --wave-duration: 5.4s;
  --loading-reveal-feather: 14vmax;
  filter: blur(8px) drop-shadow(0 0 78px rgba(216, 216, 216, 0.3));
}

.loading-wave-c {
  --wave-duration: 5.4s;
  --loading-reveal-feather: 20vmax;
  filter: blur(12px) drop-shadow(0 0 124px rgba(255, 255, 255, 0.44));
}

.loading-wave-1 { --wave-delay: 0s; }
.loading-wave-2 { --wave-delay: -1.8s; }
.loading-wave-3 { --wave-delay: -3.6s; }

.epoch-triangle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
  transition: opacity 2s ease;
}

.epoch-triangle-edge {
  position: absolute;
  height: 3px;
  border-radius: 999px;
  background: var(--epoch-triangle-color);
  box-shadow:
    0 0 14px rgba(var(--epoch-triangle-rgb), 1),
    0 0 30px rgba(var(--epoch-triangle-rgb), 0.95),
    0 0 54px rgba(var(--epoch-triangle-rgb), 0.82),
    0 0 86px rgba(var(--epoch-triangle-rgb), 0.7),
    0 0 120px rgba(var(--epoch-triangle-rgb), 0.5);
  filter: saturate(1.2);
  transition: background 2s ease, box-shadow 2s ease, filter 2s ease;
}

.epoch-triangle-edge-base {
  left: calc(var(--tri-center-x) - (var(--tri-size) / 2));
  top: calc(var(--tri-center-y) + (var(--tri-height) / 2));
  width: var(--tri-size);
  transform: translateY(-50%);
  transition: background 2s ease, box-shadow 2s ease, filter 2s ease;
}

body.triangle-orbit-active .epoch-triangle,
body.triangle-orbit-active .epoch-triangle-edge,
body.triangle-orbit-active .epoch-triangle-edge-base {
  transition: none;
}

.epoch-triangle-edge-left {
  left: calc(var(--tri-center-x) - (var(--tri-size) / 2));
  top: calc(var(--tri-center-y) + (var(--tri-height) / 2));
  width: var(--tri-size);
  transform-origin: 0 50%;
  transform: translateY(-50%) rotate(-60deg);
}

.epoch-triangle-edge-right {
  left: calc(var(--tri-center-x) + (var(--tri-size) / 2));
  top: calc(var(--tri-center-y) + (var(--tri-height) / 2));
  width: var(--tri-size);
  transform-origin: 0 50%;
  transform: translateY(-50%) rotate(-120deg);
}

body[data-era="past"].game-screen .epoch-triangle {
  opacity: 0.5;
}

body[data-era="present"].game-screen .epoch-triangle {
  opacity: 0.96;
  filter: blur(0.9px) saturate(1.24);
  mix-blend-mode: screen;
}

body[data-era="present"].game-screen .epoch-triangle-edge {
  height: 2.6px;
  background: rgba(var(--epoch-triangle-rgb), 0.94);
  box-shadow:
    0 0 12px rgba(var(--epoch-triangle-rgb), 0.84),
    0 0 28px rgba(var(--epoch-triangle-rgb), 0.66),
    0 0 56px rgba(var(--epoch-triangle-rgb), 0.48),
    0 0 108px rgba(255, 240, 190, 0.38),
    0 0 170px rgba(255, 250, 232, 0.3);
}

body[data-era="future"].game-screen .epoch-triangle {
  opacity: 0.7;
}

body.triangle-orbit-active[data-era="past"].game-screen .epoch-triangle,
body.triangle-orbit-active[data-era="future"].game-screen .epoch-triangle {
  opacity: 1;
}

body.triangle-orbit-active[data-era="past"].game-screen .game-layout {
  --epoch-triangle-color: #ffd200;
  --epoch-triangle-rgb: 255, 210, 0;
}

body.triangle-orbit-active[data-era="future"].game-screen .game-layout {
  --epoch-triangle-color: #00b3b3;
  --epoch-triangle-rgb: 0, 179, 179;
}
body.triangle-orbit-active[data-era="present"].game-screen .game-layout {
  --epoch-triangle-color: #ff1a1a;
  --epoch-triangle-rgb: 255, 26, 26;
}

.fecha-de-la-partida {
  font-family: var(--font-accessible);
  font-size: clamp(1.05rem, 2.4vw, 1.425rem);
  line-height: var(--hud-line-height);
  letter-spacing: 0.02em;
  opacity: 0.85;
  margin: 0;
  position: fixed;
  top: 0;
  right: 0;
  transform: translateX(50%);
  text-align: right;
  z-index: 1405;
}

.fecha-de-la-partida span {
  display: block;
}

.profecia {
  font-size: clamp(0.5rem, 1.05vw, 0.7rem);
  line-height: var(--hud-line-height);
  font-style: normal;
  margin: 0;
  position: fixed;
  top: calc(var(--audio-hud-top) + 3.35em);
  right: 1rem;
  left: auto;
  transform: translateX(9cm) scale(0.8);
  transform-origin: top right;
  text-align: right;
  max-width: min(48vw, 420px);

  opacity: 0.7;
  pointer-events: none;
}

.profecia span {
  display: block;
}

.titulo-del-giro {
  font-size: clamp(1.43rem, 3.38vw, 2.145rem);
  font-style: normal;
  margin: clamp(2px, 0.6vw, 7px) 0 0.2cm;
  position: relative;
  transform: translateY(0);
  z-index: 7;
  font-family: "Atkinson Hyperlegible", var(--font-accessible);
  font-weight: 700;
}

.nombre-personaje {
  font-size: clamp(1.53rem, 3.4vw, 1.87rem);
  margin: 0;
  font-family: "Atkinson Hyperlegible", var(--font-accessible);
  font-weight: 700;
  line-height: 1.1;
  white-space: pre-line;
}

.nombre-personaje-avatar {
  display: block;
  font-size: 70%;
  line-height: 1.05;
}

.game-orb-main-block .nombre-personaje {
  order: -1;
  margin-bottom: -0.1cm;
  position: relative;
  z-index: 2;
}

.consulta-notas {
  position: absolute;
  top: calc(100% + 34px);
  left: clamp(8px, 1.2vw, 16px);
  width: clamp(90px, 10vw, 140px);
  min-height: 2.4em;
  padding-left: 0.55em;
  font-family: var(--font-accessible) !important;
  font-size: clamp(0.66rem, 1.25vw, 0.9rem);
  line-height: 1.18;
  letter-spacing: 0.01em;
  text-align: left;
  opacity: 1;
  pointer-events: none;
  border-left: 0;
  transform: rotate(-0.45deg);
}

.consulta-notas::before {
  content: none;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: currentColor;
  transform-origin: center top;
  transform: scaleY(1);
}

.consulta-notas.is-line-shrinking::before {
  animation: consultaNotasLineShrink var(--consulta-notas-fade, 5s) linear forwards;
}

.consulta-notas.is-line-resetting::before {
  animation: none !important;
  transform: scaleY(1);
}

@keyframes consultaNotasLineShrink {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0.2);
  }
}

@keyframes narracion-line-reveal {
  0% {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.consulta-notas-title {
  margin: 0 0 0.14em;
  font-weight: 700;
  font-style: normal;
  text-transform: none;
  opacity: 1;
  font-family: var(--font-accessible) !important;
  font-size: 0.82rem !important;
  line-height: 1.15 !important;
  filter: none !important;
  text-shadow: none !important;
}

.consulta-notas-scroll {
  width: 100%;
  height: 8.5cm;
  max-height: 8.5cm;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--epoch-triangle-rgb), 0.5) transparent;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
}

.consulta-notas-scroll::-webkit-scrollbar {
  width: 4px;
}

.consulta-notas-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.consulta-notas-scroll::-webkit-scrollbar-thumb {
  background: rgba(var(--epoch-triangle-rgb), 0.5);
  border-radius: 999px;
}

.consulta-notas-list {
  display: grid;
  gap: 1em;
}

.consulta-notas-item {
  margin: 0;
  font-style: italic;
  text-align: justify;
  text-align-last: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  opacity: 0.95;
  transition: opacity 5s ease;
}

.consulta-notas-list.is-turn-fading .consulta-notas-item {
  opacity: 0;
}

/* Keep notes flat: no glow, no gradient, no text effects in any era. */
body.game-screen .consulta-notas,
body.game-screen .consulta-notas * {
  text-shadow: none !important;
  filter: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-text-stroke: 0 transparent !important;
}

body.game-screen .consulta-notas {
  color: var(--narracion-color) !important;
}

.inventario-panel {
  --inventory-postit-image: url("Imagenes/Interface/Post-It/Amarillo.png");
  --postit-drag-x: 0px;
  --postit-drag-y: 0px;
  --inventory-postit-tilt: 15deg;
  color: #000000 !important;
  font-family: var(--font-bitacora) !important;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 5.6cm;
  min-height: 5.6cm;
  max-height: 5.6cm;
  padding: 0.3cm;
  background-image: var(--inventory-postit-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  transform: translate(var(--postit-drag-x), var(--postit-drag-y)) rotate(var(--inventory-postit-tilt));
}

.inventario-panel[data-empty="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.inventario-title {
  margin: 0 0 0.38cm;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  opacity: 1;
  font-family: var(--font-bitacora) !important;
  font-size: 0.82rem !important;
  line-height: 1.15 !important;
  filter: none !important;
  text-shadow: none !important;
}

.inventario-list {
  display: grid;
  gap: 0.38em;
  max-height: calc(100% - 1.35rem);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--epoch-triangle-rgb), 0.5) transparent;
  padding-right: 4px;
  width: 100%;
  transform: translateY(-0.2cm);
}

.inventario-list::-webkit-scrollbar {
  width: 3px;
}

.inventario-list::-webkit-scrollbar-track {
  background: transparent;
}

.inventario-list::-webkit-scrollbar-thumb {
  background: rgba(var(--epoch-triangle-rgb), 0.5);
  border-radius: 999px;
}

.inventario-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2em;
  width: 100%;
  justify-items: stretch;
  align-items: start;
}

.inventario-entry-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.36em;
  width: 100%;
}

.inventario-item,
.inventario-empty {
  margin: 0;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  opacity: 1;
  font-family: var(--font-bitacora) !important;
  font-weight: 400 !important;
  font-size: 0.82rem !important;
  line-height: 1.15 !important;
}

.inventario-item {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font-style: normal;
  border: 0;
  background: transparent;
  color: #000000 !important;
  padding: 0;
  cursor: pointer;
  font: inherit;
  opacity: 1;
  text-align: left !important;
  justify-self: stretch;
  align-self: start;
  text-decoration: none;
}

.inventario-item.is-active {
  opacity: 1;
  text-decoration: none;
}

.inventario-dracma-take {
  margin: 0;
  padding: 0 0.28em;
  border: 0;
  background: transparent;
  color: #000000 !important;
  font-family: var(--font-bitacora) !important;
  font-size: 0.76rem !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  align-self: start;
}

.inventario-dracma-take:hover,
.inventario-dracma-take:focus-visible {
  text-decoration: none;
  opacity: 1;
}

.inventario-empty {
  font-style: italic;
  opacity: 0.7;
}

.inventario-item-description {
  margin: 0;
  width: 100%;
  min-width: 0;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--font-bitacora) !important;
  opacity: 1;
  font-style: italic;
  font-weight: 400;
  padding-left: 1.05em;
  font-size: 0.82rem !important;
  line-height: 1.15 !important;
  color: #000000 !important;
}

.inventario-item-description.is-dracma-artifact {
  cursor: pointer;
}

.inventario-dracma-travel {
  position: fixed;
  left: 50vw;
  top: 50vh;
  width: 110px;
  height: 110px;
  pointer-events: none;
  opacity: 0;
  z-index: 1500;
  transform: translate(-50%, -50%) scale(1);
}

.inventario-dracma-travel.is-visible {
  opacity: 1;
}

.inventario-dracma-travel-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.inventory-travel-terminal {
  --inv-term-fg: var(--codex-console-fg, #8ef7d9);
  --inv-term-fg-strong: var(--codex-console-fg-strong, #b9ffe9);
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(92vw, 1400px);
  max-height: min(74vh, 760px);
  padding: 0.45rem 0.55rem;
  font-family: "Share Tech Mono", "Cascadia Mono", "Consolas", monospace;
  font-size: clamp(0.84rem, 0.92vw, 1rem);
  line-height: 1.26;
  color: var(--inv-term-fg);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 9000;
  transition:
    left 900ms cubic-bezier(0.19, 1, 0.22, 1),
    top 900ms cubic-bezier(0.19, 1, 0.22, 1),
    transform 900ms cubic-bezier(0.19, 1, 0.22, 1),
    width 900ms cubic-bezier(0.19, 1, 0.22, 1),
    max-height 900ms cubic-bezier(0.19, 1, 0.22, 1),
    opacity 220ms linear;
}

.inventory-travel-terminal.is-visible {
  opacity: 1;
}

.inventory-travel-terminal.is-docked {
  left: 1.3rem;
  top: 1rem;
  width: min(95vw, 1200px);
  max-height: min(92vh, 900px);
  transform: translate(0, 0);
}

.inventory-travel-terminal-header {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  color: var(--inv-term-fg-strong);
  text-shadow: 0 0 9px rgba(142, 247, 217, 0.35);
  white-space: pre-wrap;
}

.inventory-travel-terminal-prompt {
  white-space: pre-wrap;
}

.inventory-travel-terminal-caret {
  width: 0.58ch;
  height: 1.06em;
  background: currentColor;
  display: inline-block;
  vertical-align: middle;
  animation: codex-console-caret-blink 1s steps(1, end) infinite;
}

.inventory-travel-terminal-log {
  margin-top: 0.42rem;
  max-height: calc(100vh - 3.6rem);
  overflow-y: auto;
  scrollbar-width: none;
  opacity: 0;
  transition: opacity 280ms ease;
}

.inventory-travel-terminal-log::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.inventory-travel-terminal.is-docked .inventory-travel-terminal-log {
  opacity: 1;
}

.inventory-travel-terminal-line {
  margin: 0;
  padding: 0;
  white-space: pre-wrap;
  color: var(--inv-term-fg);
}

body.game-screen .inventario-panel * {
  text-shadow: none !important;
  filter: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-text-stroke: 0 transparent !important;
}

body.game-screen .inventario-panel {
  text-shadow: none !important;
  filter: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-text-stroke: 0 transparent !important;
}

.game-text {
  z-index: 5;
  width: min(680px, 90vw);
  display: grid;
  gap: 12px;
  align-items: center;
  text-align: center;
  margin-top: calc(-3.2vh + 4px);
}

.chapas-reward {
  display: none;
  position: absolute;
  left: 50%;
  top: var(--tri-side-y);
  transform: translate(-50%, calc(100% + 18px));
  grid-template-columns: 1fr;
  gap: 0.2rem;
  align-items: center;
  justify-items: center;
  padding: 0.25rem 0.45rem;
  border-radius: 10px;
  width: min(220px, 60vw);
  border: 1px solid rgba(185, 255, 233, 0.28);
  background: rgba(12, 53, 64, 0.2);
  box-shadow: 0 0 18px rgba(108, 226, 255, 0.18);
  z-index: 8;
}

body.is-partida-cerrada .chapas-reward {
  display: grid;
  transform: translate(-50%, calc(100% + 18px - 3cm));
}

.chapas-reward-title {
  margin: 0;
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--codex-console-fg-strong, #e2fff5);
}

.chapas-reward-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem;
  align-items: center;
}

.chapas-reward-item {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  animation: chapas-reward-float 3.6s ease-in-out infinite;
}

.chapas-reward-chip {
  width: clamp(46px, 6.2vw, 74px);
  height: auto;
  display: block;
  filter: drop-shadow(0 0 12px rgba(108, 226, 255, 0.35));
  transition: transform 200ms ease, filter 200ms ease;
}

.chapas-reward-item:hover .chapas-reward-chip {
  transform: scale(1.04);
  filter: drop-shadow(0 0 16px rgba(108, 226, 255, 0.55));
}

.chapas-reward-label {
  display: none;
}

@keyframes chapas-reward-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.game-bitacora-dock {
  --bitacora-cover: url("images/Base/Libreta/Notas-back.png");
  --bitacora-back: url("images/Base/Libreta/Notas-back.png");
  --bitacora-inside: url("images/Base/Libreta/Notas-inside.png");
  --bitacora-shift-right: clamp(128px, 14vw, 228px);
  --bitacora-fullscreen-shift-x: 0cm;
  position: absolute;
  left: calc(
    50%
    - ((min(680px, 90vw) + min(1100px, 92vw)) / 4)
    - var(--bitacora-shift-right)
    - var(--bitacora-fullscreen-shift-x)
  );
  top: calc(50% + clamp(126px, 16vh, 244px) + 2cm);
  width: 254px;
  height: 382px;
  z-index: 18;
  transform: translate(-50%, -50%) rotate(-10deg);
  transform-origin: center center;
  perspective: 1200px;
  pointer-events: auto;
}

:fullscreen body.game-screen .game-bitacora-dock,
:-webkit-full-screen body.game-screen .game-bitacora-dock {
  --bitacora-fullscreen-shift-x: 1cm;
}

/* Keep notebook below game-text stack so prophecy overlay remains visible on top. */
body.game-screen .game-bitacora-dock {
  z-index: 1300 !important;
}

/* Notebook should cover location/date only while open/turning. */
body.game-screen.bitacora-open .game-bitacora-dock,
body.game-screen.bitacora-turning .game-bitacora-dock {
  z-index: 1410 !important;
}

/* Overlay title above notebook location (independent from cover texture). */
.game-bitacora-dock::before {
  content: "NOTAS";
  position: absolute;
  top: calc(10% + 1cm) !important;
  left: 50%;
  transform: translateX(-50%);
  width: 84%;
  text-align: center;
  font-family: var(--font-bitacora);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.2vw, 2rem);
  line-height: 1;
  letter-spacing: 0.08em;
  color: rgba(30, 16, 10, 0.82);
  text-shadow: 0 1px 0 rgba(255, 245, 225, 0.22);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
  z-index: 50;
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease 0.3s, visibility 0s linear 0.3s;
}

html[lang="en"] .game-bitacora-dock::before {
  content: "NOTES";
}

/* During notebook page-turn animation, hide overlay labels/text. */
body.bitacora-turning .game-bitacora-dock::before,
body.bitacora-turning .game-bitacora-dock::after,
body.bitacora-turning .profecia {
  opacity: 0 !important;
  visibility: hidden !important;
  transition-delay: 0s !important;
}

body.bitacora-open .game-bitacora-dock::before,
body.bitacora-open .game-bitacora-dock::after,
body.bitacora-open .profecia {
  opacity: 0 !important;
  visibility: hidden !important;
  transition-delay: 0s !important;
}

.game-bitacora-dock .game-mini-book {
  position: relative;
  z-index: 1;
}

.objetivo-partida-alert {
  position: fixed;
  left: calc(clamp(72px, 10vw, 120px) + 10px + 1cm + clamp(200px, 32ch, 340px) + 1.25cm);
  top: calc((clamp(72px, 10vw, 120px) - 2.6em) / 2 + 0.15cm);
  transform: translateY(-50%);
  width: auto;
  min-width: 0;
  max-width: min(36ch, 38vw);
  min-height: 0;
  max-height: none;
  display: grid;
  gap: 0.06rem;
  align-content: center;
  text-align: center;
  font-family: "Atkinson Hyperlegible", "Atkinson Hyperlegible Next", "Noto Sans", "Verdana", "Trebuchet MS", sans-serif;
  font-weight: 700;
  font-size: clamp(0.8rem, 1.05vw, 0.96rem);
  line-height: 1.08;
  letter-spacing: 0.02em;
  color: rgba(255, 244, 214, 0.96);
  text-shadow: none;
  padding: 0;
  box-sizing: border-box;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1425;
}

.objetivo-partida-alert span {
  font-family: inherit !important;
}

body[data-era="future"].game-screen .inventario-panel {
  --inventory-postit-image: url("Imagenes/Interface/Post-It/Cian.png");
}

body[data-era="future"].game-screen .objetivo-partida-alert {
  color: rgba(151, 245, 255, 0.98);
}

body[data-era="past"].game-screen .inventario-panel {
  --inventory-postit-image: url("Imagenes/Interface/Post-It/Cobre.png");
}

body[data-era="past"].game-screen .objetivo-partida-alert {
  color: rgba(255, 225, 166, 0.98);
}

/* Keep post-it text rendering identical across all eras/themes. */
body.game-screen .inventario-panel,
body.game-screen .bitacora-objetivo-partida {
  --postit-text-font: var(--font-bitacora);
  --postit-text-weight: 400;
  --postit-text-color: #000000;
}

body.game-screen .inventario-panel,
body.game-screen .inventario-panel *,
body.game-screen .bitacora-objetivo-partida,
body.game-screen .bitacora-objetivo-partida * {
  font-family: var(--postit-text-font) !important;
  font-weight: var(--postit-text-weight) !important;
  font-style: normal !important;
  color: var(--postit-text-color) !important;
  -webkit-text-fill-color: var(--postit-text-color) !important;
  text-shadow: none !important;
  filter: none !important;
}

.objetivo-partida-alert.is-visible {
  visibility: visible;
  animation: objetivo-partida-alert-fade 5000ms ease both;
}

@keyframes objetivo-partida-alert-fade {
  0% {
    opacity: 0;
    transform: translateY(calc(-50% + 8px));
  }
  14% {
    opacity: 1;
    transform: translateY(-50%);
  }
  78% {
    opacity: 1;
    transform: translateY(-50%);
  }
  100% {
    opacity: 0;
    transform: translateY(calc(-50% - 8px));
  }
}

.game-mini-book {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  --bitacora-note-title-size: clamp(0.68rem, 1.24vw, 0.92rem);
  --bitacora-note-body-size: clamp(0.62rem, 1.12vw, 0.82rem);
  --bitacora-note-pad-y: 8%;
  --bitacora-note-pad-x: 11%;
  --bitacora-note-top-pad-bottom: 11%;
  --bitacora-note-top-pad-right-extra: 20px;
  --bitacora-note-top-shift-y: 15px;
  --bitacora-note-top-line-width: 96%;
  --bitacora-note-top-line-pad-left: 30px;
  --bitacora-note-top-line-pad-right: 6px;
  --bitacora-note-top-title-shift-x: 10px;
  --bitacora-note-bottom-pad-left-extra: 15px;
  --bitacora-note-bottom-line-width: 82%;
  --bitacora-note-bottom-title-shift-x: -8px;
  --bitacora-note-bottom-shift-y: 3%;
  --bitacora-note-page-num-right: calc(20% - 3px);
  --bitacora-note-page-num-bottom: 8%;
  --bitacora-note-bottom-page-num-right: calc(72px - 1.4cm);
  --bitacora-note-bottom-page-num-bottom: 29px;
  --bitacora-note-bottom-font-compensation: 1.18;
}

.game-book-pages,
.game-book-pages-back,
.game-book-front,
.game-page-up,
.game-page-turn,
.game-page-face {
  position: absolute;
  inset: 0;
}

.game-book-pages,
.game-book-pages-back {
  background: var(--bitacora-inside) center / 100% 100% no-repeat;
}

.game-book-pages {
  z-index: 1;
  cursor: pointer;
  overflow: hidden;
}

.game-book-pages-back {
  z-index: 0;
  pointer-events: none;
}

.game-book-front {
  z-index: 2;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  transform-origin: center top;
  transform-style: preserve-3d;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  transition: transform 600ms cubic-bezier(0.21, 0.77, 0.26, 0.99);
  overflow: hidden;
  cursor: pointer;
}

.game-book-front-face,
.game-book-back-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms linear;
}

.game-book-front-face {
  transform: translateZ(1px);
  background: var(--bitacora-cover) center / 100% 100% no-repeat;
  opacity: 1;
}

.game-book-back-face {
  transform: translateZ(2px);
  background: var(--bitacora-inside) center / 100% 100% no-repeat;
  opacity: 0;
}

.game-mini-book[data-open="true"] .game-book-front {
  transform: rotateX(158deg);
  z-index: 4;
}

.game-mini-book[data-open="true"][data-page-up="true"] .game-book-front,
.game-mini-book[data-open="true"][data-turning="true"] .game-book-front {
  z-index: 0;
  pointer-events: none;
}

.game-mini-book[data-open="true"] .game-book-front-face {
  opacity: 0;
}

.game-mini-book[data-open="true"] .game-book-back-face {
  opacity: 1;
}

.game-mini-book[data-open="true"][data-page-up="true"] .game-book-back-face,
.game-mini-book[data-open="true"][data-turning="true"] .game-book-back-face {
  background: var(--bitacora-inside) center / 100% 100% no-repeat;
  opacity: 1;
}

.game-mini-book[data-open="true"] .game-book-pages {
  z-index: 2;
}

.spell-codex-helper {
  --spell-codex-shift-right: clamp(128px, 14vw, 228px);
  position: absolute;
  left: calc(50% - ((min(680px, 90vw) + min(1100px, 92vw)) / 4) - var(--spell-codex-shift-right) + 126px - 6cm);
  top: calc(50% + clamp(126px, 16vh, 244px) + 0.35cm - 10cm);
  width: clamp(86px, 7.2vw, 122px);
  aspect-ratio: 263 / 348;
  z-index: 1296;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: center center;
  pointer-events: none;
}

body.is-partida-cerrada.game-screen .spell-codex-helper {
  position: fixed;
  left: auto;
  right: clamp(18px, 4.8vw, 88px);
  top: 50%;
  width: clamp(92px, 7.8vw, 128px);
  transform: translateY(-50%) rotate(0deg);
  z-index: 1412;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.spell-codex-helper.is-open,
body.game-screen.bitacora-open .spell-codex-helper,
body.game-screen.bitacora-turning .spell-codex-helper {
  z-index: 1408;
}

body.is-partida-cerrada.game-screen .spell-codex-helper.is-open,
body.is-partida-cerrada.game-screen .spell-codex-helper.is-animating {
  z-index: 1420;
}

.spell-codex-dock {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0.9;
  transition:
    transform 220ms cubic-bezier(0.22, 0.71, 0.24, 1),
    filter 220ms ease,
    opacity 180ms ease;
  transform: scale(1);
  outline: none;
}

.spell-codex-dock:hover,
.spell-codex-dock:focus-visible {
  transform: scale(1.14);
  filter:
    drop-shadow(0 0 16px rgba(120, 215, 255, 0.45))
    drop-shadow(0 0 36px rgba(60, 140, 255, 0.24));
}

.spell-codex-dock:focus-visible {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.28),
    0 0 0 5px rgba(108, 210, 255, 0.14);
}

.spell-codex-helper.is-open .spell-codex-dock,
.spell-codex-helper.is-animating .spell-codex-dock {
  filter:
    drop-shadow(0 0 16px rgba(129, 227, 255, 0.58))
    drop-shadow(0 0 42px rgba(34, 130, 255, 0.28));
}

.spell-codex-book-cover {
  --spell-codex-image: url("images/Base/Codex/Codex.png?v=8");
  display: block;
  width: 100%;
  height: 100%;
  background-image: var(--spell-codex-image), linear-gradient(#2a1d14, #2a1d14);
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: contain, 42% 42%;
  pointer-events: none;
}

.spell-codex-holo {
  position: absolute;
  left: calc(100% - 8px);
  bottom: clamp(-2px, 1vh, 8px);
  width: var(--spell-codex-stage-width, 170px);
  height: var(--spell-codex-stage-height, 240px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(18px, 20px, 0) scale(0.92);
  transform-origin: left bottom;
  transition:
    opacity 260ms ease,
    transform 360ms cubic-bezier(0.22, 0.72, 0.24, 1),
    visibility 0s linear 260ms;
}

.spell-codex-helper.is-open .spell-codex-holo {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: 0s;
}

.spell-codex-holo-beam {
  display: none;
}

.spell-codex-panels {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.spell-codex-panel {
  position: absolute;
  left: var(--spell-panel-x, 0px);
  top: var(--spell-panel-y, 0px);
  width: 112px;
  aspect-ratio: 0.72;
  appearance: none;
  -webkit-appearance: none;
  padding: 10px;
  border: 1px solid rgba(132, 228, 255, 0.62);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(8, 28, 56, 0.92) 0%, rgba(6, 22, 42, 0.82) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(198, 249, 255, 0.08),
    0 0 18px rgba(70, 180, 255, 0.18),
    0 0 48px rgba(18, 84, 160, 0.18);
  overflow: hidden;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  transform: translate(-42px, 118px) scale(0.42);
  transform-origin: left bottom;
  pointer-events: auto;
  cursor: pointer;
  transition:
    left 260ms cubic-bezier(0.22, 0.72, 0.24, 1),
    top 260ms cubic-bezier(0.22, 0.72, 0.24, 1),
    width 260ms cubic-bezier(0.22, 0.72, 0.24, 1),
    transform 220ms cubic-bezier(0.22, 0.72, 0.24, 1),
    box-shadow 220ms ease,
    filter 220ms ease,
    opacity 220ms ease;
}

.spell-codex-helper.is-open .spell-codex-panel {
  animation: spell-codex-panel-rise 420ms cubic-bezier(0.22, 0.72, 0.24, 1) forwards;
  animation-delay: var(--spell-codex-delay, 0ms);
}

.spell-codex-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(168, 242, 255, 0.12) 0%, rgba(168, 242, 255, 0) 26%),
    linear-gradient(90deg, rgba(126, 226, 255, 0.18) 0%, rgba(126, 226, 255, 0) 42%),
    repeating-linear-gradient(
      180deg,
      rgba(136, 233, 255, 0.06) 0 2px,
      rgba(9, 41, 81, 0.02) 2px 6px
    );
  pointer-events: none;
  animation: codex-archive-progress-flicker 6.4s linear infinite;
}

.spell-codex-panel::after {
  content: none;
}

.spell-codex-panel:hover:not(.is-selected),
.spell-codex-panel:focus-visible:not(.is-selected) {
  z-index: 45;
  box-shadow:
    inset 0 0 0 1px rgba(214, 252, 255, 0.12),
    0 0 20px rgba(118, 220, 255, 0.32),
    0 0 52px rgba(34, 130, 255, 0.26);
  opacity: 0.9;
  transform: translate(0, -10px) scale(1.05);
}

.spell-codex-panel:focus-visible {
  outline: none;
}

.spell-codex-helper.has-selection .spell-codex-panel:not(.is-selected) {
  display: none;
}

.spell-codex-panel.is-selected {
  left: var(--spell-selected-x, 152px);
  top: var(--spell-selected-y, 34px);
  width: 205px;
  z-index: 90;
  opacity: 1 !important;
  filter: saturate(1.06);
  box-shadow:
    inset 0 0 0 1px rgba(232, 252, 255, 0.18),
    0 0 28px rgba(126, 226, 255, 0.42),
    0 0 72px rgba(34, 130, 255, 0.28);
  transform: translate(0, 0) scale(1) rotate(0deg) !important;
}

.spell-codex-panel-title {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  min-height: 2.5em;
  font-family: var(--font-ui);
  font-size: clamp(0.6rem, 0.9vw, 0.76rem);
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(218, 249, 255, 0.96);
  text-shadow:
    0 0 4px rgba(0, 240, 255, 0.72),
    0 0 12px rgba(0, 240, 255, 0.84),
    0 0 24px rgba(0, 240, 255, 0.72),
    0 0 42px rgba(0, 240, 255, 0.58),
    0 0 66px rgba(0, 240, 255, 0.42);
  animation: future-title-flicker 2.2s infinite;
}

.spell-codex-panel-art {
  position: relative;
  z-index: 1;
  width: 100%;
  height: calc(100% - 2.9em);
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
}

.spell-codex-panel-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(168, 242, 255, 0.05) 0 1px,
      rgba(6, 24, 48, 0.02) 1px 4px
    );
  mix-blend-mode: screen;
  opacity: 0.72;
  pointer-events: none;
  animation: codex-archive-progress-flicker 5.4s linear infinite reverse;
}

.spell-codex-panel-art.is-umbra::after {
  display: none;
}

.spell-codex-panel-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter:
    drop-shadow(0 0 12px rgba(132, 228, 255, 0.22))
    drop-shadow(0 0 24px rgba(24, 94, 171, 0.16));
  animation: codex-conjuros-drift 2.4s ease-in-out infinite;
}

.spell-codex-panel.is-selected .spell-codex-panel-art img {
  transform: translateY(-0.5cm);
}

.spell-codex-panel.has-tone-variant {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.spell-codex-panel.has-tone-variant::before {
  content: none;
}

.spell-codex-panel.has-tone-variant:hover:not(.is-selected),
.spell-codex-panel.has-tone-variant:focus-visible:not(.is-selected),
.spell-codex-panel.has-tone-variant.is-selected {
  box-shadow: none;
}

.spell-codex-panel.has-tone-variant .spell-codex-panel-title {
  display: none;
}

.spell-codex-panel-art.has-tone-variant {
  --spell-panel-color: rgba(110, 234, 255, 0.96);
  height: 100%;
  border-radius: 0;
  overflow: visible;
}

.spell-codex-panel-art.has-tone-variant::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--spell-panel-color);
  -webkit-mask-image: var(--spell-panel-image);
  mask-image: var(--spell-panel-image);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  filter:
    drop-shadow(0 0 14px color-mix(in srgb, var(--spell-panel-color) 72%, transparent))
    drop-shadow(0 0 28px color-mix(in srgb, var(--spell-panel-color) 52%, transparent));
  pointer-events: none;
}

.spell-codex-panel-art.has-tone-variant::after {
  content: none;
}

.spell-codex-panel-art.has-tone-variant.is-variant-lux {
  --spell-panel-color: rgba(110, 234, 255, 0.96);
}

.spell-codex-panel-art.has-tone-variant.is-variant-umbra {
  --spell-panel-color: rgba(255, 136, 84, 0.96);
}

.spell-codex-panel-art.has-tone-variant img {
  display: none;
  animation: none;
}

.spell-codex-panel.has-tone-variant.is-selected .spell-codex-panel-art img {
  transform: none;
}

.spell-codex-panel.is-empty {
  display: grid;
  place-items: center;
}

.spell-codex-panel-empty {
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-family: var(--font-ui);
  font-size: clamp(0.62rem, 0.9vw, 0.78rem);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(208, 242, 255, 0.8);
}

@keyframes spell-codex-panel-rise {
  0% {
    opacity: 0;
    transform: translate(-42px, 118px) scale(0.42);
  }
  100% {
    opacity: 0.9;
    transform: translate(0, 0) scale(1);
  }
}


.game-page-up,
.game-page-turn {
  display: block;
  overflow: hidden;
  transform-origin: center top;
  transform-style: preserve-3d;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  z-index: 3;
  box-shadow: none;
}

.game-page-up {
  opacity: 0;
  pointer-events: none;
  transform: rotateX(158deg);
}

.game-page-turn {
  opacity: 0;
  pointer-events: none;
  transform: rotateX(0deg);
}

.game-mini-book[data-page-up="true"] .game-page-up {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

.game-mini-book[data-turning="true"][data-turn-direction="next"] .game-page-turn {
  opacity: 1;
  transform: rotateX(158deg);
  transition: transform 600ms cubic-bezier(0.21, 0.77, 0.26, 0.99);
}

.game-mini-book[data-turning="true"][data-turn-direction="prev"] .game-page-up {
  opacity: 1;
  pointer-events: none;
  transform: rotateX(0deg);
  transition: transform 600ms cubic-bezier(0.21, 0.77, 0.26, 0.99);
}

.game-mini-book[data-turning="true"][data-turn-direction="next"] .game-book-pages {
  opacity: 0;
}

.game-page-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  background: var(--bitacora-inside) center / 100% 100% no-repeat;
}

.game-page-front {
  transform: translateZ(1px);
  background: var(--bitacora-inside) center / 100% 100% no-repeat;
}

.game-page-back {
  transform: rotateX(180deg) translateZ(1px);
  background: var(--bitacora-inside) center / 100% 100% no-repeat;
}

.game-book-note-sheet {
  position: absolute;
  inset: 0;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 6px;
  padding:
    clamp(14px, var(--bitacora-note-pad-y), 22px)
    clamp(24px, var(--bitacora-note-pad-x), 38px);
  overflow: hidden;
  pointer-events: none;
  color: rgba(49, 34, 22, 0.95);
  text-shadow: 0 1px 0 rgba(255, 247, 230, 0.2);
  box-sizing: border-box;
}

.game-book-note-sheet-top {
  /* Hoja superior: visualmente esta al reves por la rotacion de la portada.
     Por eso el flujo se ancla con `align-content: end` para que el titulo quede
     arriba en pantalla y las notas aparezcan debajo, sin usar offsets fijos. */
  transform: none;
  transform-origin: center center;
  align-content: end;
  padding-bottom: clamp(28px, var(--bitacora-note-top-pad-bottom), 42px);
  padding-right: calc(clamp(24px, var(--bitacora-note-pad-x), 38px) + var(--bitacora-note-top-pad-right-extra));
  translate: 0 var(--bitacora-note-top-shift-y);
}

.game-book-note-sheet-top > * {
  transform: scaleY(-1);
  transform-origin: center center;
}

.game-book-note-sheet-bottom {
  padding-left: calc(clamp(28px, var(--bitacora-note-pad-x), 42px) + var(--bitacora-note-bottom-pad-left-extra));
  padding-right: clamp(28px, var(--bitacora-note-pad-x), 42px);
  translate: 0 var(--bitacora-note-bottom-shift-y);
}

.game-mini-book[data-open="false"] .game-book-note-sheet-bottom {
  /* Ajuste fino solicitado para la pagina precargada visible detras en estado cerrado. */
  translate: 0.2cm var(--bitacora-note-bottom-shift-y);
}

.game-book-note-title {
  margin: 0;
  display: block;
  justify-self: center;
  text-align: center;
  font-family: var(--font-bitacora);
  font-size: var(--bitacora-note-title-size);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.9;
  width: 78%;
  max-width: 78%;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.game-book-note-title.is-preserve-case {
  text-transform: none;
}

.game-book-note-sheet-top .game-book-note-title {
  margin-inline: auto;
  /* Compensa el padding derecho extra de la hoja superior. */
  transform: scaleY(-1) translateX(var(--bitacora-note-top-title-shift-x));
}

.game-book-note-sheet-bottom .game-book-note-title {
  margin-inline: auto;
  /* Compensa el padding izquierdo extra de la hoja inferior. */
  transform: translateX(var(--bitacora-note-bottom-title-shift-x));
  font-size: calc(var(--bitacora-note-title-size) * var(--bitacora-note-bottom-font-compensation));
}

.game-book-note-line,
.game-book-note-empty {
  margin: 0;
  display: block;
  font-family: var(--font-bitacora);
  font-size: var(--bitacora-note-body-size);
  line-height: 1.18;
  color: rgba(43, 30, 20, 0.95);
  width: 100%;
  max-width: 100%;
  text-align: left;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  hyphens: none;
  padding-left: 15px;
  box-sizing: border-box;
}

.game-book-note-line.is-giro-line {
  text-align: center;
}

.game-book-note-sheet-bottom .game-book-note-line,
.game-book-note-sheet-bottom .game-book-note-empty {
  width: var(--bitacora-note-bottom-line-width);
  max-width: var(--bitacora-note-bottom-line-width);
  padding-left: 0.1cm;
  padding-right: 0.3cm;
  font-size: calc(var(--bitacora-note-body-size) * var(--bitacora-note-bottom-font-compensation));
  line-height: 1.18;
  margin-left: 0.4cm;
}

.game-book-note-sheet-bottom .game-book-note-line:not(.is-giro-line),
.game-book-note-sheet-bottom .game-book-note-empty {
  text-align: justify;
  text-align-last: left;
}

body.is-partida-cerrada .game-book-note-sheet-bottom .game-book-note-line:not(.is-giro-line),
body.is-partida-cerrada .game-book-note-sheet-bottom .game-book-note-empty {
  text-align: left;
  text-align-last: left;
}

.game-book-note-sheet-top .game-book-note-line,
.game-book-note-sheet-top .game-book-note-empty {
  width: var(--bitacora-note-top-line-width);
  max-width: var(--bitacora-note-top-line-width);
  margin-left: 0;
  padding-left: var(--bitacora-note-top-line-pad-left);
  padding-right: var(--bitacora-note-top-line-pad-right);
}

.game-book-note-empty {
  opacity: 0.7;
}

.game-book-giro-tag {
  display: none;
}

.game-book-note-sheet-top .game-book-giro-tag {
  display: block;
  order: 2;
  justify-self: start;
  margin: 0;
  margin-top: 2px;
  margin-bottom: 1px;
  padding-left: var(--bitacora-note-top-line-pad-left);
  font-family: var(--font-bitacora);
  font-size: var(--bitacora-note-body-size);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: none;
  transform: scaleY(-1) translateX(0.5cm);
  color: rgba(62, 43, 28, 0.72);
  pointer-events: none;
}

.game-book-note-sheet-top .game-book-note-title {
  order: 3;
}

.game-book-note-sheet-top .game-book-note-line,
.game-book-note-sheet-top .game-book-note-empty {
  order: 1;
}

.game-book-page-number {
  position: absolute;
  right: clamp(14px, var(--bitacora-note-page-num-right), 74px);
  bottom: clamp(10px, var(--bitacora-note-page-num-bottom), 28px);
  font-family: var(--font-bitacora);
  font-size: clamp(0.56rem, 0.95vw, 0.74rem);
  line-height: 1;
  color: rgba(62, 43, 28, 0.72);
  letter-spacing: 0.02em;
  pointer-events: none;
}

.game-book-note-sheet-top .game-book-page-number {
  display: none;
}

.game-book-note-sheet-bottom .game-book-page-number {
  display: block;
  right: clamp(10px, var(--bitacora-note-bottom-page-num-right), 74px);
  bottom: clamp(10px, var(--bitacora-note-bottom-page-num-bottom), 32px);
  z-index: 3;
}

/* Book opened (top sheet / Notas al DM). */
.game-mini-book[data-open="true"] .game-book-note-sheet-top .game-book-note-line,
.game-mini-book[data-open="true"] .game-book-note-sheet-top .game-book-note-empty {
  translate: -1.28cm 0;
  width: calc(100% + 2.05cm);
  max-width: calc(100% + 2.05cm);
}

/* Book opened (bottom sheet / Resumen de Giros). */
.game-mini-book[data-open="true"] .game-book-note-sheet-bottom .game-book-note-line,
.game-mini-book[data-open="true"] .game-book-note-sheet-bottom .game-book-note-empty {
  translate: -1.212cm 0;
  width: calc(100% + 1.4cm);
  max-width: calc(100% + 1.4cm);
  padding-left: 0.1cm;
  padding-right: 0.3cm;
  font-size: calc(var(--bitacora-note-body-size) * var(--bitacora-note-bottom-font-compensation));
  line-height: 1.18;
}

.game-mini-book[data-open="true"] .game-book-note-sheet-bottom .game-book-note-title {
  font-size: calc(var(--bitacora-note-title-size) * var(--bitacora-note-bottom-font-compensation));
}

.chapter-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: var(--tri-side-y);
  transform: translate(-50%, calc(-100% - 40px));
  justify-self: center;
  margin-top: 0;
  min-width: calc((var(--tri-size) / 2) + 40px);
  padding: 0.45rem 1rem;
  font: inherit;
  font-size: clamp(0.72rem, 1.5vw, 0.92rem);
  line-height: 1.1;
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.86;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 8;
}

.chapter-download[hidden] {
  display: none !important;
}

.chapter-download:hover {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 41px));
}

.chapter-download:active {
  transform: translate(-50%, calc(-100% - 40px));
}

.narracion {
  display: grid;
  gap: 10px;
  font-size: clamp(0.9rem, 2.1375vw, 1.18125rem);
  line-height: 1.35;
  margin-top: 10px;
  transform: translateY(-0.5cm);
  height: calc((24vh - 10px) + 3.2cm);
  min-height: calc((24vh - 10px) + 3.2cm);
  overflow: auto;
  position: relative;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: none;
  -ms-overflow-style: none;
  text-align: justify;
  text-align-last: left;
}

body[data-era="past"].game-screen .game-layout {
  font-family: var(--font-past);
  --epoch-triangle-color: #b87333;
  --epoch-triangle-rgb: 184, 115, 51;
  --sense-glyph-rgb: 184, 115, 51;
  --narracion-color-base: #5C3A21;
  --narracion-color: var(--narracion-color-base);
  --retrato-ring-shadow: 0 0 0 2px rgba(92, 58, 33, 0.22);
  --retrato-glow-shadow: none;
}

body[data-era="past"].game-screen {
  --game-edge-rgb: 192, 111, 73;
}
body[data-era="past"].game-screen .game-root::before {
  background:
    radial-gradient(
      ellipse at center,
      rgba(var(--game-edge-rgb), 0) 38%,
      rgba(var(--game-edge-rgb), 0.14) 56%,
      rgba(var(--game-edge-rgb), 0.32) 74%,
      rgba(var(--game-edge-rgb), 0.58) 100%
    );
}

body[data-era="present"].game-screen .game-layout {
  font-family: var(--font-present);
  --epoch-triangle-color: #ffe66a;
  --epoch-triangle-rgb: 255, 230, 106;
  --sense-glyph-rgb: 255, 230, 106;
  --narracion-color-base: #111111;
  --narracion-color: var(--narracion-color-base);
  --retrato-ring-shadow: 0 0 0 2px rgba(17, 17, 17, 0.16);
  --retrato-glow-shadow: none;
}

body[data-era="present"].game-screen .titulo-del-giro,
body[data-era="present"].game-screen .nombre-personaje {
  font-family: "Atkinson Hyperlegible", var(--font-accessible);
  font-weight: 700;
}

body[data-era="present"].game-screen {
  --game-edge-rgb: 0, 0, 0;
}
body[data-era="present"].game-screen .game-root::before {
  background:
    radial-gradient(
      ellipse at center,
      rgba(var(--game-edge-rgb), 0) 38%,
      rgba(var(--game-edge-rgb), 0.14) 56%,
      rgba(var(--game-edge-rgb), 0.32) 74%,
      rgba(var(--game-edge-rgb), 0.58) 100%
    );
}

body[data-era="present"].game-screen .fecha-de-la-partida {
  max-width: min(48vw, 420px);
}
body[data-era="present"].game-screen .profecia {
  opacity: 0.7;
}
body[data-era="present"].game-screen .narracion-contenido {
  font-family: var(--font-accessible);
}

body[data-era="future"].game-screen .game-layout {
  font-family: var(--font-future);
  --epoch-triangle-color: #ff4fd8;
  --epoch-triangle-rgb: 255, 79, 216;
  --sense-glyph-rgb: 255, 79, 216;
  --narracion-color-base: #FF4D00;
  --narracion-color: var(--narracion-color-base);
  --retrato-ring-shadow:
    0 0 0 2px rgba(255, 77, 0, 0.22);
  --retrato-glow-shadow:
    0 0 4px rgba(255, 77, 0, 0.7),
    0 0 12px rgba(255, 77, 0, 0.8),
    0 0 24px rgba(255, 77, 0, 0.65);
}

body.game-screen[data-element-theme] .game-layout {
  --narracion-color: var(--element-text-color, var(--narracion-color-base, var(--narracion-color)));
  --sense-glyph-rgb: var(--element-sense-glyph-rgb, var(--sense-glyph-rgb));
  --retrato-ring-shadow: 0 0 0 2px rgba(var(--element-accent-rgb, 255, 255, 255), 0.32);
  --retrato-glow-shadow:
    0 0 8px rgba(var(--element-accent-rgb, 255, 255, 255), 0.45),
    0 0 18px rgba(var(--element-accent-rgb, 255, 255, 255), 0.3);
}

body.game-screen[data-element-theme] .titulo-del-giro,
body.game-screen[data-element-theme] .nombre-personaje,
body.game-screen[data-element-theme] .fecha-de-la-partida,
body.game-screen[data-element-theme] .fecha-de-la-partida span,
body.game-screen[data-element-theme] .consulta-dm-hint,
body.game-screen[data-element-theme] .consulta-dm-hint-text,
body.game-screen[data-element-theme] .consulta-dm-input {
  color: var(--element-text-color) !important;
  text-shadow: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-text-stroke: 0 transparent !important;
}

body.game-screen[data-element-theme] .narracion,
body.game-screen[data-element-theme] .narracion-contenido,
body.game-screen[data-element-theme] .narracion-contenido p {
  color: var(--narracion-color) !important;
  text-shadow: none !important;
}


body[data-era="future"].game-screen {
  --game-edge-rgb: 0, 0, 0;
}

body[data-era="future"].game-screen .game-root::before {
  background:
    radial-gradient(
      ellipse at center,
      rgba(var(--game-edge-rgb), 0) 38%,
      rgba(var(--game-edge-rgb), 0.14) 56%,
      rgba(var(--game-edge-rgb), 0.32) 74%,
      rgba(var(--game-edge-rgb), 0.58) 100%
    );
}

.narracion-contenido {
  display: grid;
  gap: 4px;
  will-change: transform;
  font-style: italic;
}

.narracion-contenido p {
  margin: 0 0 -4px;
  position: relative;
  z-index: 7;
}

.narracion-contenido p.narracion-line-reveal {
  animation: narracion-line-reveal 560ms cubic-bezier(0.2, 0.72, 0.24, 1) both;
}

.narracion::-webkit-scrollbar {
  width: 0;
  height: 0;
}

body[data-era="future"].game-screen .profecia {
  opacity: 0.7;
}

body[data-era="future"].game-screen .fecha-de-la-partida {
  max-width: min(48vw, 420px);
}

body[data-era="future"].game-screen .fecha-de-la-partida,
body[data-era="future"].game-screen .profecia {
  color: #ff4fd8;
  text-shadow:
    0 0 4px rgba(255, 79, 216, 0.7),
    0 0 12px rgba(255, 79, 216, 0.8),
    0 0 24px rgba(255, 79, 216, 0.65),
    0 0 40px rgba(255, 79, 216, 0.5),
    0 0 60px rgba(255, 79, 216, 0.35);

  opacity: 0.7;
}

body[data-era="future"].game-screen .titulo-del-giro,
body[data-era="future"].game-screen .nombre-personaje,
body[data-era="future"].game-screen .consulta-notas {
  color: #00F0FF;
  text-shadow:
    0 0 4px rgba(0, 240, 255, 0.7),
    0 0 12px rgba(0, 240, 255, 0.8),
    0 0 24px rgba(0, 240, 255, 0.65),
    0 0 40px rgba(0, 240, 255, 0.5),
    0 0 60px rgba(0, 240, 255, 0.35);
}

body[data-era="future"].game-screen .narracion {
  color: #FF4D00;
  text-shadow:
    0 0 4px rgba(255, 77, 0, 0.7),
    0 0 12px rgba(255, 77, 0, 0.8),
    0 0 24px rgba(255, 77, 0, 0.65);
}

body[data-era="future"].game-screen .narracion-contenido {
  font-family: var(--font-accessible);
}

body[data-era="past"].game-screen .narracion-contenido {
  font-family: var(--font-accessible);
}

body[data-era="past"].game-screen .fecha-de-la-partida,
body[data-era="past"].game-screen .profecia {
  color: #b87333;
  text-shadow:
    0 0 4px rgba(184, 115, 51, 0.5),
    0 0 10px rgba(184, 115, 51, 0.35);
}

.voluntad-jugador {
  width: calc((var(--tri-size) / 2) + 40px);
  min-width: 0;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, calc(-100% - var(--voluntad-gap, 0.55em)));
  resize: none;
  align-self: center;
  justify-self: center;
  background: transparent;
  color: transparent;
  border: 0;
  outline: none;
  font: inherit;
  line-height: var(--voluntad-line);
  text-align: center;
  padding: var(--voluntad-pad) 0.55em;
  box-sizing: border-box;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  overflow: hidden;
  scrollbar-width: none;
  min-height: calc((var(--voluntad-lines) * var(--voluntad-line)) + (var(--voluntad-pad) * 2));
  height: calc((var(--voluntad-lines) * var(--voluntad-line)) + (var(--voluntad-pad) * 2));
  text-shadow: none;
}

.voluntad-holder {
  width: calc((var(--tri-size) / 2) + 40px);
  min-width: 0;
  min-height: 0;
  height: 0;
  position: absolute;
  left: 50%;
  top: var(--tri-side-y);
  transform: translate(-50%, -50%);
  display: block;
  overflow: visible;
  z-index: 6;
  --voluntad-gap: 40px;
  --voluntad-lines: 3;
  --voluntad-line: 1.25em;
  --voluntad-pad: 0.35em;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
}

.voluntad-holder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.voluntad-holder > * {
  position: relative;
  z-index: 1;
}

.voluntad-elemental-stamp {
  position: absolute;
  left: 50%;
  top: 0;
  width: clamp(389px, 51.8vw, 562px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, calc(-100% - var(--voluntad-gap, 0.35em) + 7cm));
  background: center center / contain no-repeat;
  opacity: 0;
  filter:
    drop-shadow(0 0 10px rgba(var(--voluntad-active-color-rgb, 255, 255, 255), 0.45))
    drop-shadow(0 0 22px rgba(var(--voluntad-active-color-rgb, 255, 255, 255), 0.3));
  pointer-events: none;
  z-index: 0;
  display: none;
}

.voluntad-holder[data-elemental-active] .voluntad-elemental-stamp {
  display: block !important;
  animation: voluntad-stamp-fade 1.8s ease forwards;
}

/* TRIGGER DE CIERRE DEFINITIVO */
.voluntad-holder.is-closing-elemental .voluntad-elemental-stamp {
  animation: voluntad-stamp-fade-out 1s ease forwards !important;
  display: block !important;
}

@keyframes voluntad-stamp-fade {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-100% - var(--voluntad-gap, 0.35em) + 7cm)) scale(0.96);
  }
  to {
    opacity: 0.88;
    transform: translate(-50%, calc(-100% - var(--voluntad-gap, 0.35em) + 7cm)) scale(1);
  }
}

@keyframes voluntad-stamp-fade-out {
  from {
    opacity: 0.88;
    transform: translate(-50%, calc(-100% - var(--voluntad-gap, 0.35em) + 7cm)) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, calc(-100% - var(--voluntad-gap, 0.35em) + 7cm)) scale(0.95);
  }
}

.elemental-lotus-anchor {
  --lotus-ui-shift-x-extra: -0.3cm;
  position: fixed;
  left: calc(50% + ((min(680px, 90vw) + min(1100px, 92vw)) / 4) - clamp(128px, 14vw, 228px) + 11.5cm);
  top: calc(50% + clamp(126px, 16vh, 244px) + 2cm);
  transform: translate(-50%, -50%) rotate(10deg);
  transform-origin: center center;
  z-index: 1202;
}

body.is-fullscreen-active .elemental-lotus-anchor {
  --lotus-ui-shift-x-extra: 0cm;
}

.elemental-lotus-trigger {
  width: 210px;
  height: 199px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  opacity: 0.95;
  transform: none;
  transform-origin: center center;
  transition: transform 180ms ease, opacity 180ms ease, filter 180ms ease;
  position: relative;
  overflow: visible;
  --lotus-trigger-shift-x: calc(2cm - 1.1cm + 0.7cm + var(--lotus-ui-shift-x-extra, 0cm));
  --lotus-trigger-shift-y: 0.7cm;
}

.elemental-lotus-anchor.is-open .elemental-lotus-trigger {
  opacity: 0;
  pointer-events: none;
  filter: none;
}

.elemental-lotus-trigger:hover,
.elemental-lotus-trigger:focus-visible {
  transform: scale(1.05);
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.38));
}

.elemental-lotus-trigger-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
  z-index: 2;
  transform: translate(var(--lotus-trigger-shift-x, 0), var(--lotus-trigger-shift-y, 0));
  transition: filter 160ms ease, opacity 160ms ease;
}

.elemental-lotus-anchor.is-transitioning .elemental-lotus-trigger-image {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.32));
}

.elemental-lotus-anchor.has-detail .elemental-lotus-trigger-image {
  transform: translate(var(--lotus-trigger-shift-x, 0), var(--lotus-trigger-shift-y, 0));
}

.elemental-lotus-trigger-details {
  position: absolute;
  left: 50%;
  top: 52%;
  transform:
    translate(
      calc(-50% + var(--lotus-trigger-shift-x, 0)),
      calc(-50% + var(--lotus-trigger-shift-y, 0))
    )
    rotate(-10deg);
  width: 62%;
  display: grid;
  gap: 0.3rem;
  justify-items: center;
  text-align: center;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 160ms ease;
}

.elemental-lotus-anchor.has-detail .elemental-lotus-trigger-details {
  opacity: 1;
}

.elemental-lotus-trigger-title,
.elemental-lotus-trigger-meta {
  display: block;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.38);
}

.elemental-lotus-trigger-title {
  font-family: var(--font-accessible);
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  line-height: 1.02;
}

.elemental-lotus-trigger-meta {
  font-family: var(--font-accessible);
  font-size: clamp(0.8rem, 1.05vw, 0.98rem);
  line-height: 1.15;
}

.elemental-lotus-panel {
  --lotus-panel-shift-x: -10.6cm;
  --lotus-panel-shift-y: 0px;
  --lotus-node-shift-x: calc(2cm + var(--lotus-ui-shift-x-extra, 0cm));
  --lotus-node-shift-y: 0.7cm;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(
      calc(-50% + var(--lotus-panel-shift-x)),
      calc(-50% + var(--lotus-panel-shift-y))
    )
    rotate(10deg)
    scale(0.8);
  transform-origin: center center;
  width: 496px;
  height: 469px;
  pointer-events: auto;
  z-index: 1408;
  opacity: 0;
  transition: opacity 1.8s ease-in-out, transform 1.8s ease-in-out !important;
}

.elemental-lotus-panel.is-visible {
  opacity: 1;
}

.elemental-lotus-panel.is-closing,
.elemental-lotus-node.is-closing,
.voluntad-holder.is-closing-elemental .voluntad-elemental-stamp {
  opacity: 0 !important;
  transition: opacity 1s ease-in-out, transform 1s ease-in-out !important;
  pointer-events: none !important;
}

.elemental-lotus-panel.is-closing {
  transform: translate(
      calc(-50% + var(--lotus-panel-shift-x)),
      calc(-50% + var(--lotus-panel-shift-y))
    )
    rotate(12deg)
    scale(0.75) !important;
}

.elemental-lotus-node.is-closing {
  transform: var(--lotus-node-base-transform) scale(0.6) !important;
}

.elemental-lotus-panel.has-element-art {
  --lotus-panel-shift-x: -10.6cm;
  --lotus-panel-shift-y: 0cm;
  transform:
    translate(calc(-50% + var(--lotus-panel-shift-x)), calc(-50% + var(--lotus-panel-shift-y)))
    rotate(10deg)
    scale(0.7);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.elemental-lotus-panel.has-element-art .elemental-lotus-node {
  pointer-events: none;
  opacity: 0;
}

.elemental-lotus-panel.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.elemental-lotus-panel.is-closing {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 1.8s ease-in-out, transform 1.8s ease-in-out !important;
  transform: translate(
      calc(-50% + var(--lotus-panel-shift-x)),
      calc(-50% + var(--lotus-panel-shift-y))
    )
    rotate(12deg)
    scale(0.7) !important;
}

.elemental-lotus-node.is-closing {
  opacity: 0 !important;
  transform: scale(0.4) rotate(-20deg) !important;
  transition: opacity 1.8s ease-in-out, transform 1.8s ease-in-out !important;
}

.elemental-lotus-panel.has-element-art::after {
  display: none;
}

.elemental-lotus-panel.has-element-art .elemental-lotus-art {
  opacity: 1;
}

.elemental-lotus-art.is-element-art {
  filter:
    drop-shadow(0 0 10px color-mix(in srgb, var(--lotus-active-color, rgba(255,255,255,0.85)) 80%, transparent))
    drop-shadow(0 0 18px color-mix(in srgb, var(--lotus-active-color, rgba(255,255,255,0.85)) 60%, transparent));
}

.elemental-lotus-panel[hidden] {
  display: none !important;
}

.elemental-lotus-art {
  --lotus-shift-x: 0cm;
  --lotus-shift-y: 0cm;
  --lotus-art-scale: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transform: translate(var(--lotus-shift-x), calc(-1.3cm + var(--lotus-shift-y))) scale(var(--lotus-art-scale));
  transform-origin: center center;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.28));
  cursor: pointer;
}

.elemental-lotus-panel.has-selection .elemental-lotus-art {
  cursor: default;
  pointer-events: none;
}

.elemental-lotus-art[src*="The-White-Lottus"] {
  --lotus-shift-x: 1.8cm;
  --lotus-shift-y: 1.8cm;
  opacity: 0.9;
}

.elemental-lotus-art.is-element-art {
  --lotus-shift-x: calc(1.8cm + var(--lotus-ui-shift-x-extra, 0cm));
  --lotus-shift-y: 0.8cm;
  transform: translate(var(--lotus-shift-x), var(--lotus-shift-y));
  filter: none;
}

.elemental-lotus-panel[data-element-id="animic"] .elemental-lotus-art.is-element-art,
.elemental-lotus-panel[data-element-id="understanding"] .elemental-lotus-art.is-element-art {
  --lotus-shift-y: 0.5cm;
}

.elemental-lotus-panel.is-hover-preview .elemental-lotus-art.is-element-art {
  filter: blur(6px) saturate(1.1);
  opacity: 0.85;
}

.elemental-lotus-panel.is-hover-preview .elemental-lotus-art.is-element-art {
  --lotus-shift-y: 0.8cm;
}

.elemental-lotus-panel.is-hover-preview[data-element-id="animic"] .elemental-lotus-art.is-element-art,
.elemental-lotus-panel.is-hover-preview[data-element-id="understanding"] .elemental-lotus-art.is-element-art {
  --lotus-shift-y: 0.5cm;
}

.elemental-lotus-center-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(
    calc(-50% + var(--lotus-node-shift-x, 0) - 0.2cm),
    calc(-50% + var(--lotus-node-shift-y, 0) + 0.5cm)
  );
  display: grid;
  gap: 0.2rem;
  justify-items: center;
  align-items: center;
  text-align: center;
  font-family: var(--font-accessible);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 160ms ease;
}

.elemental-lotus-center-label.is-visible {
  opacity: 1;
}

.elemental-lotus-center-code {
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--lotus-center-color, var(--lotus-active-color, rgba(255, 255, 255, 0.98)));
  text-shadow:
    0 0 20px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.65);
  transform: translateY(-2px);
  display: inline-block;
}

.elemental-lotus-center-text {
  font-size: clamp(0.9rem, 1.3vw, 1.15rem);
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.6);
  transform: translateY(-2px);
  display: inline-block;
}


.elemental-lotus-panel.has-element-art .elemental-lotus-center-text {
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  transform: translateY(-6px);
  line-height: 1.08;
}

.elemental-lotus-panel.has-element-art .elemental-lotus-center-label {
  transform:
    translate(
      calc(-50% + var(--lotus-node-shift-x, 0)),
      calc(-50% + var(--lotus-node-shift-y, 0))
    )
    rotate(-10deg);
}

.elemental-lotus-bonus {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: translate(var(--lotus-node-shift-x, 0), var(--lotus-node-shift-y, 0));
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transition: opacity 1s ease;
}

.elemental-lotus-bonus-value {
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 6vw, 5.6rem);
  font-weight: 800;
  white-space: pre-line;
  color: rgba(var(--lotus-active-color-rgb, 255, 255, 255), 0.7);
  text-shadow:
    0 0 18px rgba(0, 0, 0, 0.55),
    0 0 32px rgba(var(--lotus-active-color-rgb, 255, 255, 255), 0.35);
  letter-spacing: 0.06em;
  animation: lotus-bonus-float 4s ease-in-out infinite alternate;
}


@keyframes lotus-bonus-float {
  0% { transform: translateY(-6px); opacity: 0.8; }
  100% { transform: translateY(6px); opacity: 1; }
}

.elemental-lotus-detail {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 0.35rem;
  padding: 0.8rem 1rem;
  text-align: center;
  font-family: var(--font-accessible);
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 4;
  transform: translate(var(--lotus-node-shift-x, 0), var(--lotus-node-shift-y, 0)) rotate(-10deg);
  opacity: 0;
  transition: opacity 1s ease;
}

.elemental-lotus-detail-title {
  margin: 0;
  font-family: var(--font-accessible);
  font-weight: 800;
  font-size: clamp(1.47rem, 2.17vw, 1.89rem);
  line-height: 1.05;
}

.elemental-lotus-detail-name {
  display: block;
  margin-top: 0.15rem;
  font-weight: 900;
  color: var(--lotus-active-color, #ffffff);
  font-size: 1.4em;
}

.elemental-lotus-detail-meta {
  margin: 0;
  font-family: var(--font-accessible);
  font-weight: 600;
  font-size: clamp(0.88rem, 1.2vw, 1.02rem);
  line-height: 1.15;
}

.elemental-lotus-cancel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + var(--lotus-node-shift-x, 0)), calc(-50% + var(--lotus-node-shift-y, 0)));
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-family: var(--font-present);
  font-size: clamp(1.56rem, 2.86vw, 2.34rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow:
    0 0 16px rgba(var(--epoch-triangle-rgb, 255, 230, 106), 0.55),
    0 0 32px rgba(var(--epoch-triangle-rgb, 255, 230, 106), 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
  transition-delay: 0ms;
  z-index: 6;
  cursor: pointer;
}

.elemental-lotus-panel.has-selection.is-cancel-ready:hover .elemental-lotus-cancel,
.elemental-lotus-panel.has-selection.is-cancel-ready .elemental-lotus-cancel:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0ms;
}

.elemental-lotus-panel.is-nibbaana-selected .elemental-lotus-cancel {
  opacity: 1;
  pointer-events: auto;
}

.elemental-lotus-panel.is-nibbaana-selected .elemental-lotus-center-label {
  opacity: 1;
}

.elemental-lotus-panel.has-selection.is-cancel-ready:hover .elemental-lotus-detail {
  opacity: 0;
  transition-delay: 0ms;
}

.elemental-lotus-panel.has-selection.is-cancel-ready:hover .elemental-lotus-bonus {
  opacity: 0;
  transition-delay: 0ms;
}

.elemental-lotus-panel.has-element-art .elemental-lotus-detail {
  opacity: 1;
  transform:
    translate(var(--lotus-node-shift-x, 0), var(--lotus-node-shift-y, 0))
    rotate(0deg);
}

.elemental-lotus-panel:not(.has-element-art) .elemental-lotus-detail {
  opacity: 0;
}

.elemental-lotus-node {
  --lotus-node-base-transform: translate(var(--lotus-node-shift-x, 0), var(--lotus-node-shift-y, 0));
  position: absolute;
  border: 0;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--lotus-node-color, #ffffff) 58%, transparent) 0%, rgba(255, 255, 255, 0) 72%);
  color: rgba(255, 255, 255, 0.94);
  text-align: center;
  font-family: var(--font-accessible);
  padding: 0.15rem 0.2rem;
  cursor: pointer;
  border-radius: 50%;
  opacity: 0.08;
  transform: var(--lotus-node-base-transform);
  transition: transform 160ms ease, opacity 160ms ease, filter 160ms ease, background 160ms ease;
}

.elemental-lotus-node:hover,
.elemental-lotus-node:focus-visible {
  transform: var(--lotus-node-base-transform) scale(1.04);
  opacity: 0.92;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--lotus-node-color, #ffffff) 82%, rgba(255, 255, 255, 0.15)) 0%, rgba(255, 255, 255, 0) 68%);
  filter:
    drop-shadow(0 0 10px color-mix(in srgb, var(--lotus-node-color, #ffffff) 76%, transparent))
    drop-shadow(0 0 20px color-mix(in srgb, var(--lotus-node-color, #ffffff) 42%, transparent));
}

.elemental-lotus-node:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--lotus-node-color, #ffffff) 90%, rgba(255,255,255,0.5));
  outline-offset: 3px;
  box-shadow:
    0 0 10px color-mix(in srgb, var(--lotus-node-color, #ffffff) 66%, transparent),
    0 0 16px rgba(0, 0, 0, 0.3);
}

.elemental-lotus-node.is-locked {
  opacity: 0.03;
  cursor: default;
  filter: grayscale(0.18);
}

.elemental-lotus-node:disabled,
.elemental-lotus-node.is-empty {
  cursor: default;
}

.elemental-lotus-node.is-unlocked {
  filter: none;
}

.elemental-lotus-node.is-selected {
  opacity: 0.98;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--lotus-node-color, #ffffff) 88%, rgba(255, 255, 255, 0.2)) 0%, rgba(255, 255, 255, 0) 68%);
  filter:
    drop-shadow(0 0 12px color-mix(in srgb, var(--lotus-node-color, #ffffff) 88%, transparent))
    drop-shadow(0 0 26px color-mix(in srgb, var(--lotus-node-color, #ffffff) 58%, transparent));
}

.elemental-lotus-node.is-empty {
  opacity: 0.22;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--lotus-node-color, #ffffff) 24%, rgba(255, 255, 255, 0.1)) 0%, rgba(255, 255, 255, 0) 72%);
  filter: saturate(0.7) brightness(0.78);
}

.elemental-lotus-node.is-empty:hover,
.elemental-lotus-node.is-empty:focus-visible {
  opacity: 0.22;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--lotus-node-color, #ffffff) 24%, rgba(255, 255, 255, 0.1)) 0%, rgba(255, 255, 255, 0) 72%);
  filter: saturate(0.7) brightness(0.78);
  transform: var(--lotus-node-base-transform);
  outline: none;
  box-shadow: none;
}

.elemental-lotus-panel.is-nibbaana-selected .elemental-lotus-node {
  opacity: 0.18;
  filter:
    drop-shadow(0 0 10px rgba(255, 245, 200, 0.32))
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.16));
}

.elemental-lotus-panel.is-nibbaana-selected .elemental-lotus-node.is-locked {
  opacity: 0.12;
  filter:
    grayscale(0.08)
    drop-shadow(0 0 8px rgba(255, 245, 200, 0.2));
}

.elemental-lotus-panel.is-nibbaana-selected .elemental-lotus-node.is-selected {
  opacity: 0.98;
}

.elemental-lotus-node-title,
.elemental-lotus-node-meta {
  display: none;
}

.elemental-lotus-node-material {
  left: 1%;
  top: 39%;
  width: 35%;
  height: 47%;
}

.elemental-lotus-node-animic {
  left: 24%;
  top: 5%;
  width: 50%;
  height: 26%;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--lotus-node-color, #ffffff) 68%, rgba(255, 255, 255, 0.08)) 0%, rgba(255, 255, 255, 0) 64%);
}

.elemental-lotus-node-mental {
  left: 65%;
  top: 39%;
  width: 34%;
  height: 47%;
}

.elemental-lotus-node-vital {
  left: 9%;
  top: 28%;
  width: 31%;
  height: 28%;
}

.elemental-lotus-node-tech {
  left: 34%;
  top: 66%;
  width: 32%;
  height: 24%;
}

.elemental-lotus-node-understanding {
  left: 59%;
  top: 28%;
  width: 30%;
  height: 28%;
}

.elemental-lotus-node-nibbaana {
  left: 32%;
  top: 34%;
  width: 36%;
  height: 34%;
}

.elemental-lotus-message {
  display: none;
  position: absolute;
  inset: 0;
  transform: rotate(-10deg);
  font-family: var(--font-accessible);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: rgba(255, 255, 255, 0.86);
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-shadow:
    0 0 12px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(0, 0, 0, 0.4);
  place-items: center;
  pointer-events: none;
}

.elemental-lotus-panel.is-empty .elemental-lotus-message {
  display: grid;
}

.elemental-lotus-panel.is-depleted .elemental-lotus-message {
  display: grid;
  color: #f6d35f;
}

.elemental-lotus-anchor.is-disabled .elemental-lotus-trigger {
  opacity: 0.4;
  cursor: not-allowed;
}

.elemental-lotus-toast {
  position: fixed;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%) rotate(-10deg);
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
  padding: 0.55rem 0.85rem;
  border-radius: 12px;
  font-family: var(--font-accessible);
  font-size: clamp(0.85rem, 1.2vw, 0.98rem);
  letter-spacing: 0.04em;
  line-height: 1.35;
  box-shadow:
    0 0 12px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
  z-index: 1410;
}

.elemental-lotus-toast.is-visible {
  opacity: 1;
}

.elemental-lotus-toast.is-warn {
  border-color: rgba(246, 211, 95, 0.6);
  color: #f6d35f;
}

.elemental-lotus-toast.is-info {
  border-color: rgba(140, 247, 255, 0.6);
  color: #c8f4ff;
}

.voluntad-holder .voluntad-jugador,
.voluntad-holder .voluntad-mirror {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.voluntad-typewriter {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  height: calc((var(--voluntad-lines) * var(--voluntad-line)) + (var(--voluntad-pad) * 2));
  transform: translate(-50%, calc(-100% - var(--voluntad-gap, 0.55em)));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.voluntad-baseline {
  position: absolute;
  left: 0.55em;
  right: 0.55em;
  bottom: var(--voluntad-pad);
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

.voluntad-holder[data-elemental-active] .voluntad-baseline {
  opacity: 0.9;
}

.voluntad-mirror {
  width: 100%;
  display: inline-block;
  text-align: center;
  line-height: var(--voluntad-line);
  padding: var(--voluntad-pad) 0.55em;
  box-sizing: border-box;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  font: inherit;
  color: inherit;
  user-select: none;
}

.voluntad-holder .voluntad-jugador {
  width: 100%;
  line-height: var(--voluntad-line);
  /* Keep the real textarea caret aligned to the bottom writing line. */
  padding-top: calc(var(--voluntad-pad) + ((var(--voluntad-lines) - 1) * var(--voluntad-line)));
  padding-bottom: var(--voluntad-pad);
}

.voluntad-holder[data-elemental-active="material"] .voluntad-jugador,
.voluntad-holder[data-elemental-active="material"] .voluntad-mirror {
  color: #61f0a0;
}

.voluntad-holder[data-elemental-active="material"] .voluntad-baseline {
  background: #61f0a0;
  box-shadow: 0 0 10px rgba(97, 240, 160, 0.66);
}

.voluntad-holder[data-elemental-active="mental"] .voluntad-jugador,
.voluntad-holder[data-elemental-active="mental"] .voluntad-mirror {
  color: #69a8ff;
}

.voluntad-holder[data-elemental-active="mental"] .voluntad-baseline {
  background: #69a8ff;
  box-shadow: 0 0 10px rgba(105, 168, 255, 0.66);
}

.voluntad-holder[data-elemental-active="animic"] .voluntad-jugador,
.voluntad-holder[data-elemental-active="animic"] .voluntad-mirror {
  color: #ff6e84;
}

.voluntad-holder[data-elemental-active="animic"] .voluntad-baseline {
  background: #ff6e84;
  box-shadow: 0 0 10px rgba(255, 110, 132, 0.66);
}

.voluntad-holder[data-elemental-active="vital"] .voluntad-jugador,
.voluntad-holder[data-elemental-active="vital"] .voluntad-mirror {
  color: #f6d35f;
}

.voluntad-holder[data-elemental-active="vital"] .voluntad-baseline {
  background: #f6d35f;
  box-shadow: 0 0 10px rgba(246, 211, 95, 0.66);
}

.voluntad-holder[data-elemental-active="tech"] .voluntad-jugador,
.voluntad-holder[data-elemental-active="tech"] .voluntad-mirror {
  color: #8cf7ff;
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.85),
    0 0 2px rgba(0, 0, 0, 0.65);
}

.voluntad-holder[data-elemental-active="tech"] .voluntad-jugador {
  color: #2b8b96;
}

.voluntad-holder[data-elemental-active="tech"] .voluntad-baseline {
  background: #8cf7ff;
  box-shadow: 0 0 10px rgba(140, 247, 255, 0.66);
}

.voluntad-holder[data-elemental-active="understanding"] .voluntad-jugador,
.voluntad-holder[data-elemental-active="understanding"] .voluntad-mirror {
  color: #d29cff;
}

.voluntad-holder[data-elemental-active="understanding"] .voluntad-baseline {
  background: #d29cff;
  box-shadow: 0 0 10px rgba(210, 156, 255, 0.66);
}

.voluntad-jugador::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.voluntad-holder:not(.is-ready):not(.has-value) .voluntad-jugador {
  pointer-events: none;
  caret-color: transparent;
}

.voluntad-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transform: translateY(calc(-100% - var(--voluntad-gap, 0.55em)));
  text-align: center;
  font-family: var(--font-accessible);
  font-size: clamp(1.8rem, 4.275vw, 2.3625rem);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: rgba(245, 243, 238, 0.6);
  opacity: 0;
  pointer-events: auto;
  cursor: text;
  padding: 0;
  height: auto;
  line-height: 1.1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
}

.voluntad-hint-secondary {
  left: 50%;
  right: auto;
  top: 0;
  transform: translate(
    -50%,
    calc(var(--voluntad-gap, 0.55em) - 0.18em - 1.3cm + var(--voces-button-shift-y, 0cm) + 1cm)
  ) scale(0.93);
  transform-origin: center top;
  font-size: 1.5em;
  opacity: 0;
  cursor: pointer;
  width: clamp(14rem, 28vw, 22rem);
  aspect-ratio: var(--voces-button-ratio, 3);
  background-image: var(--voces-button-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.nibbaana-rewind {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transform: translateY(calc(-100% - var(--voluntad-gap, 0.55em) + 1cm));
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--font-accessible);
  font-size: clamp(1.8rem, 4.275vw, 2.3625rem);
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--voluntad-active-color, #ffffff);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  text-shadow:
    0 0 8px rgba(var(--voluntad-active-color-rgb, 255, 255, 255), 0.6),
    0 0 16px rgba(var(--voluntad-active-color-rgb, 255, 255, 255), 0.35);
  box-shadow: none;
  cursor: pointer;
}

.nibbaana-rewind:disabled {
  cursor: default;
  opacity: 0.55;
}

.voluntad-holder.show-secondary .voluntad-hint-secondary {
  transform: translate(
    -50%,
    calc(var(--voluntad-gap, 0.55em) - 0.18em - 1.3cm + var(--voces-button-shift-y, 0cm) + 1cm)
  ) scale(1);
}

.voluntad-holder.is-nibbaana .nibbaana-rewind {
  display: flex;
}

.voluntad-holder.is-nibbaana .voluntad-jugador,
.voluntad-holder.is-nibbaana .voluntad-hint,
.voluntad-holder.is-nibbaana .voluntad-hint-secondary,
.voluntad-holder.is-nibbaana .voluntad-typewriter {
  display: none;
}

.voluntad-holder[data-voces-faction="Orden"] {
  --voces-button-image: url("images/Base/Seguirlasvoces-Orden.png");
  --voces-button-ratio: 2.73;
  --voces-button-shift-y: -0.5cm;
}

.voluntad-holder[data-voces-faction="Ego"] {
  --voces-button-image: url("images/Base/Seguirlasvoces-Ego.png");
  --voces-button-ratio: 4.05;
  --voces-button-shift-y: -0.2cm;
}

.voluntad-hint-text {
  display: inline-block;
  white-space: nowrap;
  text-shadow: none;
}

.voluntad-hint-secondary-text {
  opacity: 0;
}

.voluntad-holder[data-elemental-active] .voluntad-hint-text {
  color: var(--lotus-active-color, #ffffff);
  text-shadow:
    0 0 8px rgba(var(--lotus-active-color-rgb, 255, 255, 255), 0.55),
    0 0 16px rgba(var(--lotus-active-color-rgb, 255, 255, 255), 0.35);
}

.voluntad-holder.is-ready:not(.has-value):not(.is-editing) .voluntad-hint {
  opacity: 1;
  animation: voluntad-fade 6s ease-in-out infinite;
}

.voluntad-holder.show-secondary.is-ready:not(.has-value):not(.is-editing) .voluntad-hint-secondary {
  opacity: 1;
  animation: voluntad-fade 6s ease-in-out infinite;
}

.voluntad-holder.is-ready:not(.has-value):not(.is-editing):not(.show-secondary) .voluntad-hint-secondary,
.voluntad-holder:not(.show-secondary) .voluntad-hint-secondary {
  opacity: 0;
  animation: none;
  pointer-events: none;
}

.voluntad-holder.is-loading .voluntad-hint,
.voluntad-holder.is-loading .voluntad-hint-secondary {
  opacity: 0 !important;
  animation: none !important;
  transition: opacity 2s ease;
}

.voluntad-holder.is-final .voluntad-hint,
.voluntad-holder.is-final .voluntad-hint-secondary {
  opacity: 0 !important;
  animation: none !important;
}

.voluntad-holder.is-final .voluntad-jugador {
  pointer-events: none;
  caret-color: transparent;
}

.voluntad-holder.is-editing .voluntad-hint,
.voluntad-holder.has-value .voluntad-hint {
  opacity: 0;
}

.voluntad-holder.is-clicked .voluntad-hint {
  opacity: 0;
}

.voluntad-hint.is-fading {
  opacity: 0;
}

.voluntad-holder:not(.has-value):not(.is-editing) .voluntad-hint {
  transition: none;
}

.consulta-dm-holder {
  width: clamp(200px, 32ch, 340px);
  min-width: 0;
  min-height: 2.6em;
  height: auto;
  font-family: "Atkinson Hyperlegible", "Atkinson Hyperlegible Next", "Noto Sans", "Verdana", "Trebuchet MS", sans-serif;
  font-weight: 700;
  font-style: italic;
  position: fixed;
  left: calc(clamp(72px, 10vw, 120px) + 10px + 1cm);
  top: calc((clamp(72px, 10vw, 120px) - 2.6em) / 2);
  transform: none;
  display: grid;
  align-items: stretch;
  z-index: 31;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-left: 0;
  border-right: 0;
  border-radius: 8px;
  padding: 0.2rem 0.35rem;
  box-sizing: border-box;
  background: transparent;
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}

.consulta-dm-logo {
  position: absolute;
  top: 50%;
  left: calc(100% + 0.45rem);
  width: clamp(20px, 2.75vw, 29px);
  height: auto;
  display: block;
  object-fit: contain;
  opacity: 0.95;
  pointer-events: none;
  transform: translateY(-50%);
}

.consulta-dm-presets {
  position: absolute;
  top: 50%;
  left: calc(100% + 0.45rem + clamp(20px, 2.75vw, 29px) + 0.55rem);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.18rem;
  min-width: min(33ch, 48vw);
  pointer-events: auto;
  z-index: 1211;
  opacity: 0;
}

.consulta-dm-preset-trigger {
  position: relative;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(0.54rem, 0.92vw, 0.76rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-align: left;
  padding: 0.02rem 0 0.02rem 0.65rem;
  margin: 0;
  cursor: pointer;
  opacity: 0.76;
  transition: opacity 140ms ease, transform 140ms ease;
}

.consulta-dm-preset-trigger::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.85;
}

.consulta-dm-preset-trigger:hover,
.consulta-dm-preset-trigger:focus-visible {
  opacity: 1;
  transform: translateX(0.06rem);
}

body.is-epitome .game-orb-block,
body.is-epitome .narracion-status {
  opacity: 0;
  transition: opacity 5s ease;
  pointer-events: none;
}

body.is-epitome .game-text > :not(.narracion):not(.chapter-download):not(.chapas-reward) {
  opacity: 0;
  transition: opacity 5s ease;
  pointer-events: none;
}

body.is-epitome .fecha-de-la-partida {
  opacity: 0;
  transition: opacity 5s ease;
  pointer-events: none;
}

.consulta-dm-input {
  width: 100%;
  min-height: 2.2em;
  resize: none;
  background: transparent;
  color: inherit;
  border: 0;
  outline: none;
  font: inherit;
  font-size: clamp(0.78rem, 1.45vw, 1rem);
  font-style: italic;
  line-height: 1.18;
  text-align: left;
  padding: 0.35em 0.6em;
  box-sizing: border-box;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: none;
}

.consulta-dm-input::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.consulta-dm-holder:not(.is-ready):not(.has-value) .consulta-dm-input {
  pointer-events: none;
  caret-color: transparent;
}

.consulta-dm-holder.is-editing,
.consulta-dm-holder.has-value {
  background: rgba(0, 0, 0, 0.1);
  border-top-color: color-mix(in srgb, currentColor 50%, transparent);
  border-bottom-color: color-mix(in srgb, currentColor 50%, transparent);
}


.consulta-dm-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(calc(-50% + 0.5cm));
  text-align: left;
  font-size: clamp(0.68rem, 1.2vw, 0.9rem);
  letter-spacing: 0.02em;
  color: rgba(245, 243, 238, 0.6);
  opacity: 0;
  pointer-events: auto;
  cursor: text;
  padding: 0.35em 0.5em;
  line-height: 1.1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-style: italic;
}

.consulta-dm-hint-text {
  display: block;
  white-space: pre-line;
  text-align: left;
}

.consulta-dm-holder.is-ready:not(.has-value):not(.is-editing) .consulta-dm-hint {
  opacity: 0.7;
  animation: voluntad-fade 6s ease-in-out infinite;
}

.consulta-dm-holder.is-ready:not(.has-value):not(.is-editing) .consulta-dm-presets {
  opacity: 0.7;
  animation: voluntad-fade 6s ease-in-out infinite;
}

.consulta-dm-holder.is-final .consulta-dm-hint {
  opacity: 0 !important;
  animation: none !important;
}

.consulta-dm-holder.is-final .consulta-dm-presets {
  opacity: 0 !important;
  animation: none !important;
}

.consulta-dm-holder.is-final .consulta-dm-input {
  pointer-events: none;
  caret-color: transparent;
}

.consulta-dm-holder.is-editing .consulta-dm-hint,
.consulta-dm-holder.has-value .consulta-dm-hint,
.consulta-dm-holder.is-clicked .consulta-dm-hint,
.consulta-dm-hint.is-fading {
  opacity: 0;
}

.consulta-dm-holder.is-editing .consulta-dm-presets,
.consulta-dm-holder.has-value .consulta-dm-presets,
.consulta-dm-holder.is-clicked .consulta-dm-presets,
.consulta-dm-presets.is-fading {
  opacity: 0;
}

.consulta-dm-holder:not(.has-value):not(.is-editing) .consulta-dm-hint {
  transition: none;
}

body[data-era="past"].game-screen .consulta-dm-hint,
body[data-era="past"].game-screen .consulta-dm-input,
body[data-era="past"].game-screen .consulta-dm-preset-trigger {
  color: #b87333;
  text-shadow:
    0 0 4px rgba(184, 115, 51, 0.5),
    0 0 10px rgba(184, 115, 51, 0.35);
}

body[data-era="past"].game-screen .consulta-dm-logo {
  filter:
    sepia(1)
    saturate(6.2)
    hue-rotate(2deg)
    brightness(1.02)
    drop-shadow(0 1px 0 rgba(255, 236, 158, 0.72))
    drop-shadow(0 2px 0 rgba(223, 171, 69, 0.62))
    drop-shadow(0 0 10px rgba(220, 169, 68, 0.42))
    drop-shadow(0 0 20px rgba(212, 175, 55, 0.38));
}

body[data-era="future"].game-screen .consulta-dm-hint,
body[data-era="future"].game-screen .consulta-dm-input,
body[data-era="future"].game-screen .consulta-dm-preset-trigger {
  color: #ff4fd8;
  text-shadow:
    0 0 4px rgba(255, 79, 216, 0.7),
    0 0 12px rgba(255, 79, 216, 0.8),
    0 0 24px rgba(255, 79, 216, 0.65),
    0 0 40px rgba(255, 79, 216, 0.5),
    0 0 60px rgba(255, 79, 216, 0.35);
}

body[data-era="future"].game-screen .consulta-dm-logo {
  filter:
    sepia(1)
    saturate(7.2)
    hue-rotate(-18deg)
    brightness(1.05)
    drop-shadow(0 0 4px rgba(255, 77, 0, 0.7))
    drop-shadow(0 0 12px rgba(255, 77, 0, 0.8))
    drop-shadow(0 0 24px rgba(255, 77, 0, 0.65))
    drop-shadow(0 0 40px rgba(255, 77, 0, 0.5))
    drop-shadow(0 0 60px rgba(255, 77, 0, 0.35));
}

body.game-screen[data-element-theme] .consulta-dm-logo {
  filter:
    grayscale(1)
    brightness(1.08)
    sepia(1)
    saturate(6)
    hue-rotate(var(--element-logo-hue, 0deg))
    drop-shadow(0 0 4px rgba(var(--element-accent-rgb, 255, 255, 255), 0.6))
    drop-shadow(0 0 12px rgba(var(--element-accent-rgb, 255, 255, 255), 0.55))
    drop-shadow(0 0 24px rgba(var(--element-accent-rgb, 255, 255, 255), 0.35)) !important;
}

body[data-era="future"].game-screen .narracion-status {
  color: #00F0FF;
  -webkit-text-fill-color: #00F0FF;
  text-shadow:
    0 0 4px rgba(0, 240, 255, 0.7),
    0 0 12px rgba(0, 240, 255, 0.8),
    0 0 24px rgba(0, 240, 255, 0.65),
    0 0 40px rgba(0, 240, 255, 0.5),
    0 0 60px rgba(0, 240, 255, 0.35);
  font-family: "Atkinson Hyperlegible", var(--font-accessible);
  font-weight: 700;
}

body[data-era="present"].game-screen .consulta-dm-hint,
body[data-era="present"].game-screen .consulta-dm-input,
body[data-era="present"].game-screen .consulta-dm-preset-trigger {
  color: #111111;
  text-shadow: none;
}

body[data-era="past"].game-screen .narracion-status,
body[data-era="past"].game-screen .titulo-del-giro,
body[data-era="past"].game-screen .nombre-personaje,
body[data-era="past"].game-screen .consulta-notas {
  color: transparent;
  background-image:
    linear-gradient(
      100deg,
      #7b581f 0%,
      #c99533 22%,
      #f0c866 45%,
      #b27f2a 62%,
      #dca944 78%,
      #7b581f 100%
    ),
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0.25) 45%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0.25) 55%,
      rgba(255, 255, 255, 0) 60%
    );
  background-size: 100% 100%, 420% 100%;
  background-position: 0 0, -320% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.5px rgba(88, 56, 18, 0.55);
  text-shadow:
    0 1px 0 rgba(255, 236, 158, 0.72),
    0 2px 0 rgba(223, 171, 69, 0.62),
    0 4px 8px rgba(88, 56, 18, 0.34),
    0 0 20px rgba(212, 175, 55, 0.38);
}

body[data-era="past"].game-screen .narracion-status,
body[data-era="past"].game-screen .titulo-del-giro,
body[data-era="past"].game-screen .nombre-personaje {
  font-family: "Atkinson Hyperlegible", var(--font-accessible);
  font-weight: 700;
}

body[data-era="past"].game-screen .voluntad-hint,
body[data-era="past"].game-screen .voluntad-hint .voluntad-hint-text,
body[data-era="past"].game-screen .voluntad-hint-secondary,
body[data-era="past"].game-screen .voluntad-hint-secondary .voluntad-hint-secondary-text,
body[data-era="past"].game-screen .voluntad-jugador,
body[data-era="past"].game-screen .voluntad-mirror {
  color: #dca944;
}

.voluntad-baseline {
  border-radius: 2px;
}

body[data-era="past"].game-screen .voluntad-baseline {
  background: rgba(220, 169, 68, 0.72);
  box-shadow:
    0 0 4px rgba(220, 169, 68, 0.5),
    0 0 10px rgba(220, 169, 68, 0.35);
}

.voluntad-jugador {
  caret-color: #dca944;
}

body[data-era="future"].game-screen .voluntad-hint,
body[data-era="future"].game-screen .voluntad-hint .voluntad-hint-text,
body[data-era="future"].game-screen .voluntad-hint-secondary,
body[data-era="future"].game-screen .voluntad-hint-secondary .voluntad-hint-secondary-text,
body[data-era="future"].game-screen .voluntad-jugador,
body[data-era="future"].game-screen .voluntad-mirror {
  color: #00F0FF;
}

body[data-era="future"].game-screen .voluntad-jugador {
  caret-color: #00F0FF;
}

body[data-era="future"].game-screen .voluntad-baseline {
  background: rgba(0, 240, 255, 0.72);
  box-shadow:
    0 0 4px rgba(0, 240, 255, 0.6),
    0 0 10px rgba(0, 240, 255, 0.4);
}

body[data-era="present"].game-screen .voluntad-hint,
body[data-era="present"].game-screen .voluntad-hint .voluntad-hint-text,
body[data-era="present"].game-screen .voluntad-hint-secondary,
body[data-era="present"].game-screen .voluntad-hint-secondary .voluntad-hint-secondary-text,
body[data-era="present"].game-screen .voluntad-jugador,
body[data-era="present"].game-screen .voluntad-mirror {
  color: #000;
}

body.game-screen .voluntad-holder[data-elemental-active] .voluntad-hint-text {
  color: var(--voluntad-active-color, #ffffff) !important;
  text-shadow: none;
}

body.game-screen .voluntad-holder[data-elemental-active] .voluntad-jugador,
body.game-screen .voluntad-holder[data-elemental-active] .voluntad-mirror {
  color: var(--voluntad-active-color, #ffffff) !important;
  caret-color: var(--voluntad-active-color, #ffffff);
}

body.game-screen .voluntad-holder[data-elemental-active] .voluntad-baseline {
  background: var(--voluntad-active-color, #ffffff);
  box-shadow:
    0 0 4px rgba(var(--voluntad-active-color-rgb, 255, 255, 255), 0.6),
    0 0 10px rgba(var(--voluntad-active-color-rgb, 255, 255, 255), 0.35);
}

body[data-era="past"].game-screen .voluntad-holder[data-elemental-active] .voluntad-hint-text,
body[data-era="present"].game-screen .voluntad-holder[data-elemental-active] .voluntad-hint-text,
body[data-era="future"].game-screen .voluntad-holder[data-elemental-active] .voluntad-hint-text {
  color: var(--voluntad-active-color, #ffffff) !important;
}

body[data-era="present"].game-screen .voluntad-jugador {
  caret-color: #000;
}

body[data-era="present"].game-screen .voluntad-baseline {
  background: rgba(0, 0, 0, 0.55);
  box-shadow: none;
}

/* Present era: improve volume bar contrast over bright backgrounds. */
body[data-era="present"] .master-volume-control {
  color: #111;
  text-shadow: none;
}

body[data-era="present"] .master-volume-slider {
  filter: none;
}

body[data-era="present"] .master-volume-slider::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.95);
}

body[data-era="present"] .master-volume-slider::-webkit-slider-thumb {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.95);
  box-shadow: none;
}

body[data-era="present"] .master-volume-slider::-moz-range-track {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.95);
}

body[data-era="present"] .master-volume-slider::-moz-range-progress {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.95);
}

body[data-era="present"] .master-volume-slider::-moz-range-thumb {
  border: 1px solid rgba(0, 0, 0, 0.95);
  box-shadow: none;
}

body[data-era="present"].game-screen .master-volume-slider::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.95);
}

body[data-era="present"].game-screen .master-volume-slider::-moz-range-track {
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.95);
}

body[data-era="past"].game-screen .voluntad-hint:not(.voluntad-hint-secondary),
body[data-era="past"].game-screen .voluntad-hint:not(.voluntad-hint-secondary) .voluntad-hint-text {
  color: transparent;
  background-image:
    linear-gradient(
      100deg,
      #7b581f 0%,
      #c99533 22%,
      #f0c866 45%,
      #b27f2a 62%,
      #dca944 78%,
      #7b581f 100%
    ),
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0.25) 45%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0.25) 55%,
      rgba(255, 255, 255, 0) 60%
    );
  background-size: 100% 100%, 420% 100%;
  background-position: 0 0, -320% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.5px rgba(88, 56, 18, 0.55);
  text-shadow:
    0 1px 0 rgba(255, 236, 158, 0.72),
    0 2px 0 rgba(223, 171, 69, 0.62),
    0 4px 8px rgba(88, 56, 18, 0.34),
    0 0 20px rgba(212, 175, 55, 0.38);
}

body[data-era="past"].game-screen .voluntad-hint:not(.voluntad-hint-secondary) {
  font-size: clamp(1.8rem, 4.275vw, 2.3625rem);
}

body[data-era="past"].game-screen .voluntad-holder[data-elemental-active] .voluntad-hint:not(.voluntad-hint-secondary),
body[data-era="past"].game-screen .voluntad-holder[data-elemental-active] .voluntad-hint:not(.voluntad-hint-secondary) .voluntad-hint-text {
  color: var(--voluntad-active-color, #ffffff) !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-text-stroke: 0 transparent !important;
  text-shadow: none !important;
}

body[data-era="future"].game-screen .voluntad-hint:not(.voluntad-hint-secondary),
body[data-era="future"].game-screen .voluntad-hint:not(.voluntad-hint-secondary) .voluntad-hint-text {
  color: #00F0FF;
  font-weight: 400;
  -webkit-text-stroke: 0 transparent;
  text-shadow:
    0 0 4px rgba(0, 240, 255, 0.7),
    0 0 12px rgba(0, 240, 255, 0.8),
    0 0 24px rgba(0, 240, 255, 0.65),
    0 0 40px rgba(0, 240, 255, 0.5),
    0 0 60px rgba(0, 240, 255, 0.35);
}

body[data-era="future"].game-screen .titulo-del-giro,
body[data-era="future"].game-screen .nombre-personaje {
  font-family: "Atkinson Hyperlegible", var(--font-accessible);
  font-weight: 700;
}

.voluntad-holder[data-elemental-active="nibbaana"] .voluntad-hint {
  transform: translateY(calc(-100% - var(--voluntad-gap, 0.55em) + 0.8cm));
}


.voluntad-holder[data-elemental-active="nibbaana"] .voluntad-hint-text {
  white-space: pre-line;
  color: #ffffff !important;
  text-shadow: none !important;
}

.voluntad-holder[data-elemental-active="nibbaana"] .voluntad-elemental-stamp {
  filter:
    drop-shadow(0 0 14px rgba(255, 245, 200, 0.72))
    drop-shadow(0 0 30px rgba(255, 255, 255, 0.5));
}

body[data-era="present"].game-screen .voluntad-holder[data-elemental-active="nibbaana"] .voluntad-hint-text {
  -webkit-text-stroke: 1px #000000;
  text-shadow:
    1px 0 0 #000000,
    -1px 0 0 #000000,
    0 1px 0 #000000,
    0 -1px 0 #000000;
}

.voluntad-holder .voluntad-jugador {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 0 transparent !important;
  background: transparent !important;
  background-image: none !important;
  text-shadow: none !important;
  caret-color: transparent !important;
}

.voluntad-holder.is-editing .voluntad-jugador {
  caret-color: var(--voluntad-active-color, #ffffff) !important;
}

body[data-era="present"].game-screen .voluntad-holder.is-editing .voluntad-jugador {
  caret-color: #000000 !important;
}

@keyframes voluntad-fade {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 0.75;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes loading-wave-inbound {
  0% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  54% {
    opacity: 0.35;
  }
  82% {
    opacity: 0.2;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.03);
    opacity: 0;
  }
}

@keyframes loading-wave-dither {
  0% {
    background-position: 0 0, 0 0;
    filter: blur(3.2px) drop-shadow(0 0 48px rgba(182, 182, 182, 0.2));
  }
  50% {
    background-position: 8px 8px, -8px -8px;
    filter: blur(3.9px) drop-shadow(0 0 62px rgba(214, 214, 214, 0.24));
  }
  100% {
    background-position: 0 0, 0 0;
    filter: blur(3.2px) drop-shadow(0 0 48px rgba(182, 182, 182, 0.2));
  }
}

.game-orb {
  width: clamp(72px, 10vw, 120px);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.game-orb.retrato-personaje {
  width: clamp(94px, 13vw, 156px);
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: visible;
  opacity: 1;
  transition: opacity 260ms ease;
  --avatar-frame-inset: -24%;
  border-color: var(--avatar-frame-ring-color, var(--narracion-color));
  box-shadow: var(--retrato-ring-shadow), var(--retrato-glow-shadow);
}

.game-orb.retrato-personaje.has-avatar-overlay {
  z-index: 4;
}

.game-orb.retrato-personaje[data-avatar-frame-element] {
  border-color: transparent;
  box-shadow: none;
}

.game-orb.retrato-personaje.is-khrono-visible {
  opacity: 0.8;
}

.game-orb.retrato-personaje::after {
  content: "";
  position: absolute;
  inset: var(--avatar-frame-inset, -24%);
  background: var(--avatar-frame-image, none) center / contain no-repeat;
  pointer-events: none;
  z-index: 5;
}

.game-orb.retrato-personaje[data-avatar-frame-element="mental"],
.game-orb.retrato-personaje[data-avatar-frame-element="nibbaana"] {
  --avatar-frame-inset: -46.2%;
}

.retrato-crossfade-layer {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 900ms ease;
}

.retrato-crossfade-layer.is-visible {
  opacity: 1;
}

.game-orb[class*="dracma-"] {
  z-index: 2;
  --dracma-edge-width: clamp(6px, 0.8vw, 10px);
  background-color: #4a4d4d;
  background-image: repeating-linear-gradient(
    90deg,
    #000000 0 1px,
    #7a7f7f 1px 5px
  );
  background-size: 5px 100%;
  transform-style: preserve-3d;
  will-change: transform;
  overflow: hidden;
}

.game-orb[class*="dracma-"]::before,
.game-orb[class*="dracma-"]::after {
  content: "";
  position: absolute;
  inset: var(--dracma-edge-width);
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.game-orb[class*="dracma-"]::before {
  background-image: var(--dracma-front-image);
}

.game-orb[class*="dracma-"]::after {
  background-image: var(--dracma-back-image, url("images/Base/Dracma/dracma-game-variants/dracma-tripleuurus.png"));
  transform: rotateY(180deg);
}

.game-orb[class*="dracma-"].has-3d-coin {
  background: transparent;
}

.game-orb[class*="dracma-"].has-3d-coin::before,
.game-orb[class*="dracma-"].has-3d-coin::after {
  content: none;
}

.game-dracma-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.game-orb[class~="dracma-PNEUMA"] {
  width: clamp(144px, 20vw, 240px);
  aspect-ratio: 1 / 1;
  border: 0;
  box-shadow: none;
  --dracma-front-image: url("images/Base/Dracma/dracma-game-variants/PNEUMA.png");
}

.game-orb[class~="dracma-PATER"] {
  width: clamp(144px, 20vw, 240px);
  aspect-ratio: 1 / 1;
  border: 0;
  box-shadow: none;
  --dracma-front-image: url("images/Base/Dracma/dracma-game-variants/PATER.png");
}

.game-orb[class~="dracma-YIOS"] {
  width: clamp(144px, 20vw, 240px);
  aspect-ratio: 1 / 1;
  border: 0;
  box-shadow: none;
  --dracma-front-image: url("images/Base/Dracma/dracma-game-variants/YIOS.png");
}

.game-orb.dracma-bonus {
  position: absolute;
  width: clamp(86.4px, 12.6vw, 162px);
  aspect-ratio: 1 / 1;
  border: 0;
  box-shadow: none;
  z-index: 9992;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  --dracma-front-image: url("images/Base/Dracma/dracma-game-variants/dracma-tripleuurus.png");
}

.game-orb.dracma-bonus-2,
.game-orb.dracma-bonus-3 {
  width: clamp(76.8px, 11.2vw, 144px);
}

.game-orb.dracma-bonus.is-active {
  opacity: 0.8;
  animation: dracma-bonus-float 4s ease-in-out infinite alternate;
  animation-delay: -2s;
}

@property --dracma-float {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.game-orb.dracma-bonus.is-active {
  --dracma-float: 0px;
}

.game-orb.dracma-bonus .game-dracma-canvas {
  transition: filter 0.35s ease;
}


@keyframes dracma-bonus-float {
  0% { --dracma-float: -6px; }
  100% { --dracma-float: 6px; }
}

.game-orb-block {
  position: absolute;
  display: grid;
  place-items: center;
  gap: 10px;
  text-align: center;
  z-index: 0;
}

.game-orb-main-block {
  position: fixed;
  left: 0;
  top: calc(var(--audio-hud-top) + 2cm);
  right: auto;
  transform: none;
  z-index: 29;
}

.khrono-thought-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 42vw);
  max-width: calc(100vw - 2rem);
  padding: 0.56rem 0.9rem;
  border-radius: 12px;
  font-family: "Atkinson Hyperlegible", "Noto Sans", "Verdana", sans-serif;
  font-size: clamp(0.78rem, 1vw, 0.98rem);
  font-style: italic;
  line-height: 1.35;
  text-align: center;
  color: rgba(244, 244, 255, 0.96);
  background: rgba(18, 18, 28, 0.84);
  border: 1px solid rgba(196, 196, 255, 0.35);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.65);
  word-break: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 80;
}

.khrono-thought-overlay.is-thought {
  color: rgba(244, 244, 255, 0.96);
  background: rgba(18, 18, 28, 0.84);
  border: 1px solid rgba(196, 196, 255, 0.35);
  font-style: italic;
  font-weight: 400;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.65);
}

.khrono-thought-overlay.is-speech {
  top: auto;
  bottom: calc(100% + 0.42rem);
  left: calc(63% + 2cm);
  transform: translate(-50%, 8px) rotate(-1.1deg);
  width: min(500px, 48vw);
  padding: 0.66rem 1.02rem;
  border-radius: 16px;
  color: #111111;
  background: #fff6cc;
  border: 2px solid #1c1309;
  font-style: normal;
  font-weight: 700;
  text-shadow: none;
  box-shadow:
    3px 3px 0 rgba(0, 0, 0, 0.68),
    0 8px 18px rgba(0, 0, 0, 0.34);
}

.khrono-thought-overlay.is-speech::after {
  content: "";
  position: absolute;
  left: 21%;
  top: 100%;
  width: 16px;
  height: 16px;
  transform: translate(-30%, -42%) rotate(34deg) skewX(-7deg);
  background: #fff6cc;
  border-right: 2px solid #1c1309;
  border-bottom: 2px solid #1c1309;
}

.khrono-thought-overlay.is-visible {
  opacity: 1;
}

.khrono-thought-overlay.is-speech.is-visible {
  transform: translate(-50%, 0) rotate(-1.1deg);
}

body[data-era="present"].game-screen .khrono-thought-overlay.is-speech {
  background: #ffffff;
}

body[data-era="present"].game-screen .khrono-thought-overlay.is-speech::after {
  background: #ffffff;
}

.dracma-PATER {
  position: absolute;
  left: calc(var(--tri-center-x) - (var(--tri-size) / 2));
  top: calc(var(--tri-center-y) + (var(--tri-height) / 2));
  transform: translate(-50%, -50%) rotate(180deg);
  opacity: 1;
  border-color: transparent;
}

.dracma-YIOS {
  position: absolute;
  left: calc(var(--tri-center-x) + (var(--tri-size) / 2));
  top: calc(var(--tri-center-y) + (var(--tri-height) / 2));
  transform: translate(-50%, -50%) rotate(180deg);
  opacity: 1;
  border-color: transparent;
}

.dracma-PNEUMA {
  position: absolute;
  left: 50%;
  top: var(--tri-top-center-y);
  transform: translate(-50%, -50%) rotate(180deg);
  opacity: 1;
  border-color: transparent;
}

.dracma-PNEUMA.is-sequence-spinning {
  animation: dracma-sequence-spin-up 1.1s linear infinite;
}

.dracma-YIOS.is-sequence-spinning {
  animation: dracma-sequence-spin-right 1.1s linear infinite;
}

.dracma-PATER.is-sequence-spinning {
  animation: dracma-sequence-spin-left 1.1s linear infinite;
}

@media (min-width: 1200px) {
  .game-layout {
    --tri-top-center-y: calc(1cm + (clamp(144px, 20vw, 240px) / 2));
  }

  .dracma-PNEUMA {
    top: var(--tri-top-center-y) !important;
  }

  .dracma-PATER,
  .dracma-YIOS {
    top: calc(100vh - 1cm - (clamp(144px, 20vw, 240px) / 2)) !important;
  }
}

@media (max-width: 820px) {
  .game-layout {
    min-height: 92vh;
    gap: 18px;
    --tri-size: calc(min(70vw, 40vh) * 1.43);
    --tri-center-y: 50%;
  }

  .game-orb-main-block {
  position: fixed;
  left: 0;
  top: calc(var(--audio-hud-top) + 2cm);
  right: auto;
  transform: none;
  z-index: 29;
}

  .dracma-PATER {
    left: calc(var(--tri-center-x) - (var(--tri-size) / 2));
    top: calc(var(--tri-center-y) + (var(--tri-height) / 2));
  }

  .dracma-YIOS {
    left: calc(var(--tri-center-x) + (var(--tri-size) / 2));
    top: calc(var(--tri-center-y) + (var(--tri-height) / 2));
  }

  .dracma-PNEUMA {
    top: calc(var(--tri-center-y) - (var(--tri-height) / 2) - 28px);
  }

  .time-legend {
    width: min(88vw, 460px);
  }

  .game-bitacora-dock {
    width: calc(clamp(136px, 23vw, 192px) * 1.352);
  }

  .spell-codex-helper {
    width: clamp(76px, 8.6vw, 102px);
    top: calc(50% + clamp(126px, 16vh, 244px) - 0.1cm - 10cm);
    left: calc(50% - ((min(680px, 90vw) + min(1100px, 92vw)) / 4) - var(--spell-codex-shift-right) + 102px - 6cm);
  }

  .spell-codex-holo {
    left: calc(100% - 4px);
  }

  .game-mini-book {
    --bitacora-note-pad-x: 10.5%;
    --bitacora-note-pad-y: 9%;
    --bitacora-note-top-pad-bottom: 13%;
    --bitacora-note-top-pad-right-extra: 12px;
    --bitacora-note-top-shift-y: 10px;
    --bitacora-note-top-line-width: 96%;
    --bitacora-note-top-line-pad-left: 22px;
    --bitacora-note-top-line-pad-right: 5px;
    --bitacora-note-bottom-pad-left-extra: 9px;
    --bitacora-note-bottom-line-width: 85%;
    --bitacora-note-page-num-right: 19%;
    --bitacora-note-page-num-bottom: 7%;
    --bitacora-note-bottom-page-num-right: calc(56px - 1.4cm);
    --bitacora-note-bottom-page-num-bottom: 22px;
  }

  body.second-puzzle-anim .time-legend::before {
    width: clamp(170px, 54vw, 300px);
    height: clamp(108px, 32vw, 190px);
    transform: translate(-50%, -50%);
    border-width: 1.2px;
  }
}

@media (max-width: 520px) {
  .game-layout {
    --tri-size: calc(min(74vw, 36vh) * 1.43);
    --tri-center-y: 50%;
  }

  .game-text {
    margin-top: 12vh;
  }

  .time-legend {
    width: min(92vw, 360px);
    font-size: clamp(0.74rem, 3.3vw, 0.92rem);
  }

  .time-button {
    font-size: clamp(0.8rem, 3.8vw, 1rem);
  }

  .time-button .epoch-symbol {
    font-size: clamp(2.025rem, 4.05vw, 2.7rem);
  }

  .game-bitacora-dock {
    width: calc(clamp(116px, 29vw, 148px) * 1.352);
  }

  .spell-codex-helper {
    width: clamp(64px, 10vw, 88px);
    top: calc(50% + clamp(126px, 16vh, 244px) - 0.55cm - 10cm);
    left: calc(50% - ((min(680px, 90vw) + min(1100px, 92vw)) / 4) - var(--spell-codex-shift-right) + 82px - 6cm);
  }

  .spell-codex-holo {
    left: calc(100% - 6px);
  }

  .game-mini-book {
    --bitacora-note-pad-x: 10%;
    --bitacora-note-pad-y: 10%;
    --bitacora-note-top-pad-bottom: 14%;
    --bitacora-note-top-pad-right-extra: 8px;
    --bitacora-note-top-shift-y: 7px;
    --bitacora-note-top-line-width: 96%;
    --bitacora-note-top-line-pad-left: 16px;
    --bitacora-note-top-line-pad-right: 4px;
    --bitacora-note-bottom-pad-left-extra: 4px;
    --bitacora-note-bottom-line-width: 88%;
    --bitacora-note-page-num-right: 16%;
    --bitacora-note-page-num-bottom: 6%;
    --bitacora-note-bottom-page-num-right: calc(42px - 1.4cm);
    --bitacora-note-bottom-page-num-bottom: 18px;
  }

  .game-book-note-title {
    width: 84%;
    max-width: 84%;
  }

  .game-book-note-line,
  .game-book-note-empty {
    line-height: 1.24;
  }

  body.second-puzzle-anim .time-legend::before {
    width: clamp(150px, 70vw, 250px);
    height: clamp(94px, 42vw, 154px);
    transform: translate(-50%, -49%);
    border-width: 1px;
  }
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--prev-era-bg, transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 2s ease;
}

body.era-fade-active::after {
  opacity: 1;
  transition: none;
}

.title,
.subtitle,
.name-input,
.name-hint,
.name-line {
  transition: color 2s ease, text-shadow 2s ease, -webkit-text-stroke-color 2s ease, border-color 2s ease;
}

.name-line::before,
.name-line::after,
.time-button::after {
  transition: background 2s ease, box-shadow 2s ease, opacity 2s ease;
}

body.portal-open {
  animation: none;
}

body[data-era="past"] {
  --bg: #F1E4C3;
  --fg: #5C3A21;
  --fg-strong: #B87333;
  --fg-soft: #8A5A3B;
  --line-strong: #B87333;
  --line-soft: #8A5A3B;
  --halo-line: rgba(255, 255, 255, 0.92);
  --halo-glow: rgba(255, 255, 255, 0.55);
  --halo-bright: rgba(255, 255, 255, 0.98);
  --star-line: rgba(255, 255, 255, 0.92);
  background: radial-gradient(circle at 50% 50%, #D4A373 0%, #F1E4C3 55%, #8A5A3B 92%);
}

body[data-era="past"] .title {
  color: transparent;
  background-image:
    linear-gradient(
      100deg,
      #7b581f 0%,
      #c99533 22%,
      #f0c866 45%,
      #b27f2a 62%,
      #dca944 78%,
      #7b581f 100%
    ),
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0.25) 45%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0.25) 55%,
      rgba(255, 255, 255, 0) 60%
    );
  background-size: 100% 100%, 420% 100%;
  background-position: 0 0, -320% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0.5px rgba(88, 56, 18, 0.55);
  text-shadow:
    0 1px 0 rgba(255, 236, 158, 0.72),
    0 2px 0 rgba(223, 171, 69, 0.62),
    0 4px 8px rgba(88, 56, 18, 0.34),
    0 0 20px rgba(212, 175, 55, 0.38);
}

body[data-era="past"].era-selected .title {
  animation: past-title-crystal-sweep 2.2s linear infinite;
}

body[data-era="future"] .title {
  text-shadow:
    0 0 4px rgba(0, 240, 255, 0.7),
    0 0 12px rgba(0, 240, 255, 0.8),
    0 0 24px rgba(0, 240, 255, 0.65),
    0 0 40px rgba(0, 240, 255, 0.5),
    0 0 60px rgba(0, 240, 255, 0.35);
  animation:
    ui-reveal 2s ease forwards 6s,
    future-title-flicker 2.2s infinite 8s;
}

body[data-era="future"].era-selected .title {
  animation: neon-flicker 6s infinite;
}

body[data-era="past"] .subtitle {
  color: #7B4A2B;
  -webkit-text-stroke: 0.4px rgba(63, 35, 16, 0.35);
  text-shadow:
    0 1px 0 rgba(255, 235, 200, 0.25),
    0 2px 4px rgba(63, 35, 16, 0.3);
}

body[data-era="past"] .name-input,
body[data-era="past"] .name-hint-text {
  color: transparent;
  background-image:
    linear-gradient(
      100deg,
      #7b581f 0%,
      #c99533 22%,
      #f0c866 45%,
      #b27f2a 62%,
      #dca944 78%,
      #7b581f 100%
    ),
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0.25) 45%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0.25) 55%,
      rgba(255, 255, 255, 0) 60%
    );
  background-size: 100% 100%, 420% 100%;
  background-position: 0 0, -320% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0.5px rgba(88, 56, 18, 0.55);
  text-shadow:
    0 1px 0 rgba(255, 236, 158, 0.72),
    0 2px 0 rgba(223, 171, 69, 0.62),
    0 4px 8px rgba(88, 56, 18, 0.34),
    0 0 20px rgba(212, 175, 55, 0.38);
}

body[data-era="past"] .name-input {
  -webkit-text-fill-color: transparent;
  caret-color: #d4af37;
}

body[data-era="future"] .subtitle,
body[data-era="future"] .time-future {
  color: #FF4D00;
}

body[data-era="future"] .subtitle {
  font-weight: 400;
  text-shadow:
    0 0 4px rgba(255, 77, 0, 0.7),
    0 0 12px rgba(255, 77, 0, 0.8),
    0 0 24px rgba(255, 77, 0, 0.65),
    0 0 40px rgba(255, 77, 0, 0.5),
    0 0 60px rgba(255, 77, 0, 0.35);
}

body[data-era="future"] .name-input,
body[data-era="future"] .name-hint {
  color: #00F0FF;
  opacity: 0.95;
  text-shadow:
    0 0 4px rgba(0, 240, 255, 0.7),
    0 0 12px rgba(0, 240, 255, 0.8),
    0 0 24px rgba(0, 240, 255, 0.65),
    0 0 40px rgba(0, 240, 255, 0.5),
    0 0 60px rgba(0, 240, 255, 0.35);
}

body[data-era="future"] .name-input {
  caret-color: #00F0FF;
}

body[data-era="present"] {
  --bg: #ffffff;
  --fg: #111111;
  --fg-strong: #000000;
  --fg-soft: #6b6b6b;
  --line-strong: #000000;
  --line-soft: #6b6b6b;
  --halo-line: rgba(255, 176, 76, 0.9);
  --halo-glow: rgba(255, 150, 55, 0.6);
  --halo-bright: rgba(255, 220, 150, 0.85);
  background: radial-gradient(
    circle at 50% 50%,
    #fffdf8 0%,
    #fffdf8 24%,
    #fffbf1 36%,
    #fff9ec 46%,
    #fff3d7 55%,
    #fff9ec 63%,
    #fffbf1 72%,
    #fffdf8 82%,
    #fffefb 90%,
    #ffffff 100%
  );
}

body[data-era="present"] .title,
body[data-era="present"] .subtitle,
body[data-era="present"] .name-input,
body[data-era="present"] .name-hint,
body[data-era="present"] .time-present {
  color: #211c18;
  -webkit-text-stroke: 0.2px rgba(20, 17, 14, 0.28);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.62),
    0 0 0.8px rgba(24, 20, 16, 0.58),
    0 0 2.2px rgba(24, 20, 16, 0.2);
  letter-spacing: 0.015em;
  text-rendering: geometricPrecision;
}

body[data-era="present"] .name-input,
body[data-era="present"] .name-hint {
  font-weight: 500;
}

body[data-era="future"] {
  --bg: #1E003A;
  --fg: #00F0FF;
  --fg-strong: #00F0FF;
  --fg-soft: #00F0FF;
  --line-strong: #ff4fd8;
  --line-soft: #7a0d6b;
  --halo-line: rgba(0, 240, 255, 0.92);
  --halo-glow: rgba(0, 240, 255, 0.55);
  --halo-bright: rgba(255, 255, 255, 0.9);
  --trail-glow-opacity: 0.42;
  --trail-haze-opacity: 0.34;
  --trail-glow-blur: 4px;
  --trail-haze-blur: 18px;
  --trail-glow-shadow: 0 0 46px var(--halo-glow);
  --trail-haze-shadow: 0 0 78px var(--halo-glow);
  --trail-core-opacity: 0.7;
  --trail-core-blur: 0.8px;
  --trail-core-width: 2.4px;
  background: radial-gradient(
    circle at 50% 50%,
    #15002C 0%,
    #15002C 24%,
    #26004A 36%,
    #2F005C 46%,
    #5A00A0 55%,
    #3C0074 63%,
    #2F005C 72%,
    #26004A 82%,
    #1E003A 90%,
    #0B001A 100%
  );
}

.screen {
  min-height: 100vh;
  position: relative;
  padding: 6vh 6vw;
  overflow: hidden;
  z-index: auto;
}

.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
  background: rgba(0, 0, 0, 0);
  opacity: 0;
  transition: opacity 2000ms ease;
}

.intro-pocket-watch {
  --pocket-watch-x: 0px;
  --pocket-watch-scale: 1;
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(9.5rem, 14vw, 15.5rem);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transform: translate3d(calc(-50% + var(--pocket-watch-x)), -40%, 0) scale(var(--pocket-watch-scale));
  transform-origin: 50% 0%;
  transition:
    opacity 260ms ease,
    transform 680ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform, opacity;
  filter: drop-shadow(0 0.2rem 0.35rem rgba(0, 0, 0, 0.32));
}

.intro-pocket-watch.is-visible {
  opacity: 0.96;
  transform: translate3d(calc(-50% + var(--pocket-watch-x)), calc(10% - 2cm), 0) scale(var(--pocket-watch-scale));
  animation: intro-pocket-watch-sway 1.7s ease-in-out infinite alternate;
}

.intro-pocket-watch-video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.game-screen .intro-pocket-watch {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

body.game-screen .loading-tarot {
  opacity: 0 !important;
  visibility: hidden !important;
}

@keyframes intro-pocket-watch-sway {
  from {
    transform: translate3d(calc(-50% + var(--pocket-watch-x)), calc(10% - 2cm), 0) rotate(-4deg) scale(var(--pocket-watch-scale));
  }
  to {
    transform: translate3d(calc(-50% + var(--pocket-watch-x)), calc(10% - 2cm), 0) rotate(3deg) scale(var(--pocket-watch-scale));
  }
}

body.codex-focus-fading .screen::after {
  opacity: 1;
  background: rgba(0, 0, 0, 0.985);
}

body.codex-focus-hidden .screen > *:not(.codex-dock):not(.codex-holo):not(.mute-toggle):not(.master-volume-control) {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none !important;
}

@keyframes inventory-travel-screen-fadeout {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

body.inventory-travel-fadeout {
  background: #000 !important;
}

body.inventory-travel-fadeout .screen,
body.inventory-travel-fadeout .veil {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

body.inventory-travel-fadeout .game-root,
body.inventory-travel-fadeout .codex-dock,
body.inventory-travel-fadeout .codex-holo,
body.inventory-travel-fadeout .mute-toggle,
body.inventory-travel-fadeout .fullscreen-toggle,
body.inventory-travel-fadeout .master-volume-control {
  animation: inventory-travel-screen-fadeout 10000ms linear forwards !important;
  pointer-events: none !important;
}

body.inventory-travel-fadeout .mute-toggle *,
body.inventory-travel-fadeout .fullscreen-toggle *,
body.inventory-travel-fadeout .master-volume-control * {
  animation: inventory-travel-screen-fadeout 10000ms linear forwards !important;
  pointer-events: none !important;
}

body.inventory-travel-blackout {
  background: #000 !important;
}

body.inventory-travel-blackout .screen,
body.inventory-travel-blackout .veil,
body.inventory-travel-blackout .game-root,
body.inventory-travel-blackout .codex-dock,
body.inventory-travel-blackout .mute-toggle,
body.inventory-travel-blackout .fullscreen-toggle,
body.inventory-travel-blackout .master-volume-control {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

/* Keep the veil renderable during AlphaOmega fade while blackout stays active. */
body.inventory-travel-blackout.inventory-travel-veil-priority .veil {
  display: block !important;
  visibility: visible !important;
  pointer-events: none !important;
}

.title {
  font-size: var(--title-size);
  font-weight: 250;
  letter-spacing: var(--title-letter);
  text-align: center;
  margin: 0;
  font-family: inherit;
  color: var(--fg);
  text-shadow:
    0 2px 12px rgba(255, 255, 255, 0.12),
    0 0 28px rgba(255, 255, 255, 0.18);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% - var(--sym-offset)));
  opacity: 0;
  animation: ui-reveal var(--intro-fade-duration) linear forwards;
  animation-delay: 0s;
  transition: color 2s ease;
}

.subtitle {
  margin: 0;
  font-size: clamp(0.7rem, 1.6vw, 1rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--fg);
  position: absolute;
  left: 50%;
  top: calc(50% - var(--sym-offset) + (var(--title-size) * 0.5) + var(--title-sub-gap));
  transform: translate(-50%, 0);
  opacity: 0;
  animation: ui-reveal var(--intro-fade-duration) linear forwards;
  animation-delay: 0s;
  transition: color 2s ease;
}

.api-key-row {
  position: absolute;
  left: clamp(1.2rem, 3vw, 2rem);
  top: auto;
  bottom: clamp(0.6rem, 2.2vh, 1.2rem);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.32rem;
  width: min(300px, 74vw);
  padding: 0.1rem 0 0.2rem;
  border-bottom: 1px solid var(--line-strong);
  position: absolute;
  overflow: visible;
  z-index: 30;
  pointer-events: auto;
  opacity: 0;
  animation: ui-reveal var(--intro-fade-duration) linear forwards;
  animation-delay: 0s;
  animation-name: ui-reveal, line-pulse;
  animation-duration: var(--intro-fade-duration), 2.5s;
  animation-timing-function: linear, ease-in-out;
  animation-delay: 0s, var(--intro-fade-duration);
  animation-fill-mode: forwards, none;
  animation-iteration-count: 1, infinite;
  color: var(--fg);
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  transition: opacity 3s ease;
}

.codex-dock {
  position: fixed;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  left: auto;
  right: clamp(22px, 5.8vw, 96px);
  top: calc(50% + clamp(126px, 16vh, 244px));
  width: calc(clamp(170px, 18vw, 248px) * 0.91);
  aspect-ratio: 263 / 348;
  z-index: 40;
  transform: translateY(-50%) rotate(10deg);
  transform-origin: center center;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  visibility: visible;
  animation: ui-reveal var(--intro-fade-duration) linear forwards;
  animation-delay: 0s;
  overflow: hidden;
  transition: transform 260ms cubic-bezier(0.2, 0.72, 0.24, 1);
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body.is-partida-cerrada.game-screen .codex-dock {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
  transition: opacity 2000ms ease;
}

.codex-dock:not(.is-open):not(.is-opening):hover {
  transform: translateY(-50%) rotate(10deg) scale(calc(1 / 0.7));
}

.codex-book-cover {
  --codex-image: url("images/Base/Codex/Codex.png?v=8");
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-image: var(--codex-image), linear-gradient(#2a1d14, #2a1d14);
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: contain, 40% 40%;
  will-change: background-image;
  opacity: 1;
  transition: opacity 2000ms linear;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.codex-dock:focus {
  outline: none;
}

.codex-dock:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.32),
    0 0 0 5px rgba(255, 255, 255, 0.14);
}

.codex-dock.codex-cover-fading .codex-book-cover {
  opacity: 0;
}

.codex-dock.is-open {
  position: fixed;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: min(650px, 90vw);
  aspect-ratio: 421 / 284;
  z-index: 1420;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.codex-dock.is-opening {
  right: auto;
  bottom: auto;
}

.codex-dock.is-void-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

.codex-dock.is-puzzle-fading {
  pointer-events: none !important;
  animation: codex-puzzle-fade-out 1400ms ease forwards !important;
  transition: transform 260ms cubic-bezier(0.2, 0.72, 0.24, 1);
}

@keyframes codex-puzzle-fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.codex-holo {
  position: fixed;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.codex-holo.is-active {
  opacity: 1;
  visibility: visible;
}

.codex-holo-beam {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(2px, 0.18vw, 4px);
  height: 80vh;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) scaleY(0);
  background: linear-gradient(
    180deg,
    rgba(131, 227, 255, 0.95) 0%,
    rgba(91, 188, 255, 0.85) 30%,
    rgba(60, 140, 255, 0.7) 100%
  );
  box-shadow:
    0 0 10px rgba(86, 195, 255, 0.9),
    0 0 36px rgba(34, 130, 255, 0.7);
  filter: saturate(1.2);
}

.codex-conjuro-context {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
  --codex-context-size: 350px;
  --codex-context-offset-x: 4vw;
  --codex-context-offset-y: 6vh;
}

.codex-conjuro-context.is-active {
  opacity: 1;
}

.codex-conjuro-context-image {
  position: absolute;
  display: block;
  width: var(--codex-context-size);
  height: var(--codex-context-size);
  object-fit: contain;
  border: 0;
  box-shadow: none;
  background: transparent;
  opacity: 0.8;
  transition: opacity 840ms ease;
}

.codex-conjuro-context-image[hidden] {
  display: none;
}

.codex-conjuro-context-image.is-swapping {
  opacity: 0;
}

.codex-conjuro-context-image[data-conjuro-context-slot="1"] {
  top: var(--codex-context-offset-y);
  left: var(--codex-context-offset-x);
}

.codex-conjuro-context-image[data-conjuro-context-slot="2"] {
  top: var(--codex-context-offset-y);
  right: var(--codex-context-offset-x);
}

.codex-conjuro-context-image[data-conjuro-context-slot="3"] {
  bottom: var(--codex-context-offset-y);
  left: var(--codex-context-offset-x);
}

.codex-conjuro-context-image[data-conjuro-context-slot="4"] {
  bottom: var(--codex-context-offset-y);
  right: var(--codex-context-offset-x);
}

.codex-archive-progress {
  position: absolute;
  left: 50%;
  top: clamp(34px, 6.5vh, 72px);
  transform: translateX(-50%);
  width: min(66vw, 920px);
  display: none;
  gap: 0.55rem;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  filter:
    saturate(1.12)
    brightness(1.05)
    drop-shadow(0 0 14px rgba(255, 117, 26, 0.22));
}

.codex-holo.is-active[data-panel-mode="loaded"][data-archive-progress-visible="true"] .codex-archive-progress {
  display: grid;
  opacity: 1;
  animation: codex-holo-control-drift 4.2s ease-in-out infinite;
}

.codex-archive-progress-title {
  font-size: clamp(0.9rem, 1.08vw, 1.08rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 229, 204, 0.98);
}

.codex-archive-progress-value {
  font-size: clamp(0.92rem, 1.04vw, 1.08rem);
  font-weight: 700;
  color: rgba(255, 231, 210, 0.98);
}

.codex-archive-progress-bar {
  position: relative;
  height: clamp(24px, 2.5vw, 34px);
  padding: clamp(4px, 0.35vw, 6px);
  border: 1px solid rgba(255, 156, 83, 0.54);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(74, 18, 0, 0.34), rgba(31, 5, 0, 0.2)),
    repeating-linear-gradient(
      90deg,
      rgba(255, 191, 145, 0.04) 0 8px,
      rgba(19, 7, 2, 0.03) 8px 13px
    );
  box-shadow:
    inset 0 0 22px rgba(255, 152, 73, 0.12),
    0 0 20px rgba(255, 117, 26, 0.16);
  overflow: hidden;
  opacity: 0.88;
  animation:
    codex-floating-glyph-holo 2.6s ease-in-out infinite,
    codex-archive-progress-flicker 6.4s linear infinite;
}

.codex-archive-progress-meta {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1vw, 0.9rem);
  padding: 0 clamp(0.9rem, 1.5vw, 1.4rem);
  color: rgba(255, 205, 164, 0.92);
  text-shadow:
    0 0 10px rgba(255, 143, 56, 0.34),
    0 0 20px rgba(255, 117, 26, 0.18);
  font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", "Consolas", monospace;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.94;
  animation: codex-floating-glyph-holo 2.8s ease-in-out infinite;
}

.codex-archive-progress-bar::before {
  content: "";
  position: absolute;
  inset: clamp(4px, 0.35vw, 6px);
  border-radius: 6px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 218, 190, 0.08) 0 8px,
      rgba(255, 218, 190, 0) 8px 13px
    );
  opacity: 0.55;
  animation: codex-archive-progress-scan 2.2s linear infinite;
}

.codex-archive-progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.02) 38%,
      rgba(255, 255, 255, 0) 100%
    );
  mix-blend-mode: screen;
  opacity: 0.55;
}

.codex-archive-progress-fill {
  position: absolute;
  inset: clamp(4px, 0.35vw, 6px);
  width: calc(var(--codex-archive-progress, 0) * 1%);
  min-width: 0;
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(255, 128, 42, 0.88), rgba(255, 208, 133, 0.96)),
    repeating-linear-gradient(
      90deg,
      rgba(255, 241, 224, 0.55) 0 8px,
      rgba(255, 241, 224, 0) 8px 13px
    );
  box-shadow:
    inset 0 0 12px rgba(255, 240, 225, 0.28),
    0 0 18px rgba(255, 117, 26, 0.3);
  transition: width 280ms ease;
  animation:
    codex-floating-glyph-holo 2.2s ease-in-out infinite,
    codex-archive-progress-flicker 5.1s linear infinite reverse;
}

.codex-archive-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.18) 0 8px,
      rgba(255, 255, 255, 0) 8px 13px
    );
  mix-blend-mode: screen;
}

.codex-holo-decor {
  position: absolute;
  top: 50%;
  width: clamp(220px, 24vw, 360px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  border: 0;
  padding: 0;
  background: transparent;
  animation: none;
}

.codex-holo-decor-left {
  left: calc(50% - (min(40vw, 640px) / 2));
}

.codex-holo-decor-right {
  left: calc(50% + (min(40vw, 640px) / 2));
}

.codex-holo-decor-glyph {
  --codex-neon-orange-rgb: 102, 207, 255;
  width: 100%;
  height: 100%;
  background-color: rgba(102, 207, 255, 0.92);
  opacity: 0;
  filter:
    saturate(1.08)
    brightness(1.02)
    drop-shadow(0 0 14px rgba(102, 207, 255, 0.42));
}

.codex-holo.is-active[data-panel-mode="terminal"] .codex-holo-decor {
  opacity: 1;
  pointer-events: none;
}

.codex-holo.is-active[data-panel-mode="terminal"]:not(.is-page-transition):not([data-terminal-decor-ready="true"]) .codex-holo-decor-glyph {
  width: 100%;
  height: 100%;
  opacity: 0;
  animation:
    codex-glyph-decor-fade-in 2000ms ease 4000ms forwards,
    codex-glyph-decor-pulse 5.4s ease-in-out 6000ms infinite;
}

.codex-holo.is-active[data-panel-mode="terminal"][data-terminal-decor-ready="true"]:not(.is-page-transition) .codex-holo-decor-glyph {
  width: 100%;
  height: 100%;
  opacity: 0.14;
  animation: codex-glyph-decor-pulse 5.4s ease-in-out infinite;
}

.codex-holo.is-active:not([data-panel-mode="terminal"]) .codex-holo-decor {
  opacity: 1;
  z-index: 7;
  top: 50%;
  width: clamp(48px, 4.8vw, 72px);
  cursor: pointer;
  pointer-events: auto;
  animation: codex-holo-control-drift 3.6s ease-in-out infinite;
}

.codex-holo.is-active:not([data-panel-mode="terminal"]) .codex-holo-decor-left {
  left: calc(50% - min(40vw, 640px) - 12px);
}

.codex-holo.is-active:not([data-panel-mode="terminal"]) .codex-holo-decor-right {
  left: calc(50% + min(40vw, 640px) + 12px);
}

.codex-holo.is-active:not([data-panel-mode="terminal"]) .codex-holo-decor-glyph {
  --codex-neon-orange-rgb: 255, 117, 26;
  width: 210%;
  height: 210%;
  background-color: rgba(var(--codex-neon-orange-rgb), 0.95);
  opacity: 0.5;
  filter:
    saturate(1.18)
    brightness(1.14)
    contrast(1.1)
    drop-shadow(0 0 10px rgba(var(--codex-neon-orange-rgb), 0.62));
  animation: codex-floating-glyph-holo 2.4s ease-in-out infinite;
}

.codex-holo.is-active.is-page-transition[data-page-transition-direction="to-page"] .codex-holo-decor {
  opacity: 1 !important;
  z-index: 8;
  top: 50%;
  width: clamp(220px, 24vw, 360px);
  pointer-events: none !important;
  transform: translate(-50%, -50%);
  animation: none !important;
}

.codex-holo.is-active.is-page-transition[data-page-transition-direction="to-page"] .codex-holo-decor-left {
  left: calc(50% - (min(40vw, 640px) / 2));
  animation: codex-page-transition-left-stage2 1500ms linear 1500ms forwards !important;
}

.codex-holo.is-active.is-page-transition[data-page-transition-direction="to-page"] .codex-holo-decor-right {
  left: calc(50% + (min(40vw, 640px) / 2));
  animation: codex-page-transition-right-stage2 1500ms linear 1500ms forwards !important;
}

.codex-holo.is-active.is-page-transition[data-page-transition-direction="to-page"] .codex-holo-decor-glyph {
  width: 100%;
  height: 100%;
  animation:
    codex-page-transition-glyph-stage1 1500ms ease forwards,
    codex-page-transition-glyph-stage2 1500ms linear 1500ms forwards !important;
}

.codex-holo.is-active.is-page-transition[data-page-transition-direction="to-terminal"] .codex-holo-decor {
  opacity: 1 !important;
  z-index: 8;
  top: 50%;
  width: clamp(48px, 4.8vw, 72px);
  pointer-events: none !important;
  transform: translate(-50%, -50%);
  animation: none !important;
}

.codex-holo.is-active.is-page-transition[data-page-transition-direction="to-terminal"] .codex-holo-decor-left {
  left: calc(50% - min(40vw, 640px) - 12px);
  animation: codex-page-transition-left-stage2-reverse 1500ms linear forwards !important;
}

.codex-holo.is-active.is-page-transition[data-page-transition-direction="to-terminal"] .codex-holo-decor-right {
  left: calc(50% + min(40vw, 640px) + 12px);
  animation: codex-page-transition-right-stage2-reverse 1500ms linear forwards !important;
}

.codex-holo.is-active.is-page-transition[data-page-transition-direction="to-terminal"] .codex-holo-decor-glyph {
  width: 210%;
  height: 210%;
  animation:
    codex-page-transition-glyph-stage2-reverse 1500ms linear forwards,
    codex-page-transition-glyph-stage1-reverse 1500ms ease 1500ms forwards !important;
}

.codex-holo.is-page-transition .codex-holo-panel > * {
  opacity: 0 !important;
  pointer-events: none !important;
}

.codex-holo[data-codex-gear-transition="true"] .codex-holo-panel-left,
.codex-holo[data-codex-gear-transition="true"] .codex-holo-panel-right,
.codex-holo[data-codex-gear-transition="true"] .codex-holo-beam {
  transition: opacity 1500ms linear;
}

.codex-holo.is-active.is-page-transition[data-codex-gear-transition="true"] .codex-holo-panel-left,
.codex-holo.is-active.is-page-transition[data-codex-gear-transition="true"] .codex-holo-panel-right,
.codex-holo.is-active.is-page-transition[data-codex-gear-transition="true"] .codex-holo-beam {
  opacity: 0.5 !important;
}

.codex-holo.is-active[data-panel-mode="history"] .codex-holo-panel > * {
  opacity: 0 !important;
  pointer-events: none !important;
}

.codex-holo-control:hover {
  transform: translate(-50%, -50%) translateY(-2px) scale(1.045);
  filter: none;
}

.codex-holo-control:active {
  transform: translate(-50%, -50%) scale(0.98);
}

.codex-holo-panel {
  --codex-console-command-size: clamp(0.68rem, 0.92vw, 0.88rem);
  --codex-console-fg: #8ef7d9;
  --codex-console-fg-strong: #b9ffe9;
  --codex-console-fg-dim: rgba(142, 247, 217, 0.72);
  --codex-text-label-color: var(--codex-console-fg-strong);
  --codex-text-value-color: rgba(142, 247, 217, 0.76);
  --codex-text-font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", "Consolas", monospace;
  --codex-text-shadow-soft: 0 0 4px rgba(80, 202, 255, 0.2);
  --codex-text-shadow-label: 0 0 5px rgba(96, 216, 255, 0.26);
  --codex-text-shadow-value: 0 0 2px rgba(80, 202, 255, 0.08);
  position: absolute;
  top: 50%;
  width: min(40vw, 640px);
  height: clamp(320px, 54vh, 600px);
  transform: translateY(-50%);
  transform-origin: center;
  border: 1px solid rgba(118, 215, 255, 0.54);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(88, 188, 255, 0.22), rgba(31, 91, 166, 0.17)),
    repeating-linear-gradient(
      180deg,
      rgba(136, 233, 255, 0.05) 0 2px,
      rgba(9, 41, 81, 0.03) 2px 6px
    );
  box-shadow:
    inset 0 0 28px rgba(130, 222, 255, 0.18),
    0 0 30px rgba(41, 137, 255, 0.22);
  backdrop-filter: none;
  opacity: 1;
  overflow: hidden;
  padding: clamp(14px, 2vw, 24px);
  font-family: var(--codex-text-font-family);
  font-size: var(--codex-console-command-size);
  color: var(--codex-console-fg);
  text-shadow: var(--codex-text-shadow-soft);
  pointer-events: auto;
  will-change: clip-path, opacity;
}

.codex-holo-panel-left {
  right: 50%;
  margin-right: 0;
  clip-path: inset(0 0 0 100%);
  color: var(--codex-console-fg);
  text-shadow:
    0 0 7px rgba(142, 247, 217, 0.34),
    0 0 14px rgba(185, 255, 233, 0.16);
}

.codex-holo-panel-right {
  left: 50%;
  margin-left: 0;
  clip-path: inset(0 100% 0 0);
}

.codex-holo-title {
  margin: 0 0 0.5rem;
  font-size: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.codex-holo-body {
  font-size: inherit;
  line-height: 1.45;
  opacity: 0.9;
}

.codex-console-line {
  margin: 0;
  color: var(--codex-console-fg);
  font-family: var(--codex-text-font-family);
  font-size: var(--codex-console-command-size, 1rem);
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-shadow: var(--codex-text-shadow-soft);
}

.codex-console-line.is-strong {
  color: var(--codex-console-fg-strong);
  font-weight: 700;
}

.codex-console-line.is-dim {
  color: var(--codex-console-fg-dim);
}

.codex-console-line.is-subtitle {
  margin-top: auto;
  padding-top: 0.35rem;
}

.codex-console {
  display: grid;
  gap: 0.45rem;
  align-content: stretch;
  width: 100%;
  height: 100%;
}

.codex-console-log {
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  padding-right: 0.35rem;
}

.codex-console-log::-webkit-scrollbar {
  width: 6px;
}

.codex-console-log::-webkit-scrollbar-thumb {
  background: rgba(185, 255, 233, 0.3);
  border-radius: 8px;
}

.codex-console-log-left {
  flex: 1 1 auto;
  margin-top: 0.6rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(142, 247, 217, 0.25);
}

.codex-console-input {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.3rem;
  margin-top: auto;
  padding-top: 0.22rem;
  border-top: 1px solid rgba(142, 247, 217, 0.25);
}

.codex-console-input-top {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  align-self: start;
}

.codex-left-novel {
  display: none;
  margin-top: 0.6rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(142, 247, 217, 0.25);
  max-height: calc(100% - 2.1rem);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(185, 255, 233, 0.38) rgba(12, 53, 64, 0.24);
  white-space: pre-wrap;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.45;
  color: var(--codex-console-fg);
}

.codex-left-novel::-webkit-scrollbar {
  width: 8px;
}

.codex-left-novel::-webkit-scrollbar-track {
  background: rgba(12, 53, 64, 0.24);
  border-radius: 8px;
}

.codex-left-novel::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(185, 255, 233, 0.5), rgba(142, 247, 217, 0.3));
  border-radius: 8px;
  border: 1px solid rgba(185, 255, 233, 0.18);
}

.codex-left-novel.is-visible {
  display: block;
}

.codex-sagas-title {
  margin: 0 0 0.65rem;
  text-align: center;
  font-size: clamp(1.2rem, 1.55vw, 1.72rem);
  line-height: 1.2;
  color: var(--codex-text-label-color);
  letter-spacing: 0.04em;
  white-space: normal;
  font-family: var(--codex-text-font-family);
  text-shadow: var(--codex-text-shadow-label);
}

.codex-saga-heading {
  display: block;
  width: 100%;
  margin: 0 0 0.75rem;
  padding: 0.38rem 0.55rem;
  border: 1px solid rgba(185, 255, 233, 0.34);
  border-radius: 8px;
  background: rgba(12, 53, 64, 0.16);
  color: var(--codex-text-label-color);
  text-align: center;
  white-space: normal;
  cursor: pointer;
  font: inherit;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease, text-shadow 180ms ease;
  font-family: var(--codex-text-font-family);
  text-shadow: var(--codex-text-shadow-label);
}

.codex-saga-heading:hover,
.codex-saga-heading:focus-visible {
  color: var(--codex-text-label-color);
  border-color: rgba(185, 255, 233, 0.72);
  background: rgba(74, 170, 191, 0.28);
  text-shadow: var(--codex-text-shadow-label);
  box-shadow: 0 0 0 1px rgba(185, 255, 233, 0.3), 0 0 10px rgba(108, 226, 255, 0.16);
}

.codex-saga-heading.is-active,
.codex-saga-heading[aria-expanded="true"] {
  color: var(--codex-text-value-color);
  border-color: rgba(185, 255, 233, 0.88);
  background: rgba(57, 134, 151, 0.34);
  text-shadow: var(--codex-text-shadow-value);
  box-shadow: 0 0 0 1px rgba(185, 255, 233, 0.4), 0 0 14px rgba(108, 226, 255, 0.24);
}

.codex-saga-final-button {
  --codex-saga-final-rgb: 255, 117, 26;
  border-color: rgba(var(--codex-saga-final-rgb), 0.55);
  color: rgba(255, 233, 214, 0.98);
  text-shadow: 0 0 10px rgba(var(--codex-saga-final-rgb), 0.5);
  box-shadow: 0 0 0 1px rgba(var(--codex-saga-final-rgb), 0.25), 0 0 16px rgba(var(--codex-saga-final-rgb), 0.25);
}

.codex-saga-final-button.is-completed {
  --codex-saga-final-rgb: 255, 212, 0;
  color: rgba(255, 246, 200, 0.98);
  text-shadow: 0 0 10px rgba(var(--codex-saga-final-rgb), 0.55);
  box-shadow: 0 0 0 1px rgba(var(--codex-saga-final-rgb), 0.3), 0 0 16px rgba(var(--codex-saga-final-rgb), 0.3);
}

.codex-saga-final-button.is-completed:hover,
.codex-saga-final-button.is-completed:focus-visible {
  border-color: rgba(var(--codex-saga-final-rgb), 0.9);
  background: rgba(120, 92, 14, 0.35);
  color: rgba(255, 252, 228, 1);
  text-shadow: 0 0 12px rgba(var(--codex-saga-final-rgb), 0.75);
  box-shadow: 0 0 0 1px rgba(var(--codex-saga-final-rgb), 0.55), 0 0 20px rgba(var(--codex-saga-final-rgb), 0.5);
}

.codex-saga-final-button:hover,
.codex-saga-final-button:focus-visible {
  border-color: rgba(var(--codex-saga-final-rgb), 0.85);
  background: rgba(130, 58, 18, 0.38);
  color: rgba(255, 243, 235, 1);
  text-shadow: 0 0 12px rgba(var(--codex-saga-final-rgb), 0.7);
  box-shadow: 0 0 0 1px rgba(var(--codex-saga-final-rgb), 0.5), 0 0 20px rgba(var(--codex-saga-final-rgb), 0.45);
}
.codex-saga-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 0.85rem;
}

.codex-saga-export-row {
  display: flex;
  justify-content: center;
  margin: 0 0 0.6rem;
}

.codex-sagas-action-button {
  min-width: 9.5rem;
  text-align: center;
}

.codex-saga-export {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.codex-saga-subtree {
  margin-top: -0.08rem;
  margin-bottom: 0.2rem;
  padding-left: 0.95rem;
}

.codex-sagas-chapters {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  margin-bottom: 0.62rem;
  white-space: normal;
}

.codex-mitologia-submenu {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin: 0.2rem 0 0.35rem 0.85rem;
}

.codex-mitologia-submenu[hidden] {
  display: none;
}

.codex-left-novel [hidden],
.codex-right-profile [hidden] {
  display: none !important;
}

.codex-conjuro-entry {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(142, 247, 217, 0.16);
}

.codex-conjuro-entry:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.codex-left-novel.is-conjuros .codex-conjuro-entry {
  border-bottom: 0;
  padding-bottom: 0.2rem;
}

.codex-left-novel.is-conjuros .codex-sagas-chapter {
  outline: none;
}

.codex-left-novel.is-conjuros.is-renovatio-nibbaana {
  display: flex;
  flex-direction: column;
}

.codex-left-novel.is-conjuros .codex-conjuro-entry .codex-sagas-chapter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.codex-conjuro-status-inline {
  margin-left: auto;
  font-size: 0.85em;
  letter-spacing: 0.03em;
  color: var(--codex-console-fg-dim);
  text-transform: none;
}

.codex-left-novel.is-conjuros .codex-sagas-chapter:hover,
.codex-left-novel.is-conjuros .codex-sagas-chapter:focus-visible,
.codex-left-novel.is-conjuros .codex-sagas-chapter.is-active {
}

.codex-left-novel.is-conjuros .codex-conjuros-school-button {
  border-color: rgba(var(--codex-school-rgb, 185, 255, 233), 0.48);
  background:
    linear-gradient(180deg, rgba(var(--codex-school-rgb, 185, 255, 233), 0.14), rgba(12, 53, 64, 0.24));
  text-shadow: 0 0 8px rgba(var(--codex-school-rgb, 185, 255, 233), 0.35);
  box-shadow:
    inset 0 0 0 1px rgba(var(--codex-school-rgb, 185, 255, 233), 0.12),
    0 0 14px rgba(var(--codex-school-rgb, 185, 255, 233), 0.18);
}

.codex-left-novel.is-conjuros .codex-conjuros-school-button:hover,
.codex-left-novel.is-conjuros .codex-conjuros-school-button:focus-visible {
  border-color: rgba(var(--codex-school-rgb, 185, 255, 233), 0.9);
  background:
    linear-gradient(180deg, rgba(var(--codex-school-rgb, 185, 255, 233), 0.3), rgba(var(--codex-school-rgb, 185, 255, 233), 0.14));
  text-shadow: 0 0 12px rgba(var(--codex-school-rgb, 185, 255, 233), 0.68);
  box-shadow:
    0 0 0 1px rgba(var(--codex-school-rgb, 185, 255, 233), 0.38),
    0 0 18px rgba(var(--codex-school-rgb, 185, 255, 233), 0.32);
}

.codex-left-novel.is-conjuros .codex-conjuros-school-button.is-active {
  border-color: rgba(var(--codex-school-rgb, 185, 255, 233), 0.82);
  background:
    linear-gradient(180deg, rgba(var(--codex-school-rgb, 185, 255, 233), 0.34), rgba(var(--codex-school-rgb, 185, 255, 233), 0.16));
  color: var(--codex-console-fg-strong);
  text-shadow: 0 0 14px rgba(var(--codex-school-rgb, 185, 255, 233), 0.75);
  box-shadow:
    0 0 0 1px rgba(var(--codex-school-rgb, 185, 255, 233), 0.42),
    0 0 22px rgba(var(--codex-school-rgb, 185, 255, 233), 0.36);
}

.codex-conjuro-entry-desc {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0 0.2rem 0.2rem;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, max-height 200ms ease;
}

.codex-conjuro-entry-desc.is-visible {
  opacity: 1;
  max-height: 18rem;
  pointer-events: auto;
}

.codex-conjuro-entry-line {
  margin: 0;
  color: var(--codex-console-fg-dim);
  font-size: 0.92em;
  line-height: 1.35;
}

.codex-conjuros-description {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  margin-top: 0.6rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(142, 247, 217, 0.22);
}

.codex-conjuros-detail.is-renovatio-nibbaana {
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  min-height: 0;
  padding-top: 2cm;
}

.codex-conjuros-detail.is-renovatio-nibbaana .codex-conjuros-intro-line {
  text-align: center;
  width: 100%;
}

.codex-conjuros-intro-line {
  margin: 0;
  color: var(--codex-console-fg);
  line-height: 1.45;
}

.codex-conjuros-howto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.codex-conjuros-glyph {
  position: relative;
  width: min(100%, 420px);
  display: grid;
  place-items: center;
  margin-top: 1.1cm;
  opacity: 0.5;
  animation:
    codex-floating-glyph-holo 2.4s ease-in-out infinite,
    codex-conjuros-drift 3.6s ease-in-out infinite;
  will-change: filter, opacity;
}

.codex-conjuros-glyph::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 190, 110, 0.16) 0px,
      rgba(255, 190, 110, 0.16) 1px,
      rgba(255, 190, 110, 0) 2px,
      rgba(255, 190, 110, 0) 4px
    );
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: var(--conjuro-image);
  mask-image: var(--conjuro-image);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  animation: none;
}

.codex-conjuros-glyph.is-umbra::after {
  display: none;
}

.codex-conjuros-image {
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.codex-conjuros-renovatio-art {
  width: min(100%, 360px);
  height: auto;
  display: block;
  filter: drop-shadow(0 0 16px rgba(108, 226, 255, 0.35));
  margin-top: 2cm;
}

.codex-right-profile.is-conjuros.is-renovatio-nibbaana {
  display: flex;
  align-items: center;
  justify-content: center;
}

.codex-conjuro-purchase {
  margin-top: 0.6rem;
  display: grid;
  gap: 0.3rem;
  justify-items: center;
}

.codex-conjuro-price,
.codex-conjuro-stock {
  margin: 0;
  color: var(--codex-console-fg-dim);
  font-size: 0.92em;
}

.codex-conjuro-selection {
  margin: 0;
  color: var(--codex-console-fg);
  font-size: 0.92em;
}

.codex-conjuro-status {
  margin: 0;
  color: var(--codex-console-fg);
  font-size: 0.95em;
  letter-spacing: 0.04em;
}

.codex-conjuro-buy {
  min-width: 9.5rem;
  text-align: center;
  justify-content: center;
}

.codex-conjuro-buy.codex-sagas-chapter {
  text-align: center;
}

.codex-conjuro-buy:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.codex-chapas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 0.55rem;
  overflow: visible;
}

.codex-chapas-selection {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
  width: 100%;
  padding: 0.35rem 0.4rem;
  border-radius: 10px;
  border: 1px solid rgba(185, 255, 233, 0.22);
  background: rgba(12, 53, 64, 0.14);
}

.codex-chapas-selection-title {
  margin: 0;
  color: var(--codex-console-fg);
  font-size: 0.9em;
  font-family: var(--codex-text-font-family);
  text-shadow: var(--codex-text-shadow-soft);
}

.codex-chapas-selection-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 0.4rem;
}

.codex-chapa-select {
  pointer-events: auto;
  position: relative;
  display: grid;
  place-items: center;
  padding: 0.2rem;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.codex-chapa-select.is-selected {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.codex-chapa-select-image {
  pointer-events: none;
  width: 100%;
  height: auto;
  max-width: 84px;
  display: block;
  filter: drop-shadow(0 0 8px rgba(108, 226, 255, 0.25));
}

.codex-chapa-select-count {
  pointer-events: none;
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  padding: 0.04rem 0.35rem;
  border-radius: 999px;
  background: rgba(185, 255, 233, 0.92);
  color: rgba(12, 36, 44, 0.95);
  font-size: 0.7rem;
  font-weight: 700;
}

.codex-chapa-card {
  pointer-events: auto;
  position: relative;
  display: grid;
  place-items: center;
  padding: 0.2rem 0.2rem 0.55rem;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease, transform 180ms ease;
  overflow: visible;
}

.codex-chapa-card.is-active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.codex-chapa-card::after {
  content: "";
  position: absolute;
  inset: 0.2rem 0.65rem;
  border-radius: 10px;
  background: radial-gradient(circle at center, rgba(108, 226, 255, 0.18), rgba(108, 226, 255, 0) 70%);
  opacity: 0.35;
  pointer-events: none;
}

.codex-chapa-card.is-active::after {
  background: radial-gradient(circle at center, rgba(185, 255, 233, 0.5), rgba(108, 226, 255, 0) 72%);
  opacity: 0.85;
}

.codex-chapa-card:not(.is-owned) {
  opacity: 0.45;
}

.codex-chapa-card:not(.is-owned) .codex-chapa-image {
  pointer-events: none;
  filter: grayscale(1) brightness(0.75);
}

.codex-chapa-image {
  width: 100%;
  height: auto;
  max-width: 92px;
  display: block;
  filter: none;
}

.codex-chapa-count {
  pointer-events: none;
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(185, 255, 233, 0.9);
  color: rgba(12, 36, 44, 0.95);
  font-size: 0.72rem;
  font-weight: 700;
}

.codex-chapa-detail {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  margin-top: 1cm;
  width: 100%;
}

.codex-chapa-detail-image {
  width: min(100%, 300px);
  height: auto;
  display: block;
  filter: drop-shadow(0 0 16px rgba(108, 226, 255, 0.35));
}

.codex-chapa-detail.is-unowned .codex-chapa-detail-image {
  filter: grayscale(1) brightness(0.75) drop-shadow(0 0 16px rgba(108, 226, 255, 0.2));
}

.codex-chapa-detail-count,
.codex-chapa-detail-total {
  margin: 0;
  color: var(--codex-console-fg);
}

.codex-conjuros-placeholder {
  margin: 0;
  text-align: center;
  color: var(--codex-console-fg-dim);
}

.codex-conjuros-poem {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  border: 1px solid rgba(185, 255, 233, 0.32);
  background: rgba(12, 53, 64, 0.18);
  box-shadow: 0 0 18px rgba(108, 226, 255, 0.12);
}

.codex-conjuros-poem-line {
  margin: 0;
  color: var(--codex-console-fg);
  text-align: center;
  line-height: 1.45;
  font-family: var(--codex-text-font-family);
  text-shadow: var(--codex-text-shadow-value);
}

.codex-sagas-chapter {
  border: 1px solid rgba(185, 255, 233, 0.42);
  background: rgba(12, 53, 64, 0.2);
  color: var(--codex-console-fg);
  border-radius: 7px;
  padding: 0.28rem 0.5rem;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease, text-shadow 180ms ease;
  text-shadow: var(--codex-text-shadow-value);
}

.codex-sagas-chapter:hover,
.codex-sagas-chapter:focus-visible {
  color: var(--codex-text-value-color);
  border-color: rgba(185, 255, 233, 0.88);
  background: rgba(74, 170, 191, 0.42);
  text-shadow: var(--codex-text-shadow-value);
  box-shadow: 0 0 0 1px rgba(185, 255, 233, 0.36), 0 0 10px rgba(108, 226, 255, 0.2);
}

.codex-sagas-chapter.is-active {
  color: var(--codex-text-value-color);
  border-color: rgba(185, 255, 233, 0.62);
  background: rgba(57, 134, 151, 0.32);
}

.codex-sagas-empty {
  margin: 0;
  color: var(--codex-text-value-color);
  white-space: normal;
  text-shadow: var(--codex-text-shadow-value);
}

.codex-khrono-floating-image-wrap {
  position: fixed;
  top: clamp(0.75rem, 2.2vh, 2.2rem);
  right: clamp(0.75rem, 2.2vw, 2.2rem);
  z-index: 5106;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, -0.35rem, 0);
  transition: opacity 220ms ease, transform 220ms ease;
}

.codex-khrono-floating-image-wrap.is-active {
  opacity: 0.8;
  transform: translate3d(0, 0, 0);
}

.codex-khrono-floating-image {
  display: block;
  width: auto;
  height: auto;
  max-width: min(46vw, 46vh);
  filter: drop-shadow(0 0 10px rgba(108, 226, 255, 0.24));
}

.codex-guide-video-wrap {
  display: flex;
  justify-content: center;
  margin: 0.25rem 0 0.6rem;
}

.codex-guide-video {
  width: min(100%, 360px);
  border-radius: 10px;
  border: 1px solid rgba(185, 255, 233, 0.32);
  box-shadow: 0 0 18px rgba(108, 226, 255, 0.18);
  background: rgba(12, 53, 64, 0.2);
}

.codex-chapter-page-title {
  margin: 0 0 0.65rem;
  text-align: center;
  font-size: clamp(1.12rem, 1.46vw, 1.62rem);
  line-height: 1.2;
  color: var(--codex-text-label-color);
  letter-spacing: 0.03em;
  white-space: normal;
  font-family: var(--codex-text-font-family);
  text-shadow: var(--codex-text-shadow-label);
}

.codex-chapter-page-text {
  margin: 0;
  padding-top: 0.52rem;
  border-top: 1px solid rgba(142, 247, 217, 0.24);
  color: var(--codex-text-value-color);
  white-space: pre-wrap;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.45;
  text-shadow: var(--codex-text-shadow-value);
}

.codex-sagas-reader {
  margin: 0;
  border-top: 1px solid rgba(142, 247, 217, 0.22);
  padding-top: 0.5rem;
  white-space: pre-wrap;
  overflow: auto;
  max-height: calc(100% - 12.2rem);
  color: var(--codex-text-value-color);
  font-family: inherit;
  font-size: inherit;
  line-height: 1.45;
  text-shadow: var(--codex-text-shadow-value);
}

.codex-console-prompt {
  color: var(--codex-console-fg);
  font-size: var(--codex-console-command-size);
  line-height: 1.4;
  font-family: var(--codex-text-font-family);
  text-shadow: var(--codex-text-shadow-soft);
}

.codex-console-input-field {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--codex-console-fg-dim);
  font-family: var(--codex-text-font-family);
  font-size: var(--codex-console-command-size);
  line-height: 1.4;
  caret-color: transparent;
  text-shadow: var(--codex-text-shadow-soft);
}

.codex-console-input-field::placeholder {
  color: var(--codex-console-fg-dim);
}

.codex-console-input-track {
  --codex-caret-x: 0px;
  --codex-caret-scroll-x: 0px;
  position: relative;
  display: block;
  min-width: 0;
}

.codex-console-caret-thick {
  position: absolute;
  top: 50%;
  left: calc(var(--codex-caret-x) - var(--codex-caret-scroll-x));
  width: 0.72ch;
  height: 1.2em;
  transform: translateY(-50%);
  background: var(--codex-console-fg-strong);
  box-shadow: 0 0 10px rgba(185, 255, 233, 0.45);
  opacity: 0;
  pointer-events: none;
}

.codex-console-input-field:focus + .codex-console-caret-thick {
  opacity: 1;
  animation: codex-console-caret-blink 1s steps(1, end) infinite;
}

.codex-holo.is-active .codex-console-caret-thick {
  opacity: 1;
  animation: codex-console-caret-blink 1s steps(1, end) infinite;
}

.codex-holo-panel-right .codex-console-log {
  height: 100%;
}

.codex-right-profile {
  display: none;
  height: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
  padding-top: 0;
  padding-inline: 0.5rem;
  padding-bottom: 3.2rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(185, 255, 233, 0.38) rgba(12, 53, 64, 0.24);
  font-family: inherit;
  font-size: inherit;
  line-height: 1.45;
  color: var(--codex-console-fg);
}

.codex-right-profile.is-library {
  margin-top: 0.6rem;
  padding-top: 0.45rem;
  padding-inline: 0;
  padding-bottom: 0;
  border-top: 1px solid rgba(142, 247, 217, 0.25);
  max-height: calc(100% - 2.1rem);
  white-space: pre-wrap;
  scrollbar-gutter: auto;
  filter: none;
  text-shadow: var(--codex-text-shadow-value);
}

.codex-right-profile::-webkit-scrollbar {
  width: 8px;
}

.codex-right-profile::-webkit-scrollbar-track {
  background: rgba(12, 53, 64, 0.24);
  border-radius: 8px;
}

.codex-right-profile::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(185, 255, 233, 0.5), rgba(142, 247, 217, 0.3));
  border-radius: 8px;
  border: 1px solid rgba(185, 255, 233, 0.18);
}

.codex-right-profile.is-conjuros {
  scrollbar-gutter: auto;
  scrollbar-width: none;
}

.codex-right-profile.is-conjuros::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.codex-right-profile.is-chapas {
  scrollbar-gutter: auto;
  scrollbar-width: none;
  text-align: center;
  padding-inline: 0;
}

.codex-right-profile.is-chapas::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.codex-right-profile.is-visible.is-chapas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.codex-right-profile.is-visible {
  display: block;
}

.codex-panel-back {
  border: 1px solid rgba(185, 255, 233, 0.55);
  color: var(--codex-console-fg);
  background: rgba(34, 94, 106, 0.32);
  padding: 0.35rem 0.62rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: inherit;
  text-shadow: var(--codex-text-shadow-soft);
  cursor: pointer;
  display: inline-flex;
  z-index: 6;
}

.codex-panel-back:hover {
  background: rgba(57, 134, 151, 0.45);
}

.codex-profile-avatar {
  --codex-avatar-size: clamp(88px, 9vw, 132px);
  width: var(--codex-avatar-size);
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(185, 255, 233, 0.5);
  border-radius: 10px;
  background: rgba(8, 27, 34, 0.3) center / cover no-repeat;
  opacity: 0.9;
  margin: 0 auto 0.7rem;
}

.codex-profile-header {
  --codex-avatar-size: clamp(88px, 9vw, 132px);
  --codex-symbol-size: calc(var(--codex-avatar-size) * 0.92);
  display: grid;
  grid-template-columns: 1fr var(--codex-avatar-size) 1fr;
  align-items: center;
  column-gap: 0;
  margin: 0 0 0.7rem;
  width: 100%;
}

.codex-profile-header .codex-profile-avatar {
  margin: 0;
}

.codex-profile-selection {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.1rem;
  padding-top: 0.4rem;
}

.codex-profile-selection-retry-only {
  --codex-profile-symbol-center-x: 50%;
  --codex-profile-symbol-center-y: 50%;
  position: relative;
  justify-content: flex-start;
  gap: 0.4rem;
  padding-top: 0;
}

.codex-profile-selection-continue-visual {
  --codex-profile-symbol-center-y: 50%;
}

.codex-profile-selection-dual {
  position: relative;
  justify-content: flex-start;
  gap: 0.4rem;
  padding-top: 0;
}

.codex-profile-header-selection {
  width: 100%;
  margin-top: 0.15rem;
  margin-bottom: 0;
  flex: 0 0 auto;
}

.codex-profile-selection-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  width: min(100%, 22rem);
}

.codex-profile-selection-retry-only .codex-profile-selection-actions {
  position: static;
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
}

.codex-profile-selection-dual .codex-profile-selection-actions {
  position: static;
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
}

.codex-profile-selection-actions-hidden {
  display: contents;
}

.codex-profile-action-button {
  border: 1px solid rgba(185, 255, 233, 0.55);
  background: rgba(12, 53, 64, 0.26);
  color: var(--codex-console-fg);
  border-radius: 10px;
  padding: 0.62rem 0.95rem;
  min-width: min(100%, 10.4rem);
  font-family: inherit;
  font-size: clamp(0.86rem, 1vw, 0.98rem);
  line-height: 1.2;
  text-shadow: var(--codex-text-shadow-soft);
  text-align: center;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.codex-profile-action-button:hover,
.codex-profile-action-button:focus-visible {
  border-color: rgba(185, 255, 233, 0.88);
  background: rgba(74, 170, 191, 0.42);
  box-shadow: 0 0 0 1px rgba(185, 255, 233, 0.4), 0 0 16px rgba(108, 226, 255, 0.24);
}

.codex-profile-action-button:disabled {
  opacity: 0.6;
  cursor: default;
}

.codex-profile-logo-trigger {
  position: absolute;
  left: var(--codex-profile-symbol-center-x);
  top: var(--codex-profile-symbol-center-y);
  display: grid;
  place-items: center;
  width: min(100%, 18rem);
  min-height: clamp(220px, 34vh, 320px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  isolation: isolate;
  transform: translate(-50%, -50%);
}

.codex-profile-logo-trigger-left {
  --codex-profile-symbol-center-x: calc(34% - 0.5cm);
  --codex-profile-symbol-center-y: calc(50% + 1.5cm);
}

.codex-profile-selection-dual .codex-profile-logo-trigger-left .codex-profile-watermark-selection-trigger {
  width: min(57.72%, 10.92rem);
}

.codex-profile-selection-dual .codex-profile-logo-trigger-right .codex-profile-watermark-selection-trigger {
  width: min(96.2%, 18.2rem);
}

.codex-profile-logo-trigger-right {
  --codex-profile-symbol-center-x: calc(66% + 0.5cm);
  --codex-profile-symbol-center-y: calc(50% + 1.5cm);
}

.codex-profile-selection-dual .codex-profile-logo-trigger {
  width: min(57.2%, 16.25rem);
  min-height: clamp(234px, 36.4vh, 312px);
}

.codex-profile-selection-dual .codex-profile-action-button-overlay {
  min-width: min(100%, 9.8rem);
}

.codex-profile-logo-trigger:hover,
.codex-profile-logo-trigger:focus-visible {
  outline: none;
}

.codex-profile-watermark-selection-trigger {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.3);
  width: min(74%, 14rem);
  z-index: 1;
  opacity: 0.26;
  animation:
    codex-floating-glyph-holo 3.8s ease-in-out infinite,
    codex-profile-logo-pulse 3.6s ease-in-out infinite;
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

.codex-profile-watermark.codex-profile-watermark-selection-trigger {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.3);
}

.codex-profile-logo-trigger:not(.codex-profile-logo-trigger-continue-visual) .codex-profile-watermark-selection-trigger {
  top: calc(50% + 1cm);
}

.codex-profile-selection-new-avatar .codex-profile-logo-trigger:not(.codex-profile-logo-trigger-continue-visual) .codex-profile-watermark-selection-trigger {
  top: calc(50% + 0.5cm);
}

.codex-profile-logo-trigger-continue-visual .codex-profile-watermark-selection-trigger:not(.codex-profile-watermark-selection-trigger-bottom) {
  top: calc(50% - 2cm);
}

.codex-profile-logo-trigger-continue-visual .codex-profile-watermark-selection-trigger-bottom {
  top: calc(50% + 3.75cm);
  transform: translate(-50%, -50%) scale(-1.3, 1.3);
  opacity: 0.24;
}

.codex-profile-logo-trigger:hover .codex-profile-watermark-selection-trigger,
.codex-profile-logo-trigger:focus-visible .codex-profile-watermark-selection-trigger {
  opacity: 0;
}

.codex-profile-action-button-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  opacity: 1;
  pointer-events: none;
  border-color: rgba(185, 255, 233, 0.55);
  background: rgba(12, 53, 64, 0.26);
  box-shadow: none;
  transition: opacity 220ms ease;
}

.codex-profile-selection .codex-profile-action-button-overlay {
  transform: translate(-50%, calc(-50% + 0.9cm));
}

.codex-profile-logo-trigger:hover .codex-profile-action-button-overlay,
.codex-profile-logo-trigger:focus-visible .codex-profile-action-button-overlay {
  opacity: 1;
  border-color: rgba(185, 255, 233, 0.88);
  background: rgba(74, 170, 191, 0.42);
  box-shadow: 0 0 0 1px rgba(185, 255, 233, 0.4), 0 0 16px rgba(108, 226, 255, 0.24);
}

.codex-profile-header-committed {
  display: block;
  position: relative;
  margin-top: 0.15rem;
  margin-bottom: 0.75rem;
}

.codex-profile-committed {
  --codex-profile-symbol-center-x: 50%;
  --codex-profile-symbol-center-y: calc(50% + 1.5cm);
  position: relative;
  isolation: isolate;
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
}

.codex-profile-committed > *:not(.codex-profile-watermark) {
  position: relative;
  z-index: 1;
}

.codex-profile-watermark {
  position: absolute;
  left: var(--codex-profile-symbol-center-x, 50%);
  top: var(--codex-profile-symbol-center-y, 50%);
  transform: translate(-50%, -50%);
  width: min(72%, 24rem);
  height: auto;
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
  filter:
    brightness(0)
    saturate(100%)
    invert(87%)
    sepia(46%)
    saturate(565%)
    hue-rotate(96deg)
    brightness(102%)
    contrast(96%);
}

.codex-profile-watermark-left {
  width: min(93.6%, 31.2rem);
}

.codex-profile-watermark-right {
  width: min(82%, 28rem);
}

.codex-profile-avatar-selection {
  margin: 0 0 0.15rem;
  opacity: 0.9;
}

.codex-profile-side-empty {
  opacity: 0;
}

.codex-profile-side {
  position: relative;
  min-height: calc(var(--codex-symbol-size) * 1.36);
  display: grid;
  place-items: center;
}

.codex-profile-side-button {
  border: 0;
  background: transparent;
  width: 100%;
  padding: 0;
  cursor: pointer;
  outline: none;
}

.codex-profile-symbol {
  width: var(--codex-symbol-size);
  height: auto;
  object-fit: contain;
  grid-area: 1 / 1;
  filter:
    brightness(0)
    saturate(100%)
    invert(87%)
    sepia(46%)
    saturate(565%)
    hue-rotate(96deg)
    brightness(102%)
    contrast(96%)
    drop-shadow(0 0 10px rgba(142, 247, 217, 0.24));
  opacity: 0.95;
  pointer-events: none;
  user-select: none;
  animation: codex-symbol-fade-cycle 4.8s ease-in-out infinite;
  transition: filter 220ms ease, transform 220ms ease;
}

.codex-profile-symbol-right {
  width: calc(var(--codex-symbol-size) * 1.3);
}

.codex-profile-word {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  text-align: center;
  color: var(--codex-console-fg);
  font-family: inherit;
  font-size: clamp(0.93rem, 1.2vw, 1.23rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-shadow: var(--codex-text-shadow-soft);
  animation: codex-word-fade-cycle 4.8s ease-in-out infinite;
  transition: text-shadow 220ms ease;
}

.codex-profile-side-button:hover .codex-profile-symbol,
.codex-profile-side-button:focus-visible .codex-profile-symbol {
  transform: scale(1.04);
  filter:
    brightness(0)
    saturate(100%)
    invert(87%)
    sepia(46%)
    saturate(565%)
    hue-rotate(96deg)
    brightness(106%)
    contrast(100%)
    drop-shadow(0 0 14px rgba(185, 255, 233, 0.48))
    drop-shadow(0 0 28px rgba(142, 247, 217, 0.32));
}

.codex-profile-side-button:hover .codex-profile-word,
.codex-profile-side-button:focus-visible .codex-profile-word {
  text-shadow: var(--codex-text-shadow-soft);
}

@keyframes codex-symbol-fade-cycle {
  0% {
    opacity: 0.95;
  }
  20%, 55% {
    opacity: 0;
  }
  75% {
    opacity: 0.95;
  }
  100% {
    opacity: 0.95;
  }
}

@keyframes codex-word-fade-cycle {
  0% {
    opacity: 0;
  }
  20%, 55% {
    opacity: 0.95;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes codex-side-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes codex-side-persist {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}

.codex-profile-title {
  margin: 0 0 0.38rem;
  color: var(--codex-text-label-color);
  text-align: center;
  font-weight: 600;
  font-family: var(--codex-text-font-family);
  text-shadow: var(--codex-text-shadow-label);
}

.codex-profile-committed > .codex-profile-title {
  position: absolute;
  top: 0.1rem;
  left: 0;
  right: 0;
  margin: 0;
  pointer-events: none;
  z-index: 1;
}

.codex-profile-committed.is-continue-avatars .codex-profile-avatar {
  --codex-avatar-size: clamp(114px, 11.7vw, 172px);
}

.codex-profile-line {
  margin: 0.12rem 0;
  color: var(--codex-text-value-color);
  white-space: pre-line;
  font-family: var(--codex-text-font-family);
  text-shadow: var(--codex-text-shadow-value);
}

.codex-profile-line strong,
.codex-sagas-empty strong,
.codex-chapter-page-text strong,
.codex-sagas-reader strong {
  color: var(--codex-text-label-color);
  font-family: var(--codex-text-font-family);
  font-weight: 600;
  text-shadow: var(--codex-text-shadow-label);
}

.codex-profile-line.codex-sagas-empty strong {
  color: var(--codex-text-label-color);
  font-weight: 600;
}

.codex-profile-label-plain {
  color: var(--codex-text-label-color);
  font-family: var(--codex-text-font-family);
  font-weight: 400;
  text-shadow: var(--codex-text-shadow-label);
}

.codex-saga-sheet-avatars {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 7cm;
  margin-top: 0.5cm;
  margin-bottom: 0.65rem;
}

.codex-saga-sheet-avatar-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.24rem;
  max-width: 46%;
}

.codex-saga-sheet-avatar-label {
  margin: 0;
  text-align: center;
  font-size: 0.9em;
  color: var(--codex-console-fg);
  font-family: var(--codex-text-font-family);
  text-shadow: var(--codex-text-shadow-soft);
}

.codex-profile-selection-continue-visual .codex-profile-dual-avatars {
  gap: 7cm;
  width: max-content;
  max-width: 100%;
}

.codex-profile-selection-continue-visual .codex-profile-dual-avatars .codex-saga-sheet-avatar-slot {
  max-width: none;
}

.codex-profile-single-avatar-anchor {
  gap: 0;
}

.codex-profile-single-avatar-anchor .codex-saga-sheet-avatar-slot {
  max-width: none;
}

.codex-profile-single-avatar-new-character .codex-profile-avatar {
  transform: translateY(-0.5cm);
}

.codex-partida-detail {
  position: relative;
}

.codex-partida-title {
  position: absolute;
  top: 0.1rem;
  left: 0;
  right: 0;
  margin: 0;
  pointer-events: none;
  z-index: 1;
}

.codex-partida-subtree {
  margin-top: 0;
  padding-left: 0;
}

.codex-partida-subtree .codex-sagas-empty {
  margin: 0.12rem 0;
}

.codex-profile-subline {
  margin-left: 0.8rem;
}

.codex-profile-continue {
  border: 1px solid rgba(185, 255, 233, 0.55);
  color: var(--codex-console-fg);
  background: rgba(34, 94, 106, 0.32);
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: inherit;
  text-shadow: var(--codex-text-shadow-soft);
  cursor: pointer;
}

.codex-profile-continue:hover {
  background: rgba(57, 134, 151, 0.45);
}

.codex-floating-control {
  --codex-neon-orange-rgb: 255, 117, 26;
  position: absolute;
  top: calc(50% - (clamp(48px, 4.8vw, 72px) / 2));
  pointer-events: auto;
  display: none;
  z-index: 7;
  width: clamp(48px, 4.8vw, 72px);
  aspect-ratio: 1 / 1;
  border-radius: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
  overflow: visible;
  transform: translateY(0);
  transition: transform 220ms ease, filter 220ms ease;
  animation: codex-floating-orb-drift 3.6s ease-in-out infinite;
}

.codex-floating-control.is-visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.codex-floating-control:hover {
  transform: translateY(-2px) scale(1.045);
  filter: none;
}

.codex-floating-control.codex-panel-back:hover,
.codex-floating-control.codex-profile-continue:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.codex-floating-control:active {
  transform: translateY(0) scale(0.98);
}

.codex-floating-control:focus,
.codex-floating-control:focus-visible {
  outline: none;
  box-shadow: none;
}

.codex-holo-control:focus,
.codex-holo-control:focus-visible {
  outline: none;
  box-shadow: none;
}

.codex-floating-control[data-holo-label]::after {
  content: attr(data-holo-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translate(-50%, 4px);
  padding: 0.18rem 0.42rem;
  border-radius: 6px;
  border: 1px solid rgba(118, 215, 255, 0.5);
  background:
    linear-gradient(180deg, rgba(88, 188, 255, 0.22), rgba(31, 91, 166, 0.17)),
    repeating-linear-gradient(
      180deg,
      rgba(136, 233, 255, 0.05) 0 2px,
      rgba(9, 41, 81, 0.03) 2px 6px
    );
  color: rgba(220, 247, 255, 0.96);
  font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", "Consolas", monospace;
  font-size: clamp(0.84rem, 1.05vw, 1.02rem);
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(80, 202, 255, 0.35);
  box-shadow:
    inset 0 0 18px rgba(130, 222, 255, 0.18),
    0 0 16px rgba(41, 137, 255, 0.24);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  transition:
    opacity 150ms ease,
    transform 150ms ease;
  transition-delay: 0s;
}

.codex-holo-control[data-holo-label]::after {
  content: attr(data-holo-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translate(-50%, 4px);
  padding: 0.18rem 0.42rem;
  border-radius: 6px;
  border: 1px solid rgba(118, 215, 255, 0.5);
  background:
    linear-gradient(180deg, rgba(88, 188, 255, 0.22), rgba(31, 91, 166, 0.17)),
    repeating-linear-gradient(
      180deg,
      rgba(136, 233, 255, 0.05) 0 2px,
      rgba(9, 41, 81, 0.03) 2px 6px
    );
  color: rgba(220, 247, 255, 0.96);
  font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", "Consolas", monospace;
  font-size: clamp(0.84rem, 1.05vw, 1.02rem);
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(80, 202, 255, 0.35);
  box-shadow:
    inset 0 0 18px rgba(130, 222, 255, 0.18),
    0 0 16px rgba(41, 137, 255, 0.24);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  transition:
    opacity 150ms ease,
    transform 150ms ease;
  transition-delay: 0s;
}

.codex-floating-control[data-holo-label]:hover::after,
.codex-floating-control[data-holo-label]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.codex-holo-control[data-holo-label]:hover::after,
.codex-holo-control[data-holo-label]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.codex-floating-back {
  left: calc(50% + min(40vw, 640px) - (clamp(48px, 4.8vw, 72px) / 2) + 12px);
}

.codex-floating-continue {
  right: calc(50% + min(40vw, 640px) - (clamp(48px, 4.8vw, 72px) / 2) + 12px);
  animation-delay: 0.9s;
}

.codex-floating-glyph {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
  user-select: none;
}

.codex-floating-glyph-art {
  display: block;
  position: relative;
  overflow: visible;
  width: 210%;
  height: 210%;
  background-color: rgba(var(--codex-neon-orange-rgb), 0.95);
  opacity: 0.5;
  transition: filter 180ms ease, opacity 180ms ease;
  animation: codex-floating-glyph-holo 2.4s ease-in-out infinite;
}

.codex-glyph-symbol {
  display: block;
  position: relative;
  overflow: visible;
  -webkit-mask-image: var(--glyph-image);
  mask-image: var(--glyph-image);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  filter:
    saturate(1.18)
    brightness(1.14)
    contrast(1.1)
    drop-shadow(0 0 10px rgba(var(--codex-neon-orange-rgb, 255, 117, 26), 0.62));
  mix-blend-mode: screen;
}

.codex-floating-control:hover .codex-floating-glyph-art {
  animation: none;
  filter:
    saturate(1.45)
    brightness(1.34)
    contrast(1.18)
    drop-shadow(0 0 18px rgba(255, 35, 35, 0.95))
    drop-shadow(0 0 30px rgba(255, 10, 10, 0.68));
  opacity: 0.78;
}

.codex-holo-control:hover .codex-floating-glyph-art {
  animation: none;
  filter:
    saturate(1.45)
    brightness(1.34)
    contrast(1.18)
    drop-shadow(0 0 18px rgba(255, 35, 35, 0.95))
    drop-shadow(0 0 30px rgba(255, 10, 10, 0.68));
  opacity: 0.78;
}

.codex-holo.is-active:not([data-panel-mode="terminal"]) .codex-holo-control:hover .codex-holo-decor-glyph {
  animation: none !important;
  filter:
    saturate(1.45)
    brightness(1.34)
    contrast(1.18)
    drop-shadow(0 0 18px rgba(255, 35, 35, 0.95))
    drop-shadow(0 0 30px rgba(255, 10, 10, 0.68)) !important;
  opacity: 0.78 !important;
}

.codex-glyph-symbol::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 190, 110, 0.16) 0px,
      rgba(255, 190, 110, 0.16) 1px,
      rgba(255, 190, 110, 0) 2px,
      rgba(255, 190, 110, 0) 4px
    );
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: var(--glyph-image);
  mask-image: var(--glyph-image);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  animation: codex-floating-glyph-scan 1.7s linear infinite;
}

.codex-glyph-alpha-image {
  --glyph-image: url("images/Base/Alpha.png");
}

.codex-glyph-omega-image {
  --glyph-image: url("images/Base/Omega.png");
}

.codex-glyph-alphaomega-image {
  --glyph-image: url("images/Base/Alphaomega-by-Frater5.png");
}

.codex-floating-glyph-alpha {
  --glyph-image: url("images/Base/Alpha.png");
}

.codex-floating-glyph-omega {
  --glyph-image: url("images/Base/Omega.png");
}

.codex-floating-glyph-alphaomega {
  --glyph-image: url("images/Base/Alphaomega-by-Frater5.png");
}

@keyframes codex-floating-orb-drift {
  0%, 100% {
    transform: translateY(2px) scale(0.98);
  }
  50% {
    transform: translateY(-8px) scale(1.02);
  }
}

@keyframes codex-conjuros-drift {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes codex-floating-orb-ring {
  0%, 100% {
    opacity: 0.66;
    transform: scale(1);
  }
  50% {
    opacity: 0.92;
    transform: scale(1.04);
  }
}

@keyframes codex-floating-glyph-holo {
  0%, 100% {
    opacity: 0.5;
    filter:
      saturate(1.16)
      brightness(1.14)
      contrast(1.12)
      drop-shadow(0 0 10px rgba(var(--codex-neon-orange-rgb), 0.58));
  }
  50% {
    opacity: 0.5;
    filter:
      saturate(1.24)
      brightness(1.2)
      contrast(1.14)
      drop-shadow(0 0 12px rgba(var(--codex-neon-orange-rgb), 0.72));
  }
}

@keyframes codex-floating-glyph-scan {
  from {
    transform: translateY(-10%);
  }
  to {
    transform: translateY(10%);
  }
}

@keyframes codex-glyph-decor-pulse {
  0%, 100% {
    opacity: 0.14;
    transform: scale(1);
  }
  50% {
    opacity: 0.18;
    transform: scale(1.02);
  }
}

@keyframes codex-glyph-decor-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.14;
  }
}

@keyframes codex-page-transition-left-stage2 {
  from {
    left: calc(50% - (min(40vw, 640px) / 2));
    width: clamp(220px, 24vw, 360px);
  }
  to {
    left: calc(50% - min(40vw, 640px) - 12px);
    width: clamp(48px, 4.8vw, 72px);
  }
}

@keyframes codex-page-transition-right-stage2 {
  from {
    left: calc(50% + (min(40vw, 640px) / 2));
    width: clamp(220px, 24vw, 360px);
  }
  to {
    left: calc(50% + min(40vw, 640px) + 12px);
    width: clamp(48px, 4.8vw, 72px);
  }
}

@keyframes codex-page-transition-glyph-stage1 {
  from {
    width: 100%;
    height: 100%;
    opacity: 0.14;
    transform: translateY(0) scale(1);
    background-color: rgba(102, 207, 255, 0.92);
    filter:
      saturate(1.08)
      brightness(1.02)
      drop-shadow(0 0 14px rgba(102, 207, 255, 0.42));
  }
  to {
    width: 100%;
    height: 100%;
    opacity: 0.5;
    transform: translateY(-10%) scale(1.2);
    background-color: rgba(255, 117, 26, 0.95);
    filter:
      saturate(1.18)
      brightness(1.14)
      contrast(1.1)
      drop-shadow(0 0 10px rgba(255, 117, 26, 0.62));
  }
}

@keyframes codex-page-transition-glyph-stage2 {
  from {
    width: 100%;
    height: 100%;
    opacity: 0.5;
    transform: translateY(-10%) scale(1.2);
    background-color: rgba(255, 117, 26, 0.95);
    filter:
      saturate(1.18)
      brightness(1.14)
      contrast(1.1)
      drop-shadow(0 0 10px rgba(255, 117, 26, 0.62));
  }
  to {
    width: 210%;
    height: 210%;
    opacity: 0.5;
    transform: translateY(0) scale(1);
    background-color: rgba(255, 117, 26, 0.95);
    filter:
      saturate(1.18)
      brightness(1.14)
      contrast(1.1)
      drop-shadow(0 0 10px rgba(255, 117, 26, 0.62));
  }
}

@keyframes codex-page-transition-left-stage2-reverse {
  from {
    left: calc(50% - min(40vw, 640px) - 12px);
    width: clamp(48px, 4.8vw, 72px);
  }
  to {
    left: calc(50% - (min(40vw, 640px) / 2));
    width: clamp(220px, 24vw, 360px);
  }
}

@keyframes codex-page-transition-right-stage2-reverse {
  from {
    left: calc(50% + min(40vw, 640px) + 12px);
    width: clamp(48px, 4.8vw, 72px);
  }
  to {
    left: calc(50% + (min(40vw, 640px) / 2));
    width: clamp(220px, 24vw, 360px);
  }
}

@keyframes codex-page-transition-glyph-stage2-reverse {
  from {
    width: 210%;
    height: 210%;
    opacity: 0.5;
    transform: translateY(0) scale(1);
    background-color: rgba(255, 117, 26, 0.95);
    filter:
      saturate(1.18)
      brightness(1.14)
      contrast(1.1)
      drop-shadow(0 0 10px rgba(255, 117, 26, 0.62));
  }
  to {
    width: 100%;
    height: 100%;
    opacity: 0.5;
    transform: translateY(-10%) scale(1.2);
    background-color: rgba(255, 117, 26, 0.95);
    filter:
      saturate(1.18)
      brightness(1.14)
      contrast(1.1)
      drop-shadow(0 0 10px rgba(255, 117, 26, 0.62));
  }
}

@keyframes codex-page-transition-glyph-stage1-reverse {
  from {
    width: 100%;
    height: 100%;
    opacity: 0.5;
    transform: translateY(-10%) scale(1.2);
    background-color: rgba(255, 117, 26, 0.95);
    filter:
      saturate(1.18)
      brightness(1.14)
      contrast(1.1)
      drop-shadow(0 0 10px rgba(255, 117, 26, 0.62));
  }
  to {
    width: 100%;
    height: 100%;
    opacity: 0.14;
    transform: translateY(0) scale(1);
    background-color: rgba(102, 207, 255, 0.92);
    filter:
      saturate(1.08)
      brightness(1.02)
      drop-shadow(0 0 14px rgba(102, 207, 255, 0.42));
  }
}

@keyframes codex-holo-control-drift {
  0%, 100% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-50%, calc(-50% - 10px));
  }
}

@keyframes codex-archive-progress-scan {
  0% {
    transform: translateX(-8%);
    opacity: 0.32;
  }
  50% {
    transform: translateX(8%);
    opacity: 0.62;
  }
  100% {
    transform: translateX(-8%);
    opacity: 0.32;
  }
}

@keyframes codex-archive-progress-flicker {
  0%, 100% {
    opacity: 0.88;
  }
  8% {
    opacity: 0.74;
  }
  11% {
    opacity: 0.91;
  }
  33% {
    opacity: 0.83;
  }
  57% {
    opacity: 0.93;
  }
  61% {
    opacity: 0.78;
  }
  79% {
    opacity: 0.9;
  }
}

@keyframes codex-profile-logo-pulse {
  0%, 100% {
    opacity: 0.14;
    filter:
      brightness(0)
      saturate(100%)
      invert(87%)
      sepia(46%)
      saturate(565%)
      hue-rotate(96deg)
      brightness(102%)
      contrast(96%)
      drop-shadow(0 0 6px rgba(185, 255, 233, 0.14));
  }
  50% {
    opacity: 0.44;
    filter:
      brightness(0)
      saturate(100%)
      invert(87%)
      sepia(46%)
      saturate(565%)
      hue-rotate(96deg)
      brightness(108%)
      contrast(100%)
      drop-shadow(0 0 14px rgba(185, 255, 233, 0.28));
  }
}

.codex-holo.is-active .codex-holo-beam {
  animation: codex-beam-rise 2000ms cubic-bezier(0.2, 0.84, 0.22, 1) forwards;
}

.codex-holo.is-active .codex-holo-panel-left,
.codex-holo.is-active .codex-holo-panel-right {
  animation-duration: 2000ms;
  animation-timing-function: linear;
  animation-delay: 2000ms;
  animation-fill-mode: forwards;
}

.codex-holo.is-active .codex-holo-panel-left {
  animation-name: codex-panel-print-left;
}

.codex-holo.is-active .codex-holo-panel-right {
  animation-name: codex-panel-print-right;
}

.codex-holo.is-closing .codex-holo-control,
.codex-holo.is-closing .codex-holo-decor {
  pointer-events: none !important;
}

.codex-holo.is-closing .codex-holo-control {
  opacity: 0 !important;
  animation: none !important;
}

.codex-holo.is-closing .codex-holo-control .codex-holo-decor-glyph {
  opacity: 0 !important;
  animation: none !important;
}

.codex-holo.is-closing .codex-holo-panel-left {
  animation: codex-panel-print-left-reverse 2000ms linear forwards !important;
}

.codex-holo.is-closing .codex-holo-panel-right {
  animation: codex-panel-print-right-reverse 2000ms linear forwards !important;
}

.codex-holo.is-closing .codex-holo-beam {
  animation: codex-beam-rise-reverse 2000ms cubic-bezier(0.2, 0.84, 0.22, 1) 2000ms forwards !important;
}

@keyframes codex-beam-rise {
  from {
    opacity: 0.2;
    transform: translate(-50%, -50%) scaleY(0);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scaleY(1);
  }
}

@keyframes codex-panel-print-left {
  0% {
    clip-path: inset(0 0 0 100%);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes codex-panel-print-right {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes codex-beam-rise-reverse {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scaleY(1);
  }
  to {
    opacity: 0.2;
    transform: translate(-50%, -50%) scaleY(0);
  }
}

@keyframes codex-panel-print-left-reverse {
  0% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 0 0 100%);
  }
}

@keyframes codex-panel-print-right-reverse {
  0% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 100% 0 0);
  }
}

@keyframes codex-console-caret-blink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

body.game-screen .codex-holo {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.game-screen .codex-holo.is-active {
  opacity: 1 !important;
  visibility: visible !important;
}

body.is-partida-cerrada.game-screen .codex-holo.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.api-provider-toggle {
  display: flex;
  gap: 0.32rem;
}

.api-narrator-toggle {
  display: flex;
  gap: 0.32rem;
}

.api-remember-row {
  display: flex;
  align-items: center;
  min-height: 1.2rem;
}

.api-remember {
  display: none;
  align-items: center;
  gap: 0.35rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

.api-remember.is-active {
  display: flex;
}

.api-remember input[type="checkbox"] {
  width: 0.85rem;
  height: 0.85rem;
  accent-color: var(--fg-strong);
  margin: 0;
}

.provider-button {
  flex: 1;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: var(--fg-soft);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 0.2rem 0.32rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, text-shadow 200ms ease;
}

.narrator-button {
  flex: 1;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: var(--fg-soft);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 0.2rem 0.32rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, text-shadow 200ms ease, opacity 200ms ease;
}

.narrator-button.is-active {
  color: var(--fg-strong);
  border-color: var(--line-strong);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}

.narrator-button:disabled,
.narrator-button.is-disabled {
  opacity: 0.45;
  cursor: default;
}

.provider-button.is-active {
  color: var(--fg-strong);
  border-color: var(--line-strong);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}

.api-key-action {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: var(--fg-soft);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 0.28rem 0.4rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, text-shadow 200ms ease, background-color 200ms ease;
}

.api-key-action:hover,
.api-key-action:focus-visible {
  color: var(--fg-strong);
  border-color: var(--line-strong);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
}

.api-key-input {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg-strong);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.85rem;
  line-height: 1;
  text-align: left;
  outline: none;
  transition: color 200ms ease;
  display: none;
}

.api-key-input.is-active {
  display: block;
}

.api-key-input:focus {
  color: var(--fg-strong);
}

.api-key-row.is-flashing .api-key-input {
  animation: api-key-text-flash 1.2s ease;
}

@keyframes api-key-text-flash {
  0% {
    text-shadow: none;
  }
  35% {
    text-shadow:
      0 0 22px rgba(255, 255, 255, 1),
      0 0 56px rgba(255, 255, 255, 0.9),
      0 0 110px rgba(255, 255, 255, 0.7),
      0 0 180px rgba(255, 255, 255, 0.55);
  }
  70% {
    text-shadow:
      0 0 16px rgba(255, 255, 255, 0.85),
      0 0 40px rgba(255, 255, 255, 0.55),
      0 0 80px rgba(255, 255, 255, 0.35);
  }
  100% {
    text-shadow: none;
  }
}

.api-key-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--line-strong);
  opacity: 0;
  filter: blur(14px);
  pointer-events: none;
}

.api-key-row.is-flashing::after {
  animation: api-key-line-flash 1.2s ease;
}

@keyframes api-key-line-flash {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}

.title::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 108%;
  height: 40%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(210, 220, 230, 0.26) 0%,
    rgba(210, 220, 230, 0.12) 45%,
    rgba(210, 220, 230, 0) 75%
  );
  filter: blur(8px);
  z-index: -1;
}

body[data-era="past"] .title::after {
  opacity: 0;
}

body[data-era="future"] .title::after {
  opacity: 0;
}

.mute-toggle {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  right: auto;
  width: auto;
  height: auto;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  font-size: 1.1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: filter 200ms ease, opacity 200ms ease;
  opacity: 0;
  animation: ui-reveal var(--intro-fade-duration) linear forwards;
  animation-delay: 0s;
}

.mute-toggle.is-muted {
  filter: brightness(0.8);
}

.fullscreen-toggle {
  position: absolute;
  top: 1.5rem;
  left: calc(12.4rem + 1.8cm);
  right: auto;
  width: auto;
  height: auto;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: filter 200ms ease, opacity 200ms ease;
  opacity: 0;
  animation: ui-reveal var(--intro-fade-duration) linear forwards;
  animation-delay: 0s;
}

.fullscreen-toggle.is-active {
  filter: brightness(1.12);
}

.master-volume-control {
  position: absolute;
  top: 1.45rem;
  left: 3.25rem;
  right: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--fg);
  opacity: 0;
  animation: ui-reveal var(--intro-fade-duration) linear forwards;
  animation-delay: 0s;
  z-index: 35;
}

.master-volume-label {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.78;
  user-select: none;
}

.master-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: clamp(92px, 12vw, 145px);
  height: 14px;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

.master-volume-slider::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.44);
}

.master-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.98);
  margin-top: -3.5px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.65);
}

.master-volume-slider::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.44);
}

.master-volume-slider::-moz-range-progress {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}

.master-volume-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.65);
}

.master-volume-value {
  min-width: 2.9em;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  opacity: 0.86;
  text-align: right;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.hero-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(var(--hero-offset-x, 0px), var(--hero-offset-y, 0px));
  width: var(--hero-size);
  height: var(--hero-size);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  perspective: 4000px;
  opacity: 1;
  animation: none;
  z-index: 20;
  pointer-events: none;
  visibility: visible;
}

body.era-selected .hero-wrap {
  animation: hero-reveal 900ms ease-out forwards;
  animation-delay: 0s;
  opacity: 1;
}

.hero-wrap.hero-following {
  transition: none;
}

.hero-wrap.hero-returning {
  transition: transform 10s linear;
}

.hero-wrap.hero-returning .hero-frame {
  transform: translate(0%, 0%) scale(0.15);
  opacity: 0;
  transition:
    transform 5s linear 5s,
    opacity 5s linear 5s;
}

.hero-wrap.hero-magnet {
  transition: transform 5s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.hero.nudge-left {
  animation: dracma-nudge-left 0.44s ease-out 1 forwards;
}

.hero.nudge-right {
  animation: dracma-nudge-right 0.44s ease-out 1 forwards;
}

.hero.nudge-up {
  animation: dracma-nudge-up 0.44s ease-out 1 forwards;
}

.hero.nudge-down {
  animation: dracma-nudge-down 0.44s ease-out 1 forwards;
}

.hero.nudge-up-left {
  animation: dracma-nudge-up-left 0.44s ease-out 1 forwards;
}

.hero.nudge-up-right {
  animation: dracma-nudge-up-right 0.44s ease-out 1 forwards;
}

.hero.nudge-down-left {
  animation: dracma-nudge-down-left 0.44s ease-out 1 forwards;
}

.hero.nudge-down-right {
  animation: dracma-nudge-down-right 0.44s ease-out 1 forwards;
}

.hero.return-left {
  animation: dracma-return-left 0.3s ease-in 1;
}

.hero.return-right {
  animation: dracma-return-right 0.3s ease-in 1;
}

.hero.return-up {
  animation: dracma-return-up 0.3s ease-in 1;
}

.hero.return-down {
  animation: dracma-return-down 0.3s ease-in 1;
}

.hero.return-up-left {
  animation: dracma-return-up-left 0.3s ease-in 1;
}

.hero.return-up-right {
  animation: dracma-return-up-right 0.3s ease-in 1;
}

.hero.return-down-left {
  animation: dracma-return-down-left 0.3s ease-in 1;
}

.hero.return-down-right {
  animation: dracma-return-down-right 0.3s ease-in 1;
}

body.era-selected .hero-wrap.is-clickable {
  pointer-events: auto;
}

.hero-hit {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  z-index: 3;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.hero-wrap:not(.is-clickable) .hero-hit {
  pointer-events: none;
  cursor: default;
}

.hero-frame {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
  transform: translate(0%, 0%) scale(1);
  transform-origin: center;
  background: none;
}

.hero-frame.has-coin {
  background: none;
}

.hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  pointer-events: none;
  opacity: 1;
  transform: scale(var(--hero-poster-scale));
  transform-origin: center;
  transition: opacity 300ms ease;
}

.hero-frame.has-coin .hero-poster {
  opacity: 0;
}


.hero {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
  object-fit: contain;
  object-position: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform-origin: center;
  will-change: transform;
}

.hero.spin-left {
  animation: spin-left 2.4s linear infinite;
}

.hero.spin-right {
  animation: spin-right 2.4s linear infinite;
}

.hero.spin-up {
  animation: spin-up 2.4s linear infinite;
}

.hero-wrap::after,
.hero-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: normal;
}

.hero-wrap::after {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.0),
    0 0 18px rgba(255, 255, 255, 0.0);
}

.hero-wrap::before {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.0),
    0 0 24px rgba(255, 255, 255, 0.0);
}

body.era-selected .hero-wrap.ripple-on::after {
  animation: ripple 3.2s ease-out infinite;
  animation-delay: 9s;
}

body.era-selected .hero-wrap.ripple-on::before {
  animation: ripple 3.2s ease-out infinite;
  animation-delay: 9.9s;
}

body.era-selected .hero-wrap.ripple-burst::after {
  animation: ripple-burst 0.9s ease-out 1;
}

body.era-selected .hero-wrap.ripple-burst::before {
  animation: ripple-burst 0.9s ease-out 1;
  animation-delay: 0.12s;
}

.name-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-gap);
  opacity: 1;
  animation: none;
  position: absolute;
  left: 50%;
  top: 50%;
  top: calc(50% + var(--sym-offset) - var(--line-anchor));
  transform: translate(-50%, 0);
  z-index: 3;
}

.name-line {
  width: min(80vw, 520px);
  padding-top: var(--line-text-gap);
  border-bottom: 2px solid var(--line-strong);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation:
    ui-reveal var(--intro-fade-duration) linear forwards,
    line-pulse 2.5s ease-in-out infinite;
  animation-delay: 0s, var(--intro-fade-duration);
}

.name-halo {
  position: absolute;
  left: 50%;
  top: 0;
  width: 10%;
  height: 10%;
  transform: translate(-50%, calc(-30% + 6px));
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.34) 0%,
    rgba(255, 255, 255, 0.18) 42%,
    rgba(255, 255, 255, 0) 78%
  );
  filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.portal-trail {
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translate(-50%, 50%);
  width: var(--trail-size, 600px);
  height: var(--trail-size, 600px);
  opacity: 0;
  pointer-events: none;
  z-index: 880;
  overflow: visible;
}

.portal-trail-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  mix-blend-mode: normal;
  stroke-dasharray: var(--trail-length, 0);
  stroke-dashoffset: var(--trail-length, 0);
}

body[data-era="future"] .name-line.portal-moving-star {
  --trail-glow-opacity: 0.22;
  --trail-haze-opacity: 0.08;
  --trail-glow-blur: 1px;
  --trail-haze-blur: 6px;
  --trail-glow-shadow: 0 0 18px var(--halo-glow);
  --trail-haze-shadow: 0 0 24px var(--halo-glow);
}

body[data-era="present"] .name-line.portal-moving-star {
  --trail-glow-opacity: 0.2;
  --trail-haze-opacity: 0.1;
  --trail-glow-blur: 1px;
  --trail-haze-blur: 6px;
  --trail-glow-shadow: 0 0 16px var(--halo-glow);
  --trail-haze-shadow: 0 0 20px var(--halo-glow);
}

body[data-era="past"] .name-line.portal-moving-star {
  --trail-glow-opacity: 0.2;
  --trail-haze-opacity: 0.1;
  --trail-glow-blur: 1px;
  --trail-haze-blur: 6px;
  --trail-glow-shadow: 0 0 16px var(--halo-glow);
  --trail-haze-shadow: 0 0 20px var(--halo-glow);
}

body[data-era="future"] .name-line:not(.portal-moving-star) .portal-trail-glow {
  filter: blur(var(--trail-glow-blur, 3px))
    drop-shadow(0 0 4px rgba(0, 240, 255, 0.7))
    drop-shadow(0 0 12px rgba(0, 240, 255, 0.8))
    drop-shadow(0 0 24px rgba(0, 240, 255, 0.65))
    drop-shadow(0 0 40px rgba(0, 240, 255, 0.5))
    drop-shadow(0 0 60px rgba(0, 240, 255, 0.35));
}

body[data-era="future"] .name-line:not(.portal-moving-star) .portal-trail-haze {
  filter: blur(var(--trail-haze-blur, 22px))
    drop-shadow(0 0 24px rgba(0, 240, 255, 0.35))
    drop-shadow(0 0 60px rgba(0, 240, 255, 0.2));
}

.portal-trail-glow {
  stroke-width: 9px;
  opacity: var(--trail-glow-opacity, 0.32);
  filter: blur(1.2px) blur(var(--trail-glow-blur, 3px))
    drop-shadow(0 0 14px var(--halo-glow))
    drop-shadow(var(--trail-glow-shadow, 0 0 34px var(--halo-glow)));
}

.portal-trail-haze {
  stroke-width: 32px;
  opacity: var(--trail-haze-opacity, 0.44);
  filter: blur(6px) blur(var(--trail-haze-blur, 22px))
    drop-shadow(var(--trail-haze-shadow, 0 0 30px var(--halo-glow)));
}

.portal-trail-core {
  stroke-width: var(--trail-core-width, 0.9px);
  opacity: var(--trail-core-opacity, 0);
  filter: blur(var(--trail-core-blur, 2px)) drop-shadow(0 0 10px var(--halo-bright));
}

.portal-trail .portal-stop {
  stop-opacity: 0.9;
}

.portal-trail .portal-stop-a {
  stop-color: var(--halo-line);
}

.portal-trail .portal-stop-b {
  stop-color: var(--halo-glow);
}

.portal-trail .portal-stop-c {
  stop-color: var(--halo-bright);
  stop-opacity: 0.95;
}

.portal-trail .portal-stop-d {
  stop-color: var(--halo-line);
  stop-opacity: 0.85;
}

.rune-layer {
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 920;
}

.rune {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-ui);
  font-size: calc(clamp(3.3rem, 6.6vw, 4.8rem) * var(--rune-size-scale, 1));
  line-height: 1;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.4px #ff1a1a;
  text-shadow:
    0 0 8px rgba(255, 0, 0, 0.82),
    0 0 20px rgba(255, 36, 36, 0.78),
    0 0 34px rgba(255, 110, 110, 0.62);
  opacity: 0;
  transform: translate(-50%, -50%) translate(var(--rune-x, 0px), var(--rune-y, 0px));
  filter: blur(0.1px);
  mix-blend-mode: screen;
}

body[data-era="past"] .rune {
  background-image:
    linear-gradient(
      100deg,
      #7b581f 0%,
      #c99533 22%,
      #f0c866 45%,
      #b27f2a 62%,
      #dca944 78%,
      #7b581f 100%
    ),
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0.25) 45%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0.25) 55%,
      rgba(255, 255, 255, 0) 60%
    );
  background-size: 100% 100%, 420% 100%;
  background-position: 0 0, -320% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1.4px rgba(88, 56, 18, 0.55);
  text-shadow:
    0 1px 0 rgba(255, 236, 158, 0.72),
    0 2px 0 rgba(223, 171, 69, 0.62),
    0 4px 8px rgba(88, 56, 18, 0.34),
    0 0 20px rgba(212, 175, 55, 0.38);
}

body[data-era="future"] .rune {
  -webkit-text-stroke: 1.4px rgba(255, 77, 0, 0.9);
  text-shadow:
    0 0 8px rgba(255, 77, 0, 0.7),
    0 0 18px rgba(255, 77, 0, 0.62),
    0 0 32px rgba(255, 77, 0, 0.5);
}

/* Use Codex hologram palette for 5-point star runes in every era. */
.name-line.portal-moving-star .rune,
.name-line.portal-star-hold .rune,
.name-line.portal-rune-burst .rune {
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(92, 158, 142, 0.96);
  text-shadow:
    0 0 6px rgba(84, 144, 130, 0.72),
    0 0 14px rgba(72, 132, 148, 0.62),
    0 0 26px rgba(72, 132, 148, 0.46);
}

.rune-1 {
  --rune-x: var(--portal-p1-x, 0px);
  --rune-y: var(--portal-p1-y, 0px);
}

.rune-2 {
  --rune-x: var(--portal-p2-x, 0px);
  --rune-y: var(--portal-p2-y, 0px);
  --rune-size-scale: 0.93;
}

.rune-3 {
  --rune-x: var(--portal-p3-x, 0px);
  --rune-y: var(--portal-p3-y, 0px);
  --rune-size-scale: 0.93;
}

.rune-4 {
  --rune-x: var(--portal-p4-x, 0px);
  --rune-y: var(--portal-p4-y, 0px);
}

.rune-5 {
  --rune-x: var(--portal-p5-x, 0px);
  --rune-y: var(--portal-p5-y, 0px);
  --rune-size-scale: 0.92;
}

.rune.is-active {
  animation: rune-bloom 1s ease forwards;
}

.name-line.portal-rune-burst .rune {
  animation: rune-bloom 1s ease forwards;
}

.name-line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--line-strong);
  transform-origin: center;
  transform: scaleX(1);
  opacity: 0;
}

.name-line::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 6px;
  height: 6px;
  transform: translate(-50%, 50%);
  background: var(--line-strong);
  border-radius: 999px;
  box-shadow: 0 0 8px var(--line-strong), 0 0 16px var(--line-strong);
  opacity: 0;
}

.name-input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--fg);
  font-size: clamp(2rem, 4.4vw, 3rem);
  letter-spacing: 0.02em;
  text-align: center;
  padding: 0;
  height: var(--name-input-height);
  line-height: 1;
  font-family: var(--font-ui);
  caret-color: transparent;
  position: relative;
  transform: translateY(calc(var(--name-rise) + var(--name-push) - 4px));
  z-index: 15;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
}

.name-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: -0.12rem;
  text-align: center;
  font-size: clamp(2rem, 4.4vw, 3rem);
  letter-spacing: 0.02em;
  color: var(--fg);
  opacity: 1;
  pointer-events: auto;
  cursor: text;
  padding: 0;
  height: var(--name-input-height);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 2.2s ease-out;
  z-index: 1;
  transform: translateY(calc(var(--name-rise) + var(--name-push) + clamp(0.6rem, 1.2vw, 0.9rem)));
  font-family: var(--font-ui);
  z-index: 15;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
}

.name-hint-text {
  display: inline-block;
  animation: pulse-text 6s ease-in-out infinite;
}

.time-legend {
  width: min(80vw, 520px);
  position: relative;
  margin-top: var(--stack-gap);
  height: 1.2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  font-size: clamp(0.85rem, 1.6vw, 1.1rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  --legend-contrast: 0;
  filter: contrast(var(--legend-contrast));
  opacity: var(--legend-contrast);
  transition: filter 6s ease, opacity 6s ease;
  pointer-events: none;
  z-index: 15;
}

/* During window resize we disable transform transitions so buttons don't visibly slide on X */
.time-legend.resizing .time-button {
  transition: none !important;
}

/* When we freeze buttons to absolute positioning during resize
   allow them to layer above the grid without affecting layout */
.time-legend.resizing-abs {
  /* ensure the container keeps its size while children are absolute */
  min-height: 2rem;
}

.time-legend.resizing-abs .time-button {
  pointer-events: none;
}

/* When a button has reached center and should be fixed on X axis */
.time-button.fixed-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(var(--y-shift, 0px)) scale(var(--scale, 1)) !important;
  z-index: 20;
  pointer-events: auto;
}

.name-line.has-value + .time-legend {
  pointer-events: auto;
}

.time-legend.has-selection {
  opacity: 1;
  filter: contrast(1);
}

.time-button {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--fg);
  font-size: clamp(0.95rem, 1.7vw, 1.2rem);
  line-height: 1;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: default;
  transition: filter 200ms ease, color 2s ease, opacity 300ms ease;
  transition-delay: 0ms;
  transform: translate(calc(var(--shift, 0px) + var(--shift-offset, 0px)), var(--y-shift, 0px)) scale(var(--scale, 1));
  transform-origin: center center;
  z-index: 15;
  --epoch-hover-rgb: 245, 245, 245;
}

.time-button .epoch-rune {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: var(--font-rune-greek) !important;
  font-size: clamp(2.025rem, 4.05vw, 2.7rem);
  line-height: 1;
  opacity: 0;
  z-index: 1;
  text-transform: none;
  font-synthesis: none;
  transition: opacity 250ms ease, transform 250ms ease;
}

.time-button .epoch-symbol {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-transform: none;
  font-size: clamp(2.025rem, 4.05vw, 2.7rem);
  line-height: 1;
  opacity: 0;
  transition: opacity 250ms ease;
  letter-spacing: 0.04em;
  font-family: var(--font-rune-greek);
  font-synthesis: none;
}

.time-legend.era-unlocked .time-button .epoch-symbol {
  opacity: 0 !important;
}

.time-button .epoch-label {
  position: relative;
  z-index: 2;
  opacity: 1;
  transition: opacity 180ms ease;
  font-size: clamp(0.95rem, 1.7vw, 1.2rem);
}

.time-legend.era-unlocked .time-button .epoch-label {
  opacity: 0;
}

.time-button:disabled,
.time-button[aria-disabled="true"] {
  cursor: default;
  opacity: 0.85;
}

.time-button:not(:disabled):not([aria-disabled="true"]):hover,
.time-button:not(:disabled):not([aria-disabled="true"]):focus-visible {
  text-shadow:
    0 0 6px rgba(var(--epoch-hover-rgb), 0.55),
    0 0 14px rgba(var(--epoch-hover-rgb), 0.6),
    0 0 28px rgba(var(--epoch-hover-rgb), 0.45),
    0 0 46px rgba(var(--epoch-hover-rgb), 0.35);
  filter: drop-shadow(0 0 10px rgba(var(--epoch-hover-rgb), 0.45));
}

.time-legend:not(.era-unlocked) .time-button:not(:disabled):not([aria-disabled="true"]):hover .epoch-symbol,
.time-legend:not(.era-unlocked) .time-button:not(:disabled):not([aria-disabled="true"]):focus-visible .epoch-symbol,
.time-legend:not(.era-unlocked) .time-button.epoch-glow .epoch-symbol {
  opacity: 1;
}

.time-button:not(:disabled):not([aria-disabled="true"]):hover .epoch-symbol,
.time-button:not(:disabled):not([aria-disabled="true"]):focus-visible .epoch-symbol,
.time-legend .time-button.epoch-glow .epoch-symbol {
  opacity: 0;
}

.time-button::after {
  content: "";
  position: absolute;
  left: 25%;
  right: 25%;
  bottom: -0.45rem;
  height: 1px;
  background: var(--line-strong);
  opacity: 0;
  transition: opacity 200ms ease;
}

.time-button.is-active {
  color: var(--fg-strong);
  filter: none;
}

.time-button.is-active::after {
  opacity: 1;
}

.time-legend.has-selection .time-button::after {
  opacity: 0;
}

.time-legend.has-selection .time-button:not(.is-active) {
  opacity: 0;
  pointer-events: none;
}

.time-legend.has-selection .time-button.is-active {
  --scale: 1.1;
}

.time-legend.has-selection .time-button {
  transition-delay: 0ms;
  transition: filter 200ms ease, color 2s ease, opacity 300ms ease, transform 6000ms ease;
}

.time-legend.has-selection .time-button {
  color: transparent !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent;
}

.time-legend.has-selection .time-button:hover,
.time-legend.has-selection .time-button:focus-visible {
  color: transparent !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
  filter: none !important;
}

.time-legend.has-selection .time-button.epoch-glow {
  color: transparent !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
  filter: none !important;
}

.time-legend.era-unlocked:not(.has-selection) .time-button {
  color: transparent !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
  filter: none;
  transition: filter 200ms ease, color 2s ease, opacity 300ms ease;
}

.time-legend.era-unlocked .time-button {
  /* Expand hover area without shifting layout. */
  padding: 0.45em 0.9em;
  margin: -0.45em -0.9em;
  border-radius: 999px;
  width: clamp(4.8rem, 10.5vw, 6.6rem);
  min-height: clamp(2.1rem, 4.2vw, 2.9rem);
}

.time-legend.era-unlocked .time-button .epoch-label {
  display: none;
}

.time-legend.era-unlocked .time-button::after {
  opacity: 0;
  box-shadow: none;
}

.time-legend.era-unlocked .time-button .epoch-rune {
  position: absolute;
  inset: 0;
  --epoch-rune-shift-x: 0px;
  --epoch-rune-scale: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-rune-greek);
  font-size: clamp(2.025rem, 4.05vw, 2.7rem);
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: rgba(245, 245, 245, 0.55);
  text-shadow:
    0 0 10px rgba(245, 245, 245, 0.55),
    0 0 22px rgba(245, 245, 245, 0.45),
    0 0 36px rgba(245, 245, 245, 0.35);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: normal;
  opacity: 1;
}

.time-legend:not(.era-unlocked) .time-button .epoch-rune {
  opacity: 0;
}

.time-legend .time-button:not(:disabled):not([aria-disabled="true"]):hover,
.time-legend .time-button:not(:disabled):not([aria-disabled="true"]):focus-visible {
  color: rgba(var(--epoch-hover-rgb), 0.85) !important;
  text-shadow:
    0 0 6px rgba(var(--epoch-hover-rgb), 0.55),
    0 0 14px rgba(var(--epoch-hover-rgb), 0.6),
    0 0 28px rgba(var(--epoch-hover-rgb), 0.45),
    0 0 46px rgba(var(--epoch-hover-rgb), 0.35) !important;
  filter: drop-shadow(0 0 10px rgba(var(--epoch-hover-rgb), 0.45)) !important;
}


.time-legend .time-button.epoch-glow {
  color: rgba(var(--epoch-hover-rgb), 0.85) !important;
  text-shadow:
    0 0 6px rgba(var(--epoch-hover-rgb), 0.55),
    0 0 14px rgba(var(--epoch-hover-rgb), 0.6),
    0 0 28px rgba(var(--epoch-hover-rgb), 0.45),
    0 0 46px rgba(var(--epoch-hover-rgb), 0.35) !important;
  filter: drop-shadow(0 0 10px rgba(var(--epoch-hover-rgb), 0.45)) !important;
}

.time-legend.era-unlocked .time-button.epoch-glow .epoch-rune {
  opacity: 1;
  color: rgba(var(--epoch-hover-rgb), 0.85) !important;
  text-shadow:
    0 0 6px rgba(var(--epoch-hover-rgb), 0.55),
    0 0 14px rgba(var(--epoch-hover-rgb), 0.6),
    0 0 28px rgba(var(--epoch-hover-rgb), 0.45),
    0 0 46px rgba(var(--epoch-hover-rgb), 0.35) !important;
  filter: drop-shadow(0 0 10px rgba(var(--epoch-hover-rgb), 0.45)) !important;
  font-size: clamp(2.025rem, 4.05vw, 2.7rem);
}

.time-legend .time-button.epoch-glow .epoch-label {
  opacity: 0;
}

.time-legend.era-unlocked .time-button:not(:disabled):not([aria-disabled="true"]):hover .epoch-rune,
.time-legend.era-unlocked .time-button:not(:disabled):not([aria-disabled="true"]):focus-visible .epoch-rune {
  opacity: 1;
  color: rgba(var(--epoch-hover-rgb), 0.85) !important;
  text-shadow:
    0 0 6px rgba(var(--epoch-hover-rgb), 0.55),
    0 0 14px rgba(var(--epoch-hover-rgb), 0.6),
    0 0 28px rgba(var(--epoch-hover-rgb), 0.45),
    0 0 46px rgba(var(--epoch-hover-rgb), 0.35) !important;
  filter: drop-shadow(0 0 10px rgba(var(--epoch-hover-rgb), 0.45)) !important;
  font-size: clamp(2.025rem, 4.05vw, 2.7rem);
}

.time-legend .time-button:not(:disabled):not([aria-disabled="true"]):hover .epoch-label,
.time-legend .time-button:not(:disabled):not([aria-disabled="true"]):focus-visible .epoch-label {
  opacity: 0;
}

body.second-puzzle-anim .time-legend::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(190px, 38vw, 360px);
  height: clamp(120px, 24vw, 220px);
  transform: translate(-50%, -52%);
  clip-path: polygon(50% 6%, 6% 92%, 94% 92%);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.55),
    0 0 30px rgba(255, 255, 255, 0.35);
  pointer-events: none;
  z-index: -1;
  animation: second-puzzle-triangle-pulse 7.2s ease-out both;
}

body.second-puzzle-anim .time-button .epoch-label {
  opacity: 0;
}

body.second-puzzle-anim .time-button .epoch-rune {
  opacity: 0 !important;
  color: rgba(var(--epoch-hover-rgb), 0.92) !important;
  text-shadow:
    0 0 6px rgba(var(--epoch-hover-rgb), 0.7),
    0 0 16px rgba(var(--epoch-hover-rgb), 0.62),
    0 0 32px rgba(var(--epoch-hover-rgb), 0.5),
    0 0 52px rgba(var(--epoch-hover-rgb), 0.38) !important;
  filter: drop-shadow(0 0 12px rgba(var(--epoch-hover-rgb), 0.55)) !important;
}

.second-puzzle-rune-proxy {
  position: fixed;
  left: 0;
  top: 0;
  display: inline-block;
  line-height: 1;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  pointer-events: none;
  z-index: 27;
  will-change: left, top, transform, opacity;
  font-family: var(--font-rune-greek);
  font-synthesis: none;
  text-shadow:
    0 0 8px rgba(245, 245, 245, 0.5),
    0 0 18px rgba(245, 245, 245, 0.4),
    0 0 32px rgba(245, 245, 245, 0.3);
  filter: drop-shadow(0 0 10px rgba(245, 245, 245, 0.42));
}

.second-puzzle-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
}

.unlock-rune-swap-proxy {
  font-family: var(--font-rune-greek);
  font-synthesis: none;
  text-shadow:
    0 0 8px rgba(245, 245, 245, 0.5),
    0 0 18px rgba(245, 245, 245, 0.4),
    0 0 32px rgba(245, 245, 245, 0.3);
  filter: drop-shadow(0 0 10px rgba(245, 245, 245, 0.42));
}

.time-legend.era-unlocked:not(.has-selection) .time-button:hover,
.time-legend.era-unlocked:not(.has-selection) .time-button:focus-visible {
  color: transparent !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
  filter: none !important;
}

.time-legend.rune-activation-blocked .time-button {
  pointer-events: none;
}

.time-legend.unlock-rune-swap-active .time-button {
  pointer-events: none;
}

.time-legend.unlock-rune-swap-active .time-button .epoch-rune,
.time-legend.unlock-rune-swap-active .time-button .epoch-symbol {
  opacity: 0 !important;
}

.name-line.portal-star-hold .rune {
  opacity: 0.5;
}

.name-line.portal-rune-burst .rune {
  opacity: 0.5;
}

.time-legend.era-unlocked:not(.has-selection) .time-button .epoch-rune {
  animation: none;
}

.time-legend .time-button.time-future .epoch-rune {
  --epoch-rune-shift-x: 0px;
  --epoch-rune-scale: 1;
  font-family: var(--font-rune-greek);
  transform: translateX(var(--epoch-rune-shift-x)) scale(var(--epoch-rune-scale));
}

/* When a selection is active, lift the active button to the center
   using absolute positioning so X positions remain stable in normal state */


.name-line.is-era-selected + .time-legend .time-button {
  transition-delay: 0ms;
}


.time-past {
  font-family: var(--font-past);
  justify-self: start;
  --y-shift: 14px;
  --epoch-hover-rgb: 245, 245, 245;
}

body[data-era="past"] .time-past {
  color: #c7773d;
  -webkit-text-stroke: 0.8px rgba(120, 65, 30, 0.62);
  text-shadow:
    0 1px 0 rgba(255, 240, 214, 0.92),
    0 0 5px rgba(222, 131, 69, 0.92),
    0 0 14px rgba(198, 113, 58, 0.88),
    0 0 32px rgba(166, 92, 46, 0.8),
    0 0 56px rgba(132, 72, 37, 0.68),
    0 0 88px rgba(100, 54, 29, 0.56);
  --shift-offset: 6px;
}

body[data-era="future"] .time-future {
  text-shadow:
    0 0 4px rgba(255, 77, 0, 0.7),
    0 0 12px rgba(255, 77, 0, 0.8),
    0 0 24px rgba(255, 77, 0, 0.65),
    0 0 40px rgba(255, 77, 0, 0.5),
    0 0 60px rgba(255, 77, 0, 0.35);
  animation: neon-flicker 6s infinite;
  --shift-offset: -11px;
}

body[data-era="future"] .time-legend.has-selection .time-button.time-future.is-active {
  --scale: 1.1;
}

body[data-era="past"] .time-legend.has-selection .time-button.time-past.is-active .epoch-rune {
  color: #d18244;
  -webkit-text-stroke: 0.8px rgba(128, 70, 35, 0.66);
  text-shadow:
    0 0 6px rgba(226, 136, 72, 0.96),
    0 0 16px rgba(204, 116, 60, 0.9),
    0 0 32px rgba(172, 96, 49, 0.84),
    0 0 54px rgba(138, 76, 39, 0.72),
    0 0 80px rgba(106, 58, 31, 0.6),
    0 0 118px rgba(82, 45, 25, 0.5);
}

body[data-era="future"] .time-legend.has-selection .time-button.time-future.is-active .epoch-rune {
  color: #00F0FF;
  font-weight: 400;
  transform: translateX(0) scale(var(--epoch-rune-scale));
  text-shadow:
    0 0 4px rgba(0, 240, 255, 0.7),
    0 0 12px rgba(0, 240, 255, 0.8),
    0 0 24px rgba(0, 240, 255, 0.65),
    0 0 40px rgba(0, 240, 255, 0.5),
    0 0 60px rgba(0, 240, 255, 0.35);
}

body[data-era="present"] .time-legend.has-selection .time-button.time-present.is-active .epoch-rune {
  font-family: var(--font-rune-greek);
}
.time-legend.has-selection .time-button.time-present.is-active .epoch-rune {
  color: var(--line-strong);
  text-shadow: none;
  filter: none;
}

.time-legend.has-selection .time-button.time-future.is-active {
  --shift-offset: -9px;
}

.time-present {
  font-family: var(--font-present);
  justify-self: center;
  --y-shift: 14px;
  --epoch-hover-rgb: 245, 245, 245;
}

.time-future {
  font-family: var(--font-future);
  justify-self: end;
  --scale: 1;
  --y-shift: 10px;
  --epoch-hover-rgb: 245, 245, 245;
}

/* Hover colors before rune unlock (ANTES / AHORA / DESPUES). */
.time-legend:not(.era-unlocked) .time-button.time-past {
  --epoch-hover-rgb: 56, 142, 255; /* Azul */
}

.time-legend:not(.era-unlocked) .time-button.time-present {
  --epoch-hover-rgb: 52, 196, 105; /* Verde */
}

.time-legend:not(.era-unlocked) .time-button.time-future {
  --epoch-hover-rgb: 233, 64, 64; /* Rojo */
}

/* Hover colors after rune unlock (σις / μνη / ἀνά). */
.time-legend.era-unlocked .time-button.time-past {
  --epoch-hover-rgb: 168, 92, 255; /* Violeta para sis */
}

.time-legend.era-unlocked .time-button.time-present {
  --epoch-hover-rgb: 255, 221, 74; /* Amarillo para mne */
}

.time-legend.era-unlocked .time-button.time-future {
  --epoch-hover-rgb: 0, 240, 255; /* Cyan para ava */
}

.name-line.is-editing .name-hint,
.name-line.has-value .name-hint {
  opacity: 0;
  pointer-events: none;
}

.name-line.is-clicked .name-hint {
  opacity: 0;
}

.name-hint.is-fading {
  opacity: 0;
}

.name-line:not(.has-value):not(.is-editing) .name-hint {
  transition: opacity 2.2s ease-out;
}

.name-line.is-locked {
  animation: none;
  border-bottom-color: var(--line-strong);
}

.name-line.is-locked,
.name-line.is-editing,
.name-line.is-clicked {
  opacity: 1;
}

.name-line.name-unlocked .name-input {
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.6),
    0 0 18px rgba(255, 255, 255, 0.45);
  filter: none;
}

.name-line.name-unlocked .name-halo {
  opacity: 1;
}

.name-line.is-era-selected {
  animation: none;
  border-bottom-color: transparent;
}

.name-line.is-era-selected .name-input,
.name-line.is-era-selected .name-hint,
.name-line.is-era-selected + .time-legend {
  animation: none;
}

.name-line.is-era-selected .name-hint {
  display: none;
}

.name-line.is-era-selected .name-input {
  user-select: none;
  pointer-events: none;
}

.name-line.line-collapse-active {
  border-bottom-color: transparent;
  animation: push-name 8s ease forwards;
  animation-delay: 0s;
}

.name-line.line-collapse-active::before {
  opacity: 1;
  animation: line-collapse 6s ease forwards;
}

.name-line.line-collapse-active::after {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: -1px;
  width: calc(var(--hero-size) * 0.22);
  height: calc(var(--hero-size) * 0.22);
  filter: blur(10px);
  background: radial-gradient(
    circle at center,
    rgba(24, 24, 24, 0.98) 0%,
    rgba(12, 12, 12, 0.94) 45%,
    rgba(6, 6, 6, 0.6) 65%,
    rgba(3, 3, 3, 0.24) 75%,
    var(--bg) 100%
  );
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.88);
  animation: line-dot-grow 8s ease forwards;
  animation-delay: 6s;
  z-index: 900;
  transform: translate(-50%, 50%) translate(var(--portal-offset-x), var(--portal-offset-y));
}

.name-line.portal-moving::after {
  animation: portal-slide 2s linear forwards;
  opacity: 1;
}

.name-line.portal-moving-star::after {
  animation: portal-star-slide 5s linear forwards;
  opacity: 1;
}

.name-line.portal-moving-star .portal-trail {
  opacity: 1;
}

.name-line.portal-star-hold .portal-trail {
  opacity: 1;
}

.name-line.portal-star-hold .rune {
  opacity: 1;
  animation: none;
}

.name-line.portal-star-hold.portal-rune-burst .rune {
  opacity: 0.5;
  animation: rune-bloom 1s ease forwards;
}


body[data-era="past"] .name-line.is-era-selected::after {
  width: calc(var(--hero-size) * 0.048);
  height: calc(var(--hero-size) * 0.048);
  filter: blur(2px);
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 249, 238, 1) 20%,
    rgba(255, 230, 185, 0.95) 40%,
    rgba(229, 184, 132, 0.82) 62%,
    rgba(184, 115, 51, 0.62) 80%,
    rgba(92, 58, 33, 0.24) 94%,
    rgba(92, 58, 33, 0) 100%
  );
  box-shadow:
    inset 0 0 8px rgba(255, 255, 255, 0.96),
    0 0 0 3px rgba(184, 115, 51, 0.95),
    0 0 20px rgba(255, 255, 255, 0.92),
    0 0 42px rgba(212, 163, 115, 0.78),
    0 0 74px rgba(184, 115, 51, 0.56);
}

body[data-era="present"] .name-line.is-era-selected::after {
  width: calc(var(--hero-size) * 0.048);
  height: calc(var(--hero-size) * 0.048);
  filter: blur(2px);
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 16%,
    rgba(255, 246, 206, 0.98) 28%,
    rgba(255, 224, 120, 0.95) 46%,
    rgba(204, 142, 22, 0.9) 58%,
    rgba(255, 211, 87, 0.74) 72%,
    rgba(255, 198, 54, 0.46) 88%,
    rgba(255, 198, 54, 0.08) 100%
  );
  box-shadow:
    inset 0 0 24px rgba(255, 255, 255, 0.96),
    0 0 0 2px rgba(204, 142, 22, 0.9),
    0 0 56px rgba(255, 255, 255, 0.92),
    0 0 120px rgba(255, 220, 120, 0.92),
    0 0 186px rgba(255, 198, 54, 0.74);
}

body[data-era="future"] .name-line.is-era-selected::after {
  width: calc(var(--hero-size) * 0.012);
  height: calc(var(--hero-size) * 0.012);
  border-radius: 999px;
  filter: blur(2px);
  background:
    radial-gradient(
      circle at center,
      rgba(4, 0, 14, 0) 0%,
      rgba(4, 0, 14, 0) 72%,
      rgba(4, 0, 14, 0.75) 86%,
      rgba(4, 0, 14, 0.95) 100%
    ),
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 1) 28%,
      rgba(255, 255, 255, 0.96) 46%,
      rgba(255, 255, 255, 0.85) 60%,
      rgba(255, 255, 255, 0.68) 72%,
      rgba(255, 255, 255, 0.5) 82%,
      rgba(255, 255, 255, 0.34) 90%,
      rgba(255, 255, 255, 0.18) 96%,
      rgba(255, 255, 255, 0.08) 100%
    );
  box-shadow:
    inset 0 0 40px rgba(255, 255, 255, 0.92),
    0 0 0 5px rgba(255, 255, 255, 0.88),
    0 0 24px rgba(255, 255, 255, 0.82),
    0 0 90px rgba(255, 255, 255, 0.9),
    0 0 140px rgba(255, 255, 255, 0.86),
    0 0 220px rgba(255, 255, 255, 0.82),
    0 0 300px rgba(255, 255, 255, 0.72);
}

body.portal-open .name-line.is-era-selected::after {
  animation: portal-grow 6s ease forwards;
  animation-delay: 0s;
  background: radial-gradient(
    circle at center,
    rgba(16, 16, 16, 1) 0%,
    rgba(10, 10, 10, 1) 55%,
    rgba(4, 4, 4, 0.96) 85%,
    rgba(0, 0, 0, 0.96) 100%
  );
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.95);
  position: absolute;
  left: 50%;
  top: auto;
  bottom: -1px;
  z-index: 900;
}

body[data-era="past"].portal-open .name-line.is-era-selected::after {
  width: calc(var(--hero-size) * 0.048);
  height: calc(var(--hero-size) * 0.048);
  background: radial-gradient(
    circle at center,
    rgba(18, 18, 18, 1) 0%,
    rgba(12, 12, 12, 1) 20%,
    rgba(8, 8, 8, 0.96) 36%,
    rgba(5, 5, 5, 0.86) 58%,
    rgba(3, 3, 3, 0.68) 76%,
    rgba(2, 2, 2, 0.46) 90%,
    rgba(0, 0, 0, 0.24) 100%
  );
  box-shadow:
    inset 0 0 12px rgba(22, 22, 22, 1),
    0 0 0 3px rgba(16, 16, 16, 0.95),
    0 0 56px rgba(0, 0, 0, 0.95),
    0 0 110px rgba(0, 0, 0, 0.88),
    0 0 180px rgba(0, 0, 0, 0.72);
}

body[data-era="present"].portal-open .name-line.is-era-selected::after {
  width: calc(var(--hero-size) * 0.048);
  height: calc(var(--hero-size) * 0.048);
  background: radial-gradient(
    circle at center,
    rgba(18, 18, 18, 1) 0%,
    rgba(12, 12, 12, 1) 20%,
    rgba(8, 8, 8, 0.96) 34%,
    rgba(5, 5, 5, 0.9) 52%,
    rgba(3, 3, 3, 0.82) 62%,
    rgba(2, 2, 2, 0.66) 76%,
    rgba(1, 1, 1, 0.44) 90%,
    rgba(0, 0, 0, 0.2) 100%
  );
  box-shadow:
    inset 0 0 32px rgba(18, 18, 18, 1),
    0 0 0 3px rgba(10, 10, 10, 0.92),
    0 0 152px rgba(0, 0, 0, 0.94),
    0 0 230px rgba(0, 0, 0, 0.86),
    0 0 312px rgba(0, 0, 0, 0.72);
}

body[data-era="future"].portal-open .name-line.is-era-selected::after {
  width: calc(var(--hero-size) * 0.012);
  height: calc(var(--hero-size) * 0.012);
  border-radius: 999px;
  background:
    radial-gradient(
      circle at center,
      rgba(4, 0, 14, 0) 0%,
      rgba(4, 0, 14, 0) 72%,
      rgba(4, 0, 14, 0.75) 86%,
      rgba(4, 0, 14, 0.95) 100%
    ),
    radial-gradient(
      circle at center,
      rgba(24, 24, 24, 1) 0%,
      rgba(16, 16, 16, 1) 30%,
      rgba(10, 10, 10, 0.96) 50%,
      rgba(6, 6, 6, 0.82) 64%,
      rgba(4, 4, 4, 0.64) 76%,
      rgba(2, 2, 2, 0.44) 86%,
      rgba(1, 1, 1, 0.28) 92%,
      rgba(0, 0, 0, 0.14) 97%,
      rgba(0, 0, 0, 0.08) 100%
    );
  box-shadow:
    inset 0 0 56px rgba(18, 18, 18, 0.94),
    0 0 0 5px rgba(10, 10, 10, 0.88),
    0 0 32px rgba(0, 0, 0, 0.84),
    0 0 260px rgba(0, 0, 0, 0.9),
    0 0 340px rgba(0, 0, 0, 0.86),
    0 0 480px rgba(0, 0, 0, 0.84),
    0 0 620px rgba(0, 0, 0, 0.72);
}


.name-line.is-editing .name-hint-text,
.name-line.has-value .name-hint-text {
  animation: none;
}


.veil {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  animation: none;
  pointer-events: none;
  z-index: 10;
}

body.inventory-travel-veil-priority .veil {
  z-index: 5107;
}

@keyframes pulse-text {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
  }
}

@keyframes veil-fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  46.666% {
    opacity: 0.875;
  }
  100% {
    opacity: 0.15;
  }
}

@keyframes line-pulse {
  0% {
    border-bottom-color: var(--line-soft);
  }
  50% {
    border-bottom-color: var(--line-strong);
  }
  100% {
    border-bottom-color: var(--line-soft);
  }
}

@keyframes line-collapse {
  0% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(0);
    opacity: 0;
  }
}

@keyframes line-dot-grow {
  0% {
    opacity: 0;
    transform: translate(-50%, 50%) scale(0.02);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 50%) scale(0.5);
  }
}

@keyframes portal-grow {
  0% {
    opacity: 1;
    transform: translate(-50%, 50%) translate(var(--portal-offset-x), var(--portal-offset-y)) scale(1);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 50%) translate(var(--portal-offset-x), var(--portal-offset-y)) scale(60);
  }
}

@keyframes portal-slide {
  0% {
    transform: translate(-50%, 50%) translate(0px, 0px);
  }
  50% {
    transform: translate(-50%, 50%) translate(var(--portal-mid-x, 0px), var(--portal-mid-y, 0px));
  }
  100% {
    transform: translate(-50%, 50%) translate(var(--portal-end-x, 0px), var(--portal-end-y, 0px));
  }
}

@keyframes portal-star-slide {
  0% {
    transform: translate(-50%, 50%) translate(0px, 0px);
  }
  14.29% {
    transform: translate(-50%, 50%) translate(var(--portal-p1-x, 0px), var(--portal-p1-y, 0px));
  }
  28.57% {
    transform: translate(-50%, 50%) translate(var(--portal-p2-x, 0px), var(--portal-p2-y, 0px));
  }
  42.86% {
    transform: translate(-50%, 50%) translate(var(--portal-p3-x, 0px), var(--portal-p3-y, 0px));
  }
  57.14% {
    transform: translate(-50%, 50%) translate(var(--portal-p4-x, 0px), var(--portal-p4-y, 0px));
  }
  71.43% {
    transform: translate(-50%, 50%) translate(var(--portal-p5-x, 0px), var(--portal-p5-y, 0px));
  }
  85.71% {
    transform: translate(-50%, 50%) translate(var(--portal-p6-x, 0px), var(--portal-p6-y, 0px));
  }
  90% {
    transform: translate(-50%, 50%) translate(var(--portal-p6-x, 0px), var(--portal-p6-y, 0px));
  }
  94% {
    transform: translate(-50%, 50%) translate(var(--portal-rise1-x, 0px), var(--portal-rise1-y, 0px));
  }
  97% {
    transform: translate(-50%, 50%) translate(var(--portal-rise2-x, 0px), var(--portal-rise2-y, 0px));
  }
  100% {
    transform: translate(-50%, 50%) translate(var(--portal-center-x, 0px), var(--portal-center-y, 0px));
  }
}


@keyframes rune-bloom {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--rune-x, 0px), var(--rune-y, 0px)) scale(0.7);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(var(--rune-x, 0px), var(--rune-y, 0px)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--rune-x, 0px), var(--rune-y, 0px)) scale(1.08);
  }
}

@keyframes sense-wheel-glyph-rune-bloom {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + var(--glyph-letter-offset-y, 0cm))) scale(1.4);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, calc(-50% + var(--glyph-letter-offset-y, 0cm))) scale(2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + var(--glyph-letter-offset-y, 0cm))) scale(2.16);
  }
}

@keyframes epoch-rune-bloom {
  0% {
    opacity: 0;
    transform: translateX(var(--epoch-rune-shift-x, 0px)) scale(calc(var(--epoch-rune-scale, 1) * 0.7));
  }
  40% {
    opacity: 1;
    transform: translateX(var(--epoch-rune-shift-x, 0px)) scale(var(--epoch-rune-scale, 1));
  }
  100% {
    opacity: 1;
    transform: translateX(var(--epoch-rune-shift-x, 0px)) scale(var(--epoch-rune-scale, 1));
  }
}

@keyframes second-puzzle-triangle-pulse {
  0% {
    opacity: 0;
    transform: translate(-50%, -52%) scale(0.86);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, -52%) scale(1.02);
  }
  48% {
    opacity: 0.92;
    transform: translate(-50%, -52%) scale(0.98);
  }
  72% {
    opacity: 0.82;
    transform: translate(-50%, -52%) scale(1.04);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -52%) scale(1.16);
  }
}

@keyframes second-puzzle-rune-orbit {
  0% {
    transform: translateX(var(--epoch-rune-shift-x, 0px)) translateY(0) scale(var(--epoch-rune-scale, 1));
  }
  20% {
    transform: translateX(calc(var(--epoch-rune-shift-x, 0px) + 8px)) translateY(-8px) scale(calc(var(--epoch-rune-scale, 1) * 1.08));
  }
  50% {
    transform: translateX(var(--epoch-rune-shift-x, 0px)) translateY(-14px) scale(calc(var(--epoch-rune-scale, 1) * 1.14));
  }
  80% {
    transform: translateX(calc(var(--epoch-rune-shift-x, 0px) - 8px)) translateY(-8px) scale(calc(var(--epoch-rune-scale, 1) * 1.08));
  }
  100% {
    transform: translateX(var(--epoch-rune-shift-x, 0px)) translateY(0) scale(var(--epoch-rune-scale, 1));
  }
}

@keyframes game-portal-grow {
  0% {
    opacity: 1;
    --game-reveal-radius: 0px;
  }
  100% {
    opacity: 1;
    --game-reveal-radius: 170vmax;
  }
}

@keyframes loading-portal-collapse-wave {
  0% {
    --loading-reveal-radius: 118vmax;
    opacity: 0;
  }
  3% {
    opacity: 0.72;
  }
  45% {
    opacity: 0.6;
  }
  78% {
    opacity: 0.44;
  }
  100% {
    --loading-reveal-radius: 0vmax;
    opacity: 0;
  }
}

@keyframes game-ui-controls-reveal {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 0.16;
  }
  65% {
    opacity: 0.52;
  }
  100% {
    opacity: 1;
  }
}

@keyframes game-ui-controls-hide {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 0.76;
  }
  72% {
    opacity: 0.34;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

body.era-selected .title,
body.era-selected .subtitle,
body.era-selected .name-line .name-input,
body.era-selected .time-legend {
  animation: none;
  opacity: 1;
  visibility: visible;
}

body[data-era="past"].era-selected .title,
body[data-era="past"].era-selected .subtitle,
body[data-era="past"].era-selected .name-line .name-input,
body[data-era="past"].era-selected .name-line .name-hint,
body[data-era="present"].era-selected .title,
body[data-era="present"].era-selected .subtitle,
body[data-era="present"].era-selected .name-line .name-input,
body[data-era="present"].era-selected .name-line .name-hint {
  transition: none !important;
  opacity: 1;
}

body[data-era="past"].era-selected .title {
  animation: past-title-crystal-sweep 2.2s linear infinite !important;
}

body[data-era="past"].era-selected .name-line .name-input,
body[data-era="past"] .name-hint-text {
  animation: past-title-crystal-sweep 2.2s linear infinite !important;
}

body[data-era="future"].era-selected .title {
  animation: neon-flicker 6s infinite !important;
}


body.portal-open .hero-wrap {
  opacity: 1;
  z-index: 1000;
}

body.game-screen:not(.game-ui-revealing) .hero-wrap,
body.game-screen:not(.game-ui-revealing) .hero-frame,
body.game-screen:not(.game-ui-revealing) .hero,
body.game-screen:not(.game-ui-revealing) .hero-poster {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

body.portal-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #000000;
  opacity: 0;
  animation: portal-mask 6s ease forwards;
  z-index: 800;
  pointer-events: none;
}

body.portal-complete.game-screen:not(.game-ui-revealing) .title,
body.portal-complete.game-screen:not(.game-ui-revealing) .subtitle,
body.portal-complete.game-screen:not(.game-ui-revealing) .time-legend,
body.portal-complete.game-screen:not(.game-ui-revealing) .veil {
  visibility: hidden;
}

body.game-screen .mute-toggle {
  position: fixed;
  top: var(--audio-hud-top);
  left: 1rem;
  right: auto;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none;
  z-index: 5105;
}

body.game-screen .master-volume-control {
  position: fixed;
  top: var(--audio-hud-top);
  left: 2.9rem;
  right: auto;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none;
  z-index: 5105;
}

body.game-screen .master-volume-slider,
body.game-screen .master-volume-label,
body.game-screen .master-volume-value {
  opacity: 1 !important;
  visibility: visible !important;
}

body.game-screen .fullscreen-toggle {
  position: fixed;
  top: var(--audio-hud-top);
  left: calc(12.4rem + 1.8cm);
  right: auto;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none;
  z-index: 5105;
}

body.codex-focus-hidden .mute-toggle,
body.codex-focus-hidden .fullscreen-toggle,
body.codex-focus-hidden .master-volume-control,
body.codex-focus-fading .mute-toggle,
body.codex-focus-fading .fullscreen-toggle,
body.codex-focus-fading .master-volume-control {
  position: fixed !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 5105 !important;
}

body.game-screen.inventory-travel-fadeout .mute-toggle,
body.game-screen.inventory-travel-fadeout .fullscreen-toggle,
body.game-screen.inventory-travel-fadeout .master-volume-control,
body.game-screen.inventory-travel-fadeout .master-volume-slider,
body.game-screen.inventory-travel-fadeout .master-volume-label,
body.game-screen.inventory-travel-fadeout .master-volume-value {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: inventory-travel-screen-fadeout 10000ms linear forwards !important;
}

body.game-screen.inventory-travel-fadeout .mute-toggle *,
body.game-screen.inventory-travel-fadeout .fullscreen-toggle *,
body.game-screen.inventory-travel-fadeout .master-volume-control * {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: inventory-travel-screen-fadeout 10000ms linear forwards !important;
}

body.game-screen .game-root.is-portal-revealing .game-layout {
  opacity: 0;
  animation: game-ui-controls-reveal 12s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

body.game-screen.game-ui-revealing .screen {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  background: #000000 !important;
  animation: game-ui-controls-hide 12s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

body.game-screen.game-ui-revealing .title,
body.game-screen.game-ui-revealing .subtitle,
body.game-screen.game-ui-revealing .hero-wrap,
body.game-screen.game-ui-revealing .hero-frame,
body.game-screen.game-ui-revealing .hero {
  visibility: visible !important;
  opacity: 1 !important;
  animation: game-ui-controls-hide 12s cubic-bezier(0.22, 0.61, 0.36, 1) forwards !important;
}

body.game-screen.game-ui-revealing .mute-toggle,
body.game-screen.game-ui-revealing .fullscreen-toggle {
  opacity: 0 !important;
  pointer-events: none !important;
  animation: game-ui-controls-reveal 12s ease forwards !important;
}

body.game-screen.game-ui-revealing .game-orb[class*="dracma-"],
body.game-screen.game-ui-revealing .game-orb[class*="dracma-"]::before,
body.game-screen.game-ui-revealing .game-orb[class*="dracma-"]::after,
body.game-screen.game-ui-revealing .game-dracma-canvas {
  animation: none !important;
}

body.portal-complete.game-screen .mute-toggle {
  visibility: visible !important;
  opacity: 1 !important;
}
body.portal-complete.game-screen .fullscreen-toggle {
  visibility: visible !important;
  opacity: 1 !important;
}
body.portal-complete .hero-hit {
  visibility: visible;
  pointer-events: auto;
}

body.portal-complete .name-block {
  visibility: visible;
}

body.portal-complete .name-input,
body.portal-complete .name-hint,
body.portal-complete .time-legend {
  visibility: hidden;
}

body.portal-complete .portal-trail {
  opacity: 1;
  z-index: 1100;
}

body.portal-complete .portal-trail-path {
  stroke-dashoffset: 0;
  stroke: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.4))
    drop-shadow(0 0 28px rgba(0, 0, 0, 0.25));
}
@keyframes portal-mask {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes push-name {
  0% {
    --name-push: 0px;
  }
  100% {
    --name-push: calc(-1 * var(--push-distance));
  }
}


@keyframes hero-reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ripple {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.22);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.0),
      0 0 18px rgba(255, 255, 255, 0.0);
  }
  20% {
    opacity: 0.55;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.45),
      0 0 22px rgba(255, 255, 255, 0.18);
  }
  60% {
    opacity: 0.25;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.25),
      0 0 18px rgba(255, 255, 255, 0.12);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.0),
      0 0 16px rgba(255, 255, 255, 0.0);
  }
}

@keyframes ripple-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.22);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.0),
      0 0 18px rgba(255, 255, 255, 0.0);
  }
  25% {
    opacity: 0.8;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.65),
      0 0 26px rgba(255, 255, 255, 0.25);
  }
  70% {
    opacity: 0.3;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.25),
      0 0 18px rgba(255, 255, 255, 0.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.0),
      0 0 16px rgba(255, 255, 255, 0.0);
  }
}

@keyframes spin-left {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}

@keyframes spin-right {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

@keyframes spin-up {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(360deg);
  }
}

@keyframes dracma-sequence-spin-up {
  from {
    transform: translate(-50%, -50%) rotateX(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotateX(-360deg);
  }
}

@keyframes dracma-sequence-spin-right {
  from {
    transform: translate(-50%, -50%) rotateY(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotateY(360deg);
  }
}

@keyframes dracma-sequence-spin-left {
  from {
    transform: translate(-50%, -50%) rotateY(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotateY(-360deg);
  }
}

@keyframes neon-flicker {
  0%, 18%, 20%, 22%, 55%, 57%, 100% {
    opacity: 1;
  }
  19%, 21%, 56% {
    opacity: 0.85;
  }
  58% {
    opacity: 0.9;
  }
  60% {
    opacity: 0.95;
  }
}

@keyframes future-title-flicker {
  0%, 14%, 18%, 30%, 52%, 60%, 100% {
    opacity: 1;
    text-shadow:
      0 0 4px rgba(0, 240, 255, 0.72),
      0 0 12px rgba(0, 240, 255, 0.84),
      0 0 24px rgba(0, 240, 255, 0.72),
      0 0 42px rgba(0, 240, 255, 0.58),
      0 0 66px rgba(0, 240, 255, 0.42);
  }
  16%, 54% {
    opacity: 0.82;
    text-shadow:
      0 0 3px rgba(0, 240, 255, 0.46),
      0 0 8px rgba(0, 240, 255, 0.5),
      0 0 16px rgba(0, 240, 255, 0.42),
      0 0 28px rgba(0, 240, 255, 0.34),
      0 0 44px rgba(0, 240, 255, 0.26);
  }
  56% {
    opacity: 0.9;
  }
}

@keyframes past-title-crystal-sweep {
  0% {
    background-position: 0 0, -320% 0;
  }
  100% {
    background-position: 0 0, 320% 0;
  }
}

@keyframes ui-reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes whiteout {
  0% {
    background-color: var(--bg);
  }
  85% {
    background-color: var(--bg);
  }
  100% {
    background-color: #ffffff;
  }
}

@keyframes dracma-spasm {
  0% {
    transform: translate(-50%, -50%);
  }
  5% {
    transform: translate(calc(-50% - 0.5px), calc(-50% + 0.5px));
  }
  10% {
    transform: translate(calc(-50% + 0.5px), calc(-50% - 0.5px));
  }
  15% {
    transform: translate(calc(-50% - 0.5px), calc(-50% + 0px));
  }
  20% {
    transform: translate(-50%, -50%);
  }
  60% {
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}

@keyframes dracma-nudge-left {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-1.5px, 0, 0);
  }
}

@keyframes dracma-nudge-right {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(1.5px, 0, 0);
  }
}

@keyframes dracma-nudge-up {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -1.5px, 0);
  }
}

@keyframes dracma-nudge-down {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, 1.5px, 0);
  }
}

@keyframes dracma-nudge-up-left {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-1.1px, -1.1px, 0);
  }
}

@keyframes dracma-nudge-up-right {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(1.1px, -1.1px, 0);
  }
}

@keyframes dracma-nudge-down-left {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-1.1px, 1.1px, 0);
  }
}

@keyframes dracma-nudge-down-right {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(1.1px, 1.1px, 0);
  }
}

@keyframes dracma-return-left {
  0% {
    transform: translate3d(-1.5px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes dracma-return-right {
  0% {
    transform: translate3d(1.5px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes dracma-return-up {
  0% {
    transform: translate3d(0, -1.5px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes dracma-return-down {
  0% {
    transform: translate3d(0, 1.5px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes dracma-return-up-left {
  0% {
    transform: translate3d(-1.1px, -1.1px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes dracma-return-up-right {
  0% {
    transform: translate3d(1.1px, -1.1px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes dracma-return-down-left {
  0% {
    transform: translate3d(-1.1px, 1.1px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes dracma-return-down-right {
  0% {
    transform: translate3d(1.1px, 1.1px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes era-unlock {
  0% {
    filter: brightness(0.9);
    text-shadow: none;
  }
  45% {
    filter: brightness(1.6);
    text-shadow:
      0 0 6px rgba(255, 255, 255, 0.6),
      0 0 16px rgba(255, 255, 255, 0.5),
      0 0 26px rgba(255, 255, 255, 0.35);
  }
  100% {
    filter: brightness(1);
    text-shadow: none;
  }
}













































body[data-era="present"] .time-legend .time-button.time-present,
body[data-era="present"] .time-legend .time-button.time-present .epoch-rune {
  font-family: var(--font-present) !important;
}

body.game-screen .consulta-dm-holder,
body.game-screen .consulta-dm-input,
body.game-screen .consulta-dm-hint,
body.game-screen .consulta-dm-hint-text {
  font-family: "Atkinson Hyperlegible", "Atkinson Hyperlegible Next", "Noto Sans", "Verdana", "Trebuchet MS", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
}

/* Shared anchor for DM logo + DM query in game screen. */
body.game-screen {
  /* 1920 baseline calibration: tweak these first, then fine-tune by breakpoints. */
  --base-width: 1920;
  --ui-scale: clamp(0.72, calc(100vw / var(--base-width)), 1.1);

  --dm-logo-size-1920: 170px;
  --dm-stack-spacing-1920: 12.25rem;
  --dm-anchor-top-1920: calc(var(--audio-hud-top) + 2rem);
  --hud-right-offset-1920: 1rem;

  --profecia-top-shift-1920: 0.4rem;
  --profecia-left-gap-1920: 0;
  --profecia-max-width-1920: 420px;
  --location-banner-width-boost-x: 3cm;

  --notes-gap-from-query-1920: 3.25rem;
  --notes-max-width-1920: 320px;
  --notes-width-1920: 260px;
  --notes-min-height-1920: 8.2rem;
  --notes-right-cutoff-x-1920: -112px;

  --dm-logo-size: clamp(110px, calc(var(--dm-logo-size-1920) * var(--ui-scale)), 180px);
  --dm-stack-spacing: calc(var(--dm-stack-spacing-1920) * var(--ui-scale));
  --dm-logo-gap: calc(var(--dm-stack-spacing) - var(--dm-logo-size));
  --dm-anchor-top: var(--dm-anchor-top-1920);
  --dm-logo-center-y: calc(var(--dm-anchor-top) - 0.9cm + (var(--dm-logo-size) / 2));
  --hud-right-offset: var(--hud-right-offset-1920);
  --hud-right-transform: translateX(9.7cm) scale(0.8);

  --avatar-orb-size: clamp(94px, 13vw, 156px);
  --avatar-pre-orb-offset: calc(1.4rem + 0.6cm);

  --profecia-top-shift: calc(var(--profecia-top-shift-1920) * var(--ui-scale));
  --profecia-left-gap: calc(var(--profecia-left-gap-1920) * var(--ui-scale));
  --profecia-max-width: clamp(320px, calc(var(--profecia-max-width-1920) * var(--ui-scale)), 520px);

  --notes-gap-from-query: calc(var(--notes-gap-from-query-1920) * var(--ui-scale));
  --notes-max-width: clamp(340px, calc(var(--notes-max-width-1920) * var(--ui-scale)), 680px);
  --notes-width: calc(var(--notes-width-1920) * var(--ui-scale));
  --notes-min-height: calc(var(--notes-min-height-1920) * var(--ui-scale));
  --notes-right-cutoff-x: calc(var(--notes-right-cutoff-x-1920) * var(--ui-scale));
  --dm-inset-right-1920: calc(-660px - 20cm);
  --dm-inset-right: calc(var(--dm-inset-right-1920) * var(--ui-scale));

  /* Relative to transformed game layout (fixed containing block). */
  --dm-anchor-left: calc(((min(1100px, 92vw) - 100vw) / 4) - (var(--dm-logo-size) / 2));
  --notes-anchor-left: var(--dm-anchor-left);
  --notes-center-x: calc(var(--notes-anchor-left) + (var(--notes-width) / 2));
  --dm-anchor-right: calc((((min(1100px, 92vw) - 100vw) / 4) - (var(--dm-logo-size) / 2)) + var(--dm-inset-right));
  --notes-anchor-right: var(--dm-anchor-right);
  --notes-center-right: calc(var(--notes-anchor-right) + (var(--notes-width) / 2));
  --profecia-fullscreen-shift-x: 0cm;
}

/* Overlay prophecy on notebook area using same anchoring approach as NOTAS. */
.game-bitacora-dock::after {
  content: "Para ti:";
  position: absolute;
  left: calc(50% + 0.7cm - 3.4cm + 0.5cm + 0.2cm);
  top: calc(50% + (calc(clamp(170px, 18vw, 248px) * 1.69) * 0.22) - 2.5cm + 0.9cm);
  transform: translate(-50%, -50%);
  width: auto;
  max-width: 10rem;
  text-align: right;
  font-family: var(--font-bitacora);
  font-weight: 700;
  font-size: clamp(0.55rem, 1.1vw, 1rem);
  line-height: 1;
  letter-spacing: 0.08em;
  color: rgba(30, 16, 10, 0.82);
  text-shadow: 0 1px 0 rgba(255, 245, 225, 0.22);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
  z-index: 50;
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease 0.3s, visibility 0s linear 0.3s;
}

html[lang="en"] .game-bitacora-dock::after {
  content: "For you:";
}

.bitacora-objetivo-partida {
  --objective-postit-image: url("Imagenes/Interface/Post-It/Amarillo.png");
  --postit-drag-x: 0px;
  --postit-drag-y: 0px;
  --objective-postit-tilt: -10deg;
  position: fixed;
  left: calc(clamp(72px, 10vw, 120px) + 10px + 1cm - 10.1cm);
  top: calc((clamp(72px, 10vw, 120px) - 2.6em) / 2 + 4.15cm);
  transform: translate(var(--postit-drag-x), var(--postit-drag-y)) rotate(var(--objective-postit-tilt));
  width: min(240px, 26vw);
  min-width: min(240px, 26vw);
  max-width: min(240px, 26vw);
  min-height: 5.6cm;
  max-height: 5.6cm;
  display: none;
  grid-template-rows: auto 1fr;
  gap: 0.16cm;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 0.78rem;
  line-height: 1.12;
  font-style: normal;
  opacity: 1;
  pointer-events: auto;
  color: #111111;
  box-sizing: border-box;
  padding: 0.52cm 0.62cm 0.55cm 0.64cm;
  background-image: var(--objective-postit-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 1332;
  transition: opacity 180ms ease 0.3s, visibility 0s linear 0.3s;
}

.bitacora-objetivo-partida[data-has-objective="true"] {
  display: grid;
}

.bitacora-objetivo-partida-label,
.bitacora-objetivo-partida-value {
  display: block;
}

.bitacora-objetivo-partida-label {
  font-size: 0.82rem;
  line-height: 1.08;
  text-align: center;
}

.bitacora-objetivo-partida-value {
  white-space: pre-wrap;
  overflow-y: auto;
  padding-right: 2px;
  text-align: left;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--epoch-triangle-rgb), 0.5) transparent;
}

.bitacora-objetivo-partida-value::-webkit-scrollbar {
  width: 3px;
}

.bitacora-objetivo-partida-value::-webkit-scrollbar-track {
  background: transparent;
}

.bitacora-objetivo-partida-value::-webkit-scrollbar-thumb {
  background: rgba(var(--epoch-triangle-rgb), 0.5);
  border-radius: 999px;
}

body[data-era="future"].game-screen .bitacora-objetivo-partida {
  --objective-postit-image: url("Imagenes/Interface/Post-It/Cian.png");
}

body[data-era="past"].game-screen .bitacora-objetivo-partida {
  --objective-postit-image: url("Imagenes/Interface/Post-It/Cobre-2.png");
}

body.game-screen .profecia {
  position: fixed;
  left: calc(50% - ((min(680px, 90vw) + min(1100px, 92vw)) / 4) - clamp(128px, 14vw, 228px) + 0.3cm + 0.2cm - var(--profecia-fullscreen-shift-x)) !important;
  top: calc(50% + clamp(126px, 16vh, 244px) + 1cm + 1.5cm + (calc(clamp(170px, 18vw, 248px) * 1.69) * 0.22)) !important;
  right: auto;
  transform: translate(-50%, -50%) rotate(-10deg) !important;
  transform-origin: center center;
  width: calc(clamp(170px, 18vw, 248px) * 0.8);
  min-width: calc(clamp(170px, 18vw, 248px) * 0.8);
  max-width: calc(clamp(170px, 18vw, 248px) * 0.8);
  box-sizing: border-box;
  padding: clamp(10px, 1.4vw, 18px) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(2px, 0.5vh, 8px);
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  z-index: 1400;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease 0.3s, visibility 0s linear 0.3s;
}

:fullscreen body.game-screen .profecia,
:-webkit-full-screen body.game-screen .profecia {
  --profecia-fullscreen-shift-x: 0.85cm;
}

body.game-screen .game-orb-main-block {
  position: fixed !important;
  left: calc(50% - ((min(680px, 90vw) + min(1100px, 92vw)) / 4) - clamp(128px, 14vw, 228px) + 1cm + 1.9cm) !important;
  top: calc(var(--dm-logo-center-y) - (var(--avatar-orb-size) / 2) - var(--avatar-pre-orb-offset)) !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(240px, 26vw);
  gap: 0.55rem;
  justify-items: center;
  z-index: 1305;
}

body.is-partida-cerrada.game-screen .game-orb-main-block,
body.is-partida-cerrada.game-screen .sense-wheel,
body.is-partida-cerrada.game-screen .sense-beam-canvas,
body.is-partida-cerrada.game-screen .fecha-de-la-partida,
body.is-partida-cerrada.game-screen .profecia,
body.is-partida-cerrada.game-screen .voluntad-holder,
body.is-partida-cerrada.game-screen .consulta-dm-holder,
body.is-partida-cerrada.game-screen .consulta-notas,
body.is-partida-cerrada.game-screen .elemental-lotus-anchor,
body.is-partida-cerrada.game-screen .elemental-lotus-panel,
body.is-partida-cerrada.game-screen .elemental-lotus-toast {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 10000ms ease;
}

/* Keep Consulta DM directly below the DM logo and anchored together. */
body.game-screen .consulta-dm-holder {
  position: fixed;
  top: calc(var(--dm-anchor-top) + var(--dm-stack-spacing) - 1.0cm) !important;
  left: auto !important;
  right: calc(var(--notes-center-right) - (var(--dm-logo-size) / 2)) !important;
  width: calc(var(--dm-logo-size) * 2) !important;
  min-height: 2.2em !important;
  height: auto !important;
  padding: 0.14rem 0.3rem !important;
  transform: translateX(20.5cm) !important;
  z-index: 1200;
}

/* Keep objective post-it beside Consulta DM, not over the avatar column. */
body.game-screen .bitacora-objetivo-partida {
  position: fixed;
  top: calc(var(--dm-anchor-top) + var(--dm-stack-spacing) - 6.15cm) !important;
  left: auto !important;
  right: calc(var(--notes-center-right) - (var(--dm-logo-size) / 2) + (var(--dm-logo-size) * 2) + 0.8cm) !important;
  transform: translate(calc(var(--postit-drag-x) + 11.5cm), var(--postit-drag-y)) rotate(var(--objective-postit-tilt)) !important;
  z-index: 1302;
}

/* Keep DM logo attached above Consulta DM as one anchored block. */
body.game-screen .consulta-dm-logo {
  position: absolute;
  left: 50% !important;
  top: calc(-1 * var(--dm-stack-spacing) + 0.4cm) !important;
  width: var(--dm-logo-size) !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  z-index: 1210;
}

/* Move DM notes below Consulta DM and use the available horizontal space. */
body.game-screen .consulta-notas {
  position: fixed !important;
  top: calc(var(--dm-anchor-top) + var(--dm-stack-spacing) + 1.15cm) !important;
  left: auto !important;
  right: calc(var(--notes-center-right) - 5.2cm) !important;
  width: 10.4cm !important;
  max-width: 10.4cm !important;
  min-height: var(--notes-min-height);
  transform: translateX(22.5cm) rotate(-0.45deg) !important;
  padding-left: 0;
  padding-right: 0.5em;
  text-align: left;
  z-index: 1300;
  pointer-events: none !important;
}

body.game-screen .profecia,
body.game-screen .profecia *,
body.game-screen .consulta-notas,
body.game-screen .consulta-notas * {
  pointer-events: none !important;
}

body.game-screen .consulta-notas-scroll,
body.game-screen .consulta-notas-scroll *,
body.game-screen .consulta-notas-list,
body.game-screen .consulta-notas-list * {
  pointer-events: auto !important;
}

body.game-screen .consulta-notas-title {
  font-size: clamp(0.9rem, 1.25vw, 1.1rem) !important;
}

body.game-screen .consulta-notas-list {
  gap: 0.55rem;
}

/* Keep location/date fixed at top-right in game screen. */
body.game-screen .fecha-de-la-partida {
  top: calc(var(--audio-hud-top) - 0.2cm);
  right: var(--hud-right-offset);
  left: auto;
  transform: var(--hud-right-transform);
  transform-origin: top right;
  max-width: min(48vw, 420px);
  z-index: 1405;
  font-family: var(--font-accessible) !important;
  font-size: clamp(1.05rem, 2.4vw, 1.425rem) !important;
}

body.game-screen .fecha-de-la-partida .ubicacion-partida,
body.game-screen .fecha-de-la-partida .tiempo-partida,
body.game-screen .fecha-de-la-partida .hora-partida {
  font-family: var(--font-accessible) !important;
  font-size: inherit !important;
}

/* Restore 2-line layout: location on first line, date+time on second line. */
body.game-screen .fecha-de-la-partida .ubicacion-partida {
  display: block;
}

body.game-screen .fecha-de-la-partida .tiempo-partida,
body.game-screen .fecha-de-la-partida .hora-partida {
  display: inline;
  white-space: nowrap;
}

/* Hard override: keep Consulta DM at the same size in all eras. */
body.game-screen .game-root .consulta-dm-holder {
  font-size: 100% !important;
}

body.game-screen .game-root .consulta-dm-input {
  font-family: "Atkinson Hyperlegible", "Atkinson Hyperlegible Next", "Noto Sans", "Verdana", "Trebuchet MS", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  font-size: clamp(0.98rem, 1.78vw, 1.26rem) !important;
  line-height: 1.18 !important;
  text-align: center !important;
  padding: 0.12cm 0.35em 0.08cm 0.35em !important;
}

body.game-screen .game-root .consulta-dm-hint {
  font-family: "Atkinson Hyperlegible", "Atkinson Hyperlegible Next", "Noto Sans", "Verdana", "Trebuchet MS", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  font-size: clamp(1.02rem, 1.8vw, 1.35rem) !important;
  line-height: 1.1 !important;
  text-align: center !important;
  justify-content: center !important;
}

body.game-screen .game-root .consulta-dm-hint-text {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  font-size: inherit !important;
  text-align: center !important;
}

body.game-screen .game-root .consulta-dm-presets {
  top: calc(-1 * var(--dm-stack-spacing) + 0.36cm) !important;
  left: calc(50% + (var(--dm-logo-size) / 2) + 0.42cm) !important;
  transform: none !important;
  width: 7cm !important;
  min-width: 7cm !important;
  max-width: 7cm !important;
  text-wrap: pretty;
}

body.game-screen .game-root .consulta-dm-preset-trigger {
  font-family: "Atkinson Hyperlegible", "Atkinson Hyperlegible Next", "Noto Sans", "Verdana", "Trebuchet MS", sans-serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
  white-space: normal;
  overflow-wrap: anywhere;
}

body[data-era].game-screen .game-root .consulta-dm-hint,
body[data-era].game-screen .game-root .consulta-dm-hint-text {
  font-family: "Atkinson Hyperlegible", "Atkinson Hyperlegible Next", "Noto Sans", "Verdana", "Trebuchet MS", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
}

/* Final lock (1920 baseline): keep DM/Prophecy anchors stable. */
body.game-screen {
  --dm-logo-size: 150px;
  --dm-stack-spacing: 10.35rem;
  --dm-anchor-top: calc(var(--audio-hud-top) + 2rem + 2cm);
  --dm-anchor-left: -355px;
  --notes-gap-from-query: calc(9rem - 2cm);
  --notes-width: 260px;
  --notes-max-width: 320px;
  --notes-anchor-left: var(--dm-anchor-left);
  --notes-center-x: calc(var(--notes-anchor-left) + (var(--notes-width) / 2));
  --notes-right-cutoff-x: -112px;
  --profecia-top-shift: -0.85rem;
  --profecia-left-gap: 1rem;
  --profecia-max-width: 420px;
}

/* Global prophecy typography: same in all eras. */
body.game-screen .profecia,
body.game-screen .profecia span {
  font-family: "Fredericka the Great" !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: clamp(0.7rem, 1.6vw, 0.95rem) !important;
  text-align: center !important;
  color: rgba(30, 16, 10, 0.82) !important;
  text-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  -webkit-text-stroke: 0 transparent !important;
}

body.game-screen .profecia span {
  display: block !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center !important;
  line-height: 1.22;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

.ambient-lotus-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9991;
}

.ambient-lotus {
  position: absolute;
  width: 5.5rem;
  height: 5.5rem;
  opacity: 0;
  filter: none;
  transition: opacity 600ms ease, transform 900ms ease;
  animation: ambient-lotus-pulse 6s ease-in-out infinite alternate;
}

.ambient-lotus.is-visible {
  opacity: 1;
}

.ambient-lotus.is-fading {
  opacity: 0;
}

.ambient-lotus img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none !important;
}

body[data-element-theme="nibbaana"] .ambient-lotus img {
  filter:
    drop-shadow(0 0 12px rgba(255, 245, 200, 0.9))
    drop-shadow(0 0 22px rgba(255, 255, 255, 0.6)) !important;
}

@keyframes ambient-lotus-pulse {
  0% { transform: scale(0.92); }
  100% { transform: scale(1.06); }
}

/* Reusable lotus selection animation (no UI hook by default) */
.lotus-selection-anim {
  position: absolute;
  width: 5rem;
  height: 5rem;
  pointer-events: none;
  display: inline-block;
}

.lotus-selection-anim img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.65));
}

.lotus-selection-anim.is-playing .lotus-frame-1 {
  animation: lotus-frame-pop 1.8s linear forwards;
}
.lotus-selection-anim.is-playing .lotus-frame-2 {
  animation: lotus-frame-pop 1.8s linear forwards;
  animation-delay: 0.44s;
}
.lotus-selection-anim.is-playing .lotus-frame-element {
  animation: lotus-frame-element 1.8s linear forwards;
  animation-delay: 0.88s;
}

@keyframes lotus-frame-pop {
  0% { opacity: 1; }
  18% { opacity: 1; }
  30% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes lotus-frame-element {
  0% { opacity: 1; }
  100% { opacity: 1; }
}

/* Pantalla de Engranajes (Codex > Cargar > Reencarnar > Ir a Calibrar) */
.codex-holo.is-gear-calibration {
  --codex-gear-machine-width: min(54vw, 920px);
  --codex-gear-machine-height: min(56vh, 600px);
  --codex-gear-small-x: calc(22% + 4.5cm);
  --codex-gear-small-y: calc(57% - 4cm);
  --codex-gear-large-x: calc(63% + 3cm);
  --codex-gear-large-y: calc(57% - 1cm);
  --codex-gear-top-right-x: calc(88% + 3.9cm);
  --codex-gear-top-right-y: calc(14% - 0.9cm);
  --codex-valvula-x: calc(12% - 1.5cm);
  --codex-valvula-y: calc(80% - 1cm);
}

.codex-holo.is-gear-calibration .codex-holo-panel > * {
  opacity: 0 !important;
  pointer-events: none !important;
}

.codex-holo.is-gear-calibration .codex-holo-panel-left,
.codex-holo.is-gear-calibration .codex-holo-panel-right,
.codex-holo.is-gear-calibration .codex-holo-beam,
.codex-holo.is-gear-calibration .codex-archive-progress {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

.codex-holo.is-gear-calibration .codex-holo-control,
.codex-holo.is-gear-calibration .codex-holo-decor {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 7 !important;
  top: 50% !important;
  width: clamp(48px, 4.8vw, 72px) !important;
  animation: codex-holo-control-drift 3.6s ease-in-out infinite !important;
}

/* Keep AlphaOmega in its larger dedicated size while still inheriting codex-holo-control visuals. */
.codex-holo.is-gear-calibration .codex-gear-alphaomega.codex-holo-control {
  width: clamp(118px, 9vw, 168px) !important;
  top: 50% !important;
}

.codex-holo.is-gear-calibration .codex-holo-decor-left {
  left: calc(50% - min(40vw, 640px) - 12px) !important;
}

.codex-holo.is-gear-calibration .codex-holo-decor-right {
  left: calc(50% + min(40vw, 640px) + 12px) !important;
}

.codex-holo.is-gear-calibration .codex-holo-decor-glyph {
  --codex-neon-orange-rgb: 255, 117, 26;
  width: 210% !important;
  height: 210% !important;
  background-color: rgba(var(--codex-neon-orange-rgb), 0.95) !important;
  opacity: 0.5 !important;
  filter:
    saturate(1.18)
    brightness(1.14)
    contrast(1.1)
    drop-shadow(0 0 10px rgba(var(--codex-neon-orange-rgb), 0.62)) !important;
  animation: codex-floating-glyph-holo 2.4s ease-in-out infinite !important;
}

/* En calibracion de engranajes, quitar el "velo negro" de los paneles sin alterar el flujo. */
.codex-holo.is-gear-calibration .codex-holo-panel {
  background: transparent !important;
  box-shadow: none !important;
  border-color: rgba(118, 215, 255, 0.22) !important;
}

.codex-gears-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  animation: codex-gears-hologram-reveal 3000ms linear forwards;
}

.codex-gears-overlay.is-layout-fallback .codex-gears-machine {
  width: min(92vw, 1120px);
  height: min(82vh, 760px);
}

.codex-gears-overlay.is-layout-fallback .codex-gear-small {
  left: 27%;
  top: 56%;
}

.codex-gears-overlay.is-layout-fallback .codex-gear-large {
  left: 63%;
  top: 58%;
}

.codex-gears-overlay.is-layout-fallback .codex-gear-top-right {
  left: 84%;
  top: 20%;
}

.codex-gears-overlay.is-layout-fallback .codex-valvula-zone {
  left: 16%;
  top: 80%;
}

.codex-gears-overlay.is-layout-fallback .codex-holo.is-gear-calibration .codex-gear-keywords,
.codex-gears-overlay.is-layout-fallback .codex-gear-keywords {
  left: 14px;
  top: 14px;
  width: min(30vw, 360px);
}

.codex-holo.is-gear-calibration .codex-gears-overlay::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 16%;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(102, 240, 255, 0) 0%,
      rgba(102, 240, 255, 0.16) 42%,
      rgba(102, 240, 255, 0.38) 52%,
      rgba(102, 240, 255, 0.16) 62%,
      rgba(102, 240, 255, 0) 100%
    );
  mix-blend-mode: screen;
  filter: blur(1px);
  opacity: 0;
  transform: translateY(-120%);
  animation: codex-gears-hologram-scan 3000ms linear forwards;
}

.codex-gears-machine {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--codex-gear-machine-width);
  height: var(--codex-gear-machine-height);
  transform: translate(-50%, -50%);
}

.codex-gear-alphaomega {
  position: absolute;
  left: calc(50% + min(40vw, 640px) + 12px);
  top: 50%;
  z-index: 8;
  width: clamp(118px, 9vw, 168px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  overflow: visible;
  isolation: isolate;
  transform: translate(-50%, -50%);
  animation: codex-holo-control-drift 3.6s ease-in-out infinite;
}

.codex-gear-alphaomega:focus,
.codex-gear-alphaomega:focus-visible {
  outline: none;
  box-shadow: none;
}

.codex-gear-alphaomega[aria-disabled="true"],
.codex-gear-alphaomega:disabled {
  cursor: default;
  opacity: 0.5;
}

.codex-gear-alphaomega-glyph {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.codex-gear-alphaomega .codex-floating-glyph-art {
  --codex-neon-orange-rgb: 255, 117, 26;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--codex-neon-orange-rgb), 0.95);
  opacity: 0.5;
  filter:
    saturate(1.18)
    brightness(1.14)
    contrast(1.1)
    drop-shadow(0 0 10px rgba(var(--codex-neon-orange-rgb), 0.62));
  animation: codex-floating-glyph-holo 2.4s ease-in-out infinite;
}

.codex-gear-alphaomega:hover .codex-floating-glyph-art,
.codex-gear-alphaomega:focus-visible .codex-floating-glyph-art {
  animation: none;
  filter:
    saturate(1.42)
    brightness(1.32)
    contrast(1.16)
    drop-shadow(0 0 16px rgba(255, 178, 94, 0.9))
    drop-shadow(0 0 28px rgba(255, 86, 26, 0.58));
  opacity: 0.82;
}

.codex-gear {
  position: absolute;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  user-select: none;
  touch-action: none;
}

.codex-holo.is-gear-calibration .codex-gear-small::before,
.codex-holo.is-gear-calibration .codex-gear-large::before,
.codex-holo.is-gear-calibration .codex-gear-top-right::before {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(102, 240, 255, 0.2) 0%,
      rgba(102, 240, 255, 0.1) 36%,
      rgba(102, 240, 255, 0.04) 62%,
      rgba(102, 240, 255, 0) 100%
    );
  filter: blur(8px);
  transform: scale(1.06);
  z-index: -1;
  pointer-events: none;
}

.codex-gear-rotor {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-origin: 50% 50%;
}

.codex-gear-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.codex-gear-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.codex-gear-small {
  width: clamp(252px, 22.4vw, 378px);
  left: var(--codex-gear-small-x);
  top: var(--codex-gear-small-y);
  z-index: 3;
  pointer-events: none;
}

.codex-gear-large {
  width: clamp(392px, 37.8vw, 630px);
  left: var(--codex-gear-large-x);
  top: var(--codex-gear-large-y);
  z-index: 2;
}

.codex-gear-top-right {
  width: clamp(210px, 19.6vw, 336px);
  left: var(--codex-gear-top-right-x);
  top: var(--codex-gear-top-right-y);
  z-index: 1;
  opacity: 0.9;
}

.codex-holo.is-gear-calibration .codex-gear-small .codex-gear-art,
.codex-holo.is-gear-calibration .codex-gear-large .codex-gear-art,
.codex-holo.is-gear-calibration .codex-gear-top-right .codex-gear-art {
  animation: neon-flicker 6s infinite;
}

.codex-holo.is-gear-calibration .codex-gear-small .codex-gear-art {
  animation-delay: -0.9s;
}

.codex-holo.is-gear-calibration .codex-gear-large .codex-gear-art {
  animation-delay: -2.6s;
}

.codex-holo.is-gear-calibration .codex-gear-top-right .codex-gear-art {
  animation-delay: -4.1s;
}

.codex-valvula-zone {
  position: absolute;
  left: var(--codex-valvula-x);
  top: var(--codex-valvula-y);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: clamp(10px, 1vw, 16px);
  z-index: 4;
}

.codex-valvula {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  user-select: none;
  touch-action: none;
}

.codex-valvula-bottom-left {
  position: relative;
  width: clamp(195px, 18vw, 315px);
  left: auto;
  top: auto;
  transform: none;
  z-index: 2;
  opacity: 0.85;
  pointer-events: auto;
  cursor: grab;
}

.codex-valvula-intro-hint {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 1.15cm);
  transform: translateX(-50%);
  width: min(16vw, 290px);
  text-align: center;
  color: #ff8a00;
  text-shadow: 0 0 12px #ff8a00;
  font: 700 clamp(0.9rem, 1.05vw, 1.15rem) / 1.2 "Cascadia Code", "Fira Code", "JetBrains Mono", "Consolas", monospace;
  pointer-events: none;
  animation: codex-valvula-hint-blink 3.4s ease-in-out infinite;
}

.codex-gears-overlay.is-valvula-intro .codex-gear-center,
.codex-gears-overlay.is-valvula-intro .codex-gear-keywords {
  opacity: 0;
  visibility: hidden;
}

.codex-gears-overlay:not(.is-valvula-intro) .codex-valvula-intro-hint {
  opacity: 0;
  visibility: hidden;
}

@keyframes codex-valvula-hint-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.codex-holo.is-gear-calibration .codex-valvula-bottom-left .codex-gear-art {
  --codex-neon-orange-rgb: 255, 117, 26;
  opacity: 0.7;
  filter:
    saturate(1.18)
    brightness(1.14)
    contrast(1.1)
    drop-shadow(0 0 10px rgba(var(--codex-neon-orange-rgb), 0.62))
    drop-shadow(0 0 18px rgba(var(--codex-neon-orange-rgb), 0.28));
}

.codex-valvula-bottom-left:active {
  cursor: grabbing;
}

.codex-gear-keywords {
  width: min(18vw, 320px);
  color: #c8fbff;
  text-shadow: 0 0 8px #67efff;
  font-family: "Segoe UI", sans-serif;
  pointer-events: auto;
}

.codex-holo.is-gear-calibration .codex-gear-keywords {
  position: absolute;
  left: calc(18px - 4.5cm);
  top: calc(18px + 0.5cm);
  width: min(16vw, 300px);
  max-height: calc(100% - 36px);
  overflow: auto;
  z-index: 7;
}

.codex-gear-keywords-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
  pointer-events: auto;
}

.codex-gear-style-button {
  width: 100%;
  font-size: clamp(0.82rem, 0.92vw, 1rem);
  line-height: 1.15;
  text-align: left;
  padding-left: 0.7rem;
  pointer-events: auto;
}

.codex-gear-center [data-codex-gear-year],
.codex-gear-center [data-codex-gear-era],
.codex-gear-center [data-codex-gear-top-era] {
  color: #ff8a00;
  text-shadow: 0 0 10px #ff8a00;
  font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", "Consolas", monospace;
  font-weight: 700;
  text-align: center;
}

.codex-holo.is-gear-calibration .codex-gear-center [data-codex-gear-year],
.codex-holo.is-gear-calibration .codex-gear-center [data-codex-gear-era],
.codex-holo.is-gear-calibration .codex-gear-center [data-codex-gear-top-era] {
  --codex-neon-orange-rgb: 255, 117, 26;
  color: rgba(var(--codex-neon-orange-rgb), 1);
  opacity: 1;
  text-shadow:
    0 0 10px rgba(var(--codex-neon-orange-rgb), 0.62),
    0 0 22px rgba(var(--codex-neon-orange-rgb), 0.34);
  animation: codex-gear-text-levitate 3.6s ease-in-out infinite;
}

.codex-gear-center [data-codex-gear-year] {
  font-size: clamp(1.4rem, 2.52vw, 2.03rem);
}

.codex-gear-center [data-codex-gear-era] {
  font-size: clamp(1.274rem, 2.093vw, 1.82rem);
  padding: 0 22%;
  transform: translateY(0.5cm);
}

.codex-gear-center [data-codex-gear-top-era] {
  font-size: clamp(0.78rem, 1.2vw, 1.05rem);
  padding: 0 24%;
}

@keyframes codex-gear-text-levitate {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes codex-gears-hologram-reveal {
  0% {
    clip-path: inset(0 0 100% 0);
    opacity: 0.15;
  }
  18% {
    opacity: 0.55;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@keyframes codex-gears-hologram-scan {
  0% {
    opacity: 0;
    transform: translateY(-120%);
  }
  8% {
    opacity: 0.95;
  }
  85% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translateY(620%);
  }
}