@font-face {
  font-family: system-mono;
  src: local("Consolas"), local("Courier New");
}

:root {
  --bg: #101018;
  --border: #f8f04a;
  --ink: #f7f7f7;
  --muted: #b7b7b7;
  --accent: #00f0ff;
  --panel: #19192a;
  --button: #24244a;
  --button-active: #493c8f;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at top, #222244 0%, #101018 55%, #05050a 100%);
  color: var(--ink);
  font-family: "Courier New", system-mono, monospace;
}

body {
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 10px;
}

.game-shell {
  width: min(560px, 100%);
  height: calc(var(--app-height, 100vh) - 20px);
  border: 5px solid var(--border);
  background: #090914;
  box-shadow: 0 0 0 5px #32327a, 0 0 30px rgba(0, 240, 255, .25);
  display: flex;
  flex-direction: column;
}

.game-header {
  border-bottom: 3px solid var(--border);
  padding: 10px;
  text-align: center;
  background: #161632;
}

.brand {
  font-size: .75rem;
  color: var(--accent);
  letter-spacing: 2px;
}

h1 {
  margin: 6px 0 0;
  font-size: 1.25rem;
  color: var(--border);
  text-shadow: 2px 2px #000;
}

.hidden {
  display: none !important;
}

.start-menu {
  flex: 1;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

.cover-title {
  color: var(--border);
  font-size: 2rem;
  line-height: 1.1;
  font-weight: bold;
  text-shadow: 3px 3px #000;
  margin-bottom: 8px;
}

.cover-text {
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 12px;
}

.big-button {
  width: 100%;
  padding: 14px;
  font-size: 1rem;
}

.secondary {
  background: #171738;
}

.save-status {
  min-height: 1.2em;
  color: var(--accent);
  font-size: .85rem;
}

.game-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.screen {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px;
  line-height: 1.5;
  font-size: .96rem;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: pre-wrap;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.room-title {
  color: var(--border);
  font-weight: bold;
  display: block;
  margin-bottom: 6px;
}

.response {
  color: var(--ink);
  display: block;
  margin-bottom: 10px;
}

.room-text {
  display: block;
  font-size: .96rem;
  line-height: 1.5;
}

.command-echo {
  color: var(--accent);
  display: block;
  margin: 12px 0 6px;
}

.separator {
  color: #6969c8;
  display: block;
  margin: 10px 0;
}

.story-paragraph {
  display: block;
  margin: 0;
}

.story-paragraph + .story-paragraph {
  margin-top: .65em;
}

.hud-room-title {
  display: none;
}

.screen .intro-text > .story-paragraph + .story-paragraph {
  margin-top: 14px;
}

.typewriter-run {
  position: relative;
  visibility: visible;
}

/* Evita que el texto completo se pinte un instante antes de comenzar el typewriter. */
.typewriter-pending {
  visibility: hidden;
}

.typewriter-run .clickable-word {
  pointer-events: none;
}

.typewriter-run::after {
  content: none;
  display: none;
}

@keyframes caretBlink {
  50% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .typewriter-run {
    animation: none;
  }

  .typewriter-run::after {
    display: none;
  }
}

/* Garantiza la cuadrícula del pie frente a reglas heredadas de la portada anterior. */
.start-menu .home-footer-nav .menu-tools > #accountButton,
.start-menu .home-footer-nav .menu-tools > #howToPlayButton,
.start-menu .home-footer-nav .menu-tools > #soundButton,
.start-menu .home-footer-nav .menu-tools > #imageToggleButton {
  grid-column: auto !important;
}

/* V98: portada editorial premium de THE POCKET FILES. */
.game-shell:has(> .start-menu:not(.hidden)) {
  width: min(980px, calc(100% - 24px)) !important;
  border: 1px solid rgba(200, 155, 75, .22) !important;
  background: #080d12 !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .42) !important;
}

.start-menu {
  --home-bg: #080d12;
  --home-panel: #0d131b;
  --home-cream: #f1e6d2;
  --home-muted: #8f98a7;
  --home-gold: #c89b4b;
  --home-gold-bright: #d6aa59;
  --home-green: #7fb35a;
  position: relative;
  isolation: isolate;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--home-cream);
  background:
    radial-gradient(circle at 88% 7%, rgba(200, 155, 75, .065), transparent 27%),
    var(--home-bg) !important;
  text-align: left !important;
}

.start-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .16;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(255,255,255,.008) 5px 6px);
  pointer-events: none;
}

.home-header {
  position: relative;
  z-index: 12;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 13px clamp(18px, 4vw, 40px);
  border-bottom: 1px solid rgba(200, 155, 75, .25);
  background: rgba(8, 13, 18, .97);
}

.home-brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.home-brand-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  color: var(--home-gold);
}

.home-brand-icon svg,
.home-section-folder svg,
.home-tool-button svg {
  display: block;
  width: 100%;
  height: 100%;
}

.home-brand-copy {
  display: grid;
  gap: 5px;
}

.home-brand-copy strong,
.home-brand-copy small {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: .26em;
}

.home-brand-copy strong {
  color: var(--home-gold-bright);
  font-size: .78rem;
}

.home-brand-copy small {
  color: rgba(241, 230, 210, .68);
  font-size: .62rem;
}

.home-menu-button {
  display: grid;
  align-content: center;
  gap: 5px;
  width: 46px;
  min-width: 46px;
  height: 44px;
  min-height: 44px;
  padding: 8px 7px;
  border: 0;
  color: var(--home-gold);
  background: transparent;
  box-shadow: none;
}

.home-menu-button span {
  display: block;
  width: 27px;
  height: 2px;
  margin-left: auto;
  border-radius: 2px;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.home-menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.home-menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.home-menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.home-utility-drawer {
  position: absolute;
  top: 62px;
  right: clamp(14px, 4vw, 36px);
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  width: min(310px, calc(100% - 28px));
  padding: 14px;
  border: 1px solid rgba(200, 155, 75, .42);
  border-radius: 8px;
  background: #0d131b;
  box-shadow: 0 16px 38px rgba(0,0,0,.52);
}

.home-utility-drawer > span {
  grid-column: 1 / -1;
  margin-bottom: 3px;
  color: var(--home-gold);
  font-size: .57rem;
  letter-spacing: .16em;
}

.home-utility-drawer > button {
  min-height: 42px;
  padding: 8px;
  border: 1px solid rgba(200, 155, 75, .18);
  border-radius: 4px;
  color: #c7c0b4;
  background: #111923;
  box-shadow: none;
  font-size: .62rem;
  letter-spacing: .08em;
}

.home-utility-drawer #installButton {
  grid-column: 1 / -1;
}

.home-utility-drawer .home-danger-action {
  grid-column: 1 / -1;
  border-color: rgba(177, 91, 78, .46);
  color: #d8a39a;
  background: rgba(83, 31, 28, .2);
}

.home-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(200,155,75,.28) transparent;
}

.home-landing {
  width: min(900px, 100%);
  margin: 0 auto;
  padding: clamp(38px, 6vw, 62px) clamp(20px, 4vw, 42px) 0;
}

.home-heading {
  margin: 0 0 28px 16px;
}

.home-heading > span {
  display: block;
  margin-bottom: 12px;
  color: var(--home-gold);
  font-size: .78rem;
  letter-spacing: .31em;
}

.home-heading h2 {
  margin: 0;
  color: var(--home-cream);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 7vw, 4.2rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .045em;
}

.continue-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 47%) minmax(0, 1fr);
  min-height: 472px;
  overflow: hidden;
  border: 1px solid rgba(200, 155, 75, .65);
  border-radius: 16px;
  background: var(--home-panel);
  cursor: pointer;
}

.continue-hero-media {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
}

.continue-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
  filter: saturate(.78) contrast(1.08) brightness(.68);
  transform: scale(1.015);
}

.continue-hero-media::after {
  content: "";
  position: absolute;
  inset: 0 0 0 38%;
  background:
    linear-gradient(90deg, var(--home-panel) 0, rgba(13,19,27,.84) 15%, rgba(13,19,27,.1) 57%),
    linear-gradient(0deg, rgba(8,13,18,.72), transparent 48%);
  pointer-events: none;
}

.continue-hero-content {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 40px 20px 30px 36px;
}

.continue-hero-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid rgba(200, 155, 75, .62);
  border-radius: 8px;
  color: var(--home-gold-bright);
  font-size: .63rem;
  letter-spacing: .19em;
}

.continue-hero-badge.is-complete {
  border-color: rgba(127, 179, 90, .52);
  color: var(--home-green);
}

.continue-hero h3 {
  max-width: 360px;
  margin: 27px 0 15px;
  color: var(--home-cream);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.08;
}

.continue-hero p {
  max-width: 355px;
  margin: 0;
  color: rgba(241, 230, 210, .68);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.58;
}

.continue-hero-progress {
  width: min(360px, 100%);
  margin-top: auto;
  padding-top: 28px;
}

.continue-hero-progress-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--home-gold);
  font-size: .64rem;
  letter-spacing: .14em;
}

.continue-hero-progress-copy strong {
  font-weight: 400;
}

.continue-hero-progress-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(14px, 1fr);
  gap: 5px;
}

.continue-hero-progress-track span {
  height: 7px;
  border-radius: 999px;
  background: rgba(143, 152, 167, .2);
}

.continue-hero-progress-track span.done {
  background: linear-gradient(90deg, #c28d3d, #e0b565);
}

.continue-hero-button {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 62px;
  margin-top: 28px;
  padding: 12px 20px;
  border: 1px solid #e0b565;
  border-radius: 9px;
  color: #17120a;
  background:
    linear-gradient(180deg, rgba(255,255,255,.17), transparent 48%),
    #cda04e;
  box-shadow: inset 0 0 0 2px rgba(92,58,15,.16);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .13em;
  transition: filter 180ms ease, transform 180ms ease;
}

.continue-hero-button > span:last-child {
  position: absolute;
  right: 28px;
  font-size: 1.5rem;
  font-weight: 400;
}

.continue-hero-button:hover,
.continue-hero-button:focus-visible {
  filter: brightness(1.08);
}

.continue-hero-button:active {
  transform: translateY(1px);
}

.start-menu .menu-content {
  display: block !important;
  width: min(900px, 100%);
  min-height: auto !important;
  margin: 0 auto;
  padding: 46px clamp(20px, 4vw, 42px) 38px !important;
  overflow: visible !important;
}

.start-menu .episode-panel {
  min-height: auto;
  overflow: visible;
  padding: 0;
}

.start-menu .section-heading {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0 14px 18px;
}

.home-section-folder {
  width: 35px;
  height: 35px;
  color: var(--home-gold);
}

.home-section-copy {
  display: grid;
  gap: 5px;
}

.start-menu .episode-title {
  color: var(--home-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .24em;
}

.home-section-copy small {
  color: rgba(241, 230, 210, .55);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .86rem;
}

.start-menu .episode-count {
  min-height: 40px;
  padding: 6px 0 6px 10px;
  border: 0;
  color: var(--home-gold);
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: .62rem;
  letter-spacing: .12em;
}

.start-menu .archive-carousel {
  display: grid;
  grid-auto-flow: row;
  gap: 18px;
  margin: 0;
  overflow: visible;
}

.start-menu .home-archive-card {
  display: grid;
  grid-template-columns: minmax(250px, 42%) minmax(0, 1fr);
  gap: 0;
  min-height: 330px;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(200, 155, 75, .38) !important;
  border-radius: 16px !important;
  background: #0d131b !important;
  box-shadow: none !important;
  cursor: pointer;
}

.start-menu .home-archive-card:focus-visible,
.home-initiation-card:focus-visible {
  outline: 1px solid rgba(224, 181, 101, .8);
  outline-offset: 3px;
}

.home-archive-visual {
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid rgba(200, 155, 75, .36);
}

.home-archive-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.68) contrast(1.05) brightness(.69) sepia(.08);
  transition: filter 180ms ease, transform 180ms ease;
}

.home-archive-card:hover .home-archive-visual img {
  filter: saturate(.8) contrast(1.05) brightness(.75);
  transform: scale(1.012);
}

.home-archive-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px 32px 24px;
}

.home-archive-card .archive-number {
  display: block;
  color: var(--home-gold) !important;
  font-size: .67rem !important;
  letter-spacing: .14em;
}

.home-archive-card .archive-name {
  margin: 15px 0 9px !important;
  color: var(--home-cream);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 4vw, 2.55rem) !important;
  font-weight: 400;
  line-height: 1.05;
}

.home-archive-card .archive-meta {
  color: rgba(241, 230, 210, .6) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .93rem !important;
  line-height: 1.52;
}

.home-archive-card .archive-count {
  color: rgba(241, 230, 210, .65) !important;
}

.archive-rule {
  display: block;
  width: 48px;
  height: 1px;
  margin: 18px 0;
  background: rgba(200, 155, 75, .48);
}

.home-archive-card .archive-description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.home-archive-card .archive-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}

.home-archive-card .archive-state {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid rgba(127, 179, 90, .58);
  border-radius: 7px;
  color: var(--home-green);
  font-size: .62rem;
  letter-spacing: .16em;
}

.home-archive-card .archive-state::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-radius: 50%;
  background: currentColor;
}

.home-archive-card .archive-open-button,
.home-initiation-card > .archive-open-button {
  display: grid !important;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  color: rgba(241, 230, 210, .7) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.7rem !important;
}

.home-initiation-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 17px 19px;
  border: 1px solid rgba(200,155,75,.2);
  border-radius: 10px;
  color: rgba(241,230,210,.68);
  background: rgba(13,19,27,.58);
  cursor: pointer;
}

.home-initiation-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(127,179,90,.42);
  border-radius: 50%;
  color: var(--home-green);
}

.home-initiation-copy {
  display: grid;
  gap: 4px;
}

.home-initiation-copy strong {
  color: rgba(241,230,210,.75);
  font-size: .67rem;
  letter-spacing: .13em;
}

.home-initiation-copy small {
  color: var(--home-muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .82rem;
}

.start-menu .save-status {
  min-height: 1.4em;
  margin: 15px 0 0;
  color: var(--home-muted);
  font-size: .72rem;
  text-align: center;
}

.start-menu .save-status:not(:empty) {
  position: absolute;
  right: 16px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  left: 16px;
  z-index: 24;
  width: min(560px, calc(100% - 32px));
  min-height: 42px;
  margin: 0 auto;
  padding: 11px 14px;
  border: 1px solid rgba(200,155,75,.34);
  border-radius: 7px;
  color: var(--home-cream);
  background: rgba(13,19,27,.97);
  box-shadow: 0 10px 28px rgba(0,0,0,.42);
}

.home-footer-nav {
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
  display: block !important;
  padding: 10px max(14px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right)) !important;
  border: 0 !important;
  border-top: 1px solid rgba(200, 155, 75, .28) !important;
  background: rgba(8, 13, 18, .98) !important;
  box-shadow: none !important;
}

.home-footer-nav .menu-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: min(720px, 100%);
  margin: 0 auto;
}

.home-tool-button {
  position: relative;
  display: grid;
  place-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 49px;
  padding: 3px 8px;
  border: 0;
  color: rgba(241, 230, 210, .65);
  background: transparent;
  box-shadow: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .59rem;
  letter-spacing: .08em;
}

.home-tool-button + .home-tool-button::before {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 0;
  width: 1px;
  background: rgba(200, 155, 75, .24);
}

.home-tool-button svg {
  width: 25px;
  height: 25px;
  color: var(--home-gold);
}

.home-tool-button .home-tool-state {
  color: var(--home-green);
  font-weight: 600;
}

.home-tool-button:hover,
.home-tool-button:focus-visible {
  color: var(--home-cream);
}

.home-detail-cover {
  display: none;
}

.start-menu.is-detail-view .home-landing {
  display: none;
}

.start-menu.is-detail-view .home-detail-cover {
  display: block;
}

.start-menu.is-detail-view .home-header .home-menu-button {
  display: none;
}

.start-menu .home-header .cover-back-button {
  position: static;
  min-height: 38px;
  margin-left: auto;
  padding: 7px 10px;
  border-color: rgba(200,155,75,.35);
  color: var(--home-gold);
  background: transparent;
}

.start-menu.is-detail-view .menu-content {
  padding-top: 26px !important;
}

@media (max-width: 640px) {
  .game-shell:has(> .start-menu:not(.hidden)) {
    width: 100% !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .home-header {
    min-height: 58px;
    padding: 7px 15px;
  }

  .home-brand {
    gap: 10px;
  }

  .home-brand-icon {
    width: 31px;
    height: 31px;
  }

  .home-brand-copy strong {
    font-size: .68rem;
    letter-spacing: .2em;
  }

  .home-brand-copy small {
    font-size: .56rem;
    letter-spacing: .2em;
  }

  .home-menu-button {
    width: 44px;
    min-width: 44px;
  }

  .home-landing {
    padding: 20px 16px 0;
  }

  .home-heading {
    margin: 0 0 14px 5px;
  }

  .home-heading > span {
    margin-bottom: 7px;
    font-size: .64rem;
  }

  .home-heading h2 {
    font-size: clamp(1.82rem, 8.7vw, 2.25rem);
    letter-spacing: .015em;
    white-space: nowrap;
  }

  .continue-hero {
    display: block;
    min-height: 0;
    border-radius: 12px;
  }

  .continue-hero-media {
    position: relative;
    height: auto;
    aspect-ratio: 16 / 7;
  }

  .continue-hero-media img {
    object-position: center 46%;
  }

  .continue-hero-media::after {
    inset: auto 0 0;
    height: 42%;
    background: linear-gradient(0deg, var(--home-panel) 0, rgba(13,19,27,.56) 46%, transparent 100%);
  }

  .continue-hero-content {
    display: flex;
    padding: 14px 18px 16px;
  }

  .continue-hero-badge {
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 5px;
    font-size: .53rem;
    pointer-events: none;
  }

  .continue-hero h3 {
    margin: 12px 0 7px;
    font-size: clamp(1.72rem, 8.6vw, 2.2rem);
    line-height: 1.06;
  }

  .continue-hero p {
    max-width: 310px;
    font-size: .88rem;
    line-height: 1.4;
  }

  .continue-hero-progress {
    margin-top: 8px;
    padding-top: 0;
  }

  .continue-hero-progress-copy {
    margin-bottom: 6px;
    font-size: .58rem;
  }

  .continue-hero-progress-track {
    gap: 4px;
  }

  .continue-hero-progress-track span {
    height: 5px;
  }

  .continue-hero-button {
    min-height: 52px;
    margin-top: 17px;
    padding-block: 9px;
  }

  .start-menu .menu-content {
    padding: 18px 16px 24px !important;
  }

  .start-menu .section-heading {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 8px;
    margin: 0 4px 9px;
  }

  .home-section-folder {
    width: 29px;
    height: 29px;
  }

  .home-section-copy {
    gap: 2px;
  }

  .start-menu .episode-title {
    font-size: .62rem;
    letter-spacing: .17em;
  }

  .home-section-copy small {
    font-size: .78rem;
  }

  .start-menu .episode-count {
    font-size: .55rem;
  }

  .start-menu .home-archive-card {
    display: block;
    min-height: 0;
    border-radius: 12px !important;
  }

  .home-archive-visual {
    height: clamp(175px, 50vw, 225px);
    border-right: 0;
    border-bottom: 1px solid rgba(200,155,75,.28);
  }

  .home-archive-content {
    padding: 22px 20px 18px;
  }

  .home-archive-card .archive-name {
    font-size: 2rem !important;
  }

  .home-archive-card .archive-meta {
    font-size: .88rem !important;
  }

  .archive-rule {
    margin: 14px 0;
  }

  .home-footer-nav {
    padding-top: 5px !important;
    padding-bottom: calc(5px + env(safe-area-inset-bottom)) !important;
  }

  .home-tool-button {
    gap: 3px;
    min-height: 46px;
    padding-inline: 3px;
    color: rgba(241, 230, 210, .76);
    font-size: .625rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: .035em;
  }

  .home-tool-label {
    white-space: nowrap;
  }

  .home-tool-button svg {
    width: 22px;
    height: 22px;
  }

  .home-tool-button .home-tool-state {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 2px;
    overflow: hidden;
    border-radius: 50%;
    background: #727986;
    color: transparent;
    font-size: 0;
    vertical-align: 1px;
  }

  .home-tool-button .home-tool-state.is-enabled {
    background: var(--home-green);
  }

  .start-menu.is-detail-view .home-detail-cover {
    height: 190px;
    min-height: 190px;
    flex-basis: 190px;
  }
}

@media (max-width: 360px) {
  .home-brand-copy strong {
    font-size: .62rem;
    letter-spacing: .16em;
  }

  .home-heading h2 {
    font-size: clamp(1.65rem, 8.6vw, 1.82rem);
  }

  .continue-hero-media {
    aspect-ratio: 16 / 7;
  }

  .continue-hero-content {
    padding: 13px 14px 15px;
  }

  .continue-hero h3 {
    font-size: 1.68rem;
  }

  .continue-hero p {
    font-size: .84rem;
  }

  .start-menu .episode-count {
    display: block;
    font-size: .48rem;
    letter-spacing: .06em;
  }

  .start-menu .section-heading {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 6px;
  }

  .home-tool-button {
    font-size: .56rem;
    letter-spacing: .015em;
  }
}

/* La cabecera orienta por estancia; el nombre del archivo vive en su portada. */
@media (min-width: 768px) {
  .game-area:not(.hidden) .hud-room-title {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: rgba(214, 173, 69, .78);
    font-family: "Space Grotesk", Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }
}

/* Microfeedback de descubrimientos en la cabecera. */
.hud-progress {
  position: relative;
  overflow: visible;
}

#detailsCount {
  display: inline-block;
  position: relative;
}

.hud-score-previous {
  position: absolute;
  z-index: 2;
  color: inherit;
  font-weight: 700;
  line-height: normal;
  text-align: left;
  pointer-events: none;
  animation: hudScorePreviousOut 360ms ease-in both;
}

#detailsCount.is-score-entering {
  animation: hudScoreValueIn 420ms cubic-bezier(.2, .8, .2, 1) both;
}

.hud-score-gain {
  position: absolute;
  top: 50%;
  z-index: 3;
  color: #e1ba58;
  font-size: .62rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .03em;
  white-space: nowrap;
  pointer-events: none;
  animation: hudScoreGain 560ms ease-out both;
}

.hud-progress.is-score-increasing > .material-symbols-outlined {
  animation: hudScoreStarPulse 440ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes hudScorePreviousOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-7px); }
}

@keyframes hudScoreValueIn {
  from { opacity: 0; transform: translateY(6px) scale(1.12); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hudScoreGain {
  0% { opacity: 0; transform: translateY(-35%) scale(.86); }
  24% { opacity: 1; transform: translateY(-50%) scale(1); }
  70% { opacity: 1; transform: translateY(-62%) scale(1); }
  100% { opacity: 0; transform: translateY(-90%) scale(.94); }
}

@keyframes hudScoreStarPulse {
  0% { color: inherit; filter: none; transform: scale(1); }
  42% { color: #ffe39a; filter: drop-shadow(0 0 5px rgba(225, 186, 88, .7)); transform: scale(1.22) rotate(-7deg); }
  100% { color: inherit; filter: none; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hud-score-previous,
  .hud-score-gain {
    display: none;
  }

  #detailsCount.is-score-entering,
  .hud-progress.is-score-increasing > .material-symbols-outlined {
    animation: none;
  }
}

/* Mobile contextual play surface */
.mobile-utility-bar, .mobile-sheet, .action-feedback { display: none; }

@media (max-width: 767px) {
  :root { --mobile-gutter: clamp(14px, 4vw, 20px); }
  html, body { overflow: hidden; }
  body { padding: 0; background: #070812; }
  .game-shell { width: 100%; height: var(--app-height, 100dvh); min-height: 100dvh; border: 0; box-shadow: none; }
  .game-header { display: none; }
  .game-area { overflow: hidden; }
  .hud { flex: 0 0 54px; min-height: 54px; padding: 7px var(--mobile-gutter); border-bottom: 1px solid rgba(248,240,74,.42); background: #101225; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
  .hud-stat, .hud-objective { min-height: 40px; border: 1px solid rgba(248,240,74,.4); color: var(--border); background: transparent; font: inherit; font-size: .78rem; letter-spacing: .08em; padding: 7px 10px; }
  .hud-progress { justify-self: start; border: 0; padding-inline: 0; font-size: .95rem; }
  .hud-progress span { color: #f4b84c; }
  .hud-objective { justify-self: center; font-weight: 700; }
  .hud-desktop-stat, .hud-mode, .hud-menu-button { display: none !important; }
  .room-image-wrap { flex: 0 0 auto; padding: 0; border: 0; background: #080a16; }
  .room-image { display: block; width: 100%; height: clamp(150px, 34vw, 220px); object-fit: cover; image-rendering: pixelated; border: 0; }
  .room-image-tools { display: none; }
  .mission-strip { display: none; }
  .screen { flex: 1 1 auto; min-height: 0; padding: 20px var(--mobile-gutter) 14px; overflow-y: auto; font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; line-height: 1.6; letter-spacing: .01em; -webkit-overflow-scrolling: touch; }
  .screen .room-title { display: block; margin-bottom: 14px; color: var(--border); font-family: "Courier New", monospace; font-size: clamp(1.18rem, 5vw, 1.5rem); line-height: 1.2; letter-spacing: .08em; }
  .screen .separator { display: block; margin: 16px 0; color: rgba(248,240,74,.25); overflow: hidden; }
  .clickable-word { display: inline-block; min-height: 30px; margin: -3px -2px; padding: 3px 2px; color: #f4ca68; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; cursor: pointer; }
  .clickable-word:active, .clickable-word:focus-visible { border-radius: 4px; outline: 2px solid rgba(244,202,104,.75); background: rgba(244,202,104,.16); }
  .mobile-utility-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 0 0 auto; padding: 8px var(--mobile-gutter); border-top: 1px solid rgba(248,240,74,.25); background: #0d1020; }
  .mobile-utility-bar button { min-height: 50px; border: 1px solid rgba(248,240,74,.45); border-radius: 4px; background: #171a32; color: #f4ca68; font: inherit; font-size: .86rem; letter-spacing: .03em; }
  .mobile-utility-bar button:active { background: #34315e; }
  .mobile-utility-bar strong { color: var(--ink); }
  .command-panel.bottom-input { flex: 0 0 auto; padding: 8px var(--mobile-gutter) calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(248,240,74,.35); background: #0b0d1a; }
  .command-panel .control-deck { display: none; }
  .command-console { min-height: 52px; border: 1px solid rgba(248,240,74,.52); background: #11152a; }
  .command-console .prompt { padding-left: 12px; color: #f4ca68; font-size: 1.1rem; }
  .command-console input { min-width: 0; height: 50px; font-size: 1rem; color: var(--ink); }
  .command-console #clearButton, .command-console #sendButton { width: 48px; height: 48px; flex: 0 0 48px; }
  .command-console #sendButton { color: #111321; background: #f4ca68; }
  .dialogue-panel { flex: 0 0 auto; max-height: 52dvh; overflow-y: auto; margin: 0; padding: 16px var(--mobile-gutter); border: 0; border-top: 1px solid rgba(248,240,74,.4); border-radius: 0; background: transparent; }
  .dialogue-text { font-size: 1.08rem; line-height: 1.55; }
  .dialogue-option { min-height: 52px; padding: 12px 14px; font-size: .98rem; text-align: left; }
  .mobile-sheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; }
  .mobile-sheet.hidden { display: none; }
  .mobile-sheet-backdrop { position: absolute; inset: 0; background: rgba(2,3,10,.72); }
  .mobile-sheet-card { position: relative; width: 100%; max-height: min(78dvh, 620px); overflow-y: auto; padding: 22px var(--mobile-gutter) calc(24px + env(safe-area-inset-bottom)); border-top: 2px solid var(--border); border-radius: 16px 16px 0 0; background: #15162b; box-shadow: 0 -14px 35px rgba(0,0,0,.45); animation: sheet-in .2s ease-out; }
  .sheet-close { position: absolute; top: 12px; right: var(--mobile-gutter); width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: transparent; color: var(--ink); font-size: 1.7rem; line-height: 1; }
  .sheet-kicker { display: block; margin-bottom: 5px; color: #93a0c6; font-family: "Courier New", monospace; font-size: .72rem; letter-spacing: .14em; }
  .mobile-sheet h2 { margin: 0 48px 18px 0; color: var(--border); font-family: "Courier New", monospace; font-size: 1.25rem; letter-spacing: .06em; }
  .mobile-sheet p { margin: 0; color: #e6e7ee; font-size: 1.06rem; line-height: 1.55; }
  .sheet-actions, .sheet-items { display: grid; gap: 10px; }
  .sheet-actions button, .sheet-item { min-height: 54px; width: 100%; padding: 13px 15px; border: 1px solid rgba(244,202,104,.45); border-radius: 6px; background: #202143; color: #f4ca68; font: inherit; font-size: 1rem; text-align: left; }
  .sheet-actions button:active, .sheet-item:active { background: #3a376c; }
  .sheet-item strong { display: block; color: var(--ink); }
  .sheet-item small { color: #aeb2c8; }
  .inventory-empty { color: #aeb2c8; font-size: 1rem; }
  .progress-dots { margin: 14px 0 18px; color: #f4ca68; letter-spacing: .3em; }
  .action-feedback { position: fixed; z-index: 100; top: 68px; left: 50%; transform: translateX(-50%); padding: 9px 14px; border: 1px solid #f4ca68; border-radius: 20px; background: #25234b; color: #f4ca68; font-family: "Courier New", monospace; font-size: .82rem; box-shadow: 0 5px 20px rgba(0,0,0,.4); }
  .action-feedback:not(.hidden) { display: block; animation: feedback-in .35s ease-out; }
  @keyframes sheet-in { from { transform: translateY(24px); opacity: .5; } to { transform: translateY(0); opacity: 1; } }
  @keyframes feedback-in { from { transform: translate(-50%, -8px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
}

.scene-hotspot { position: absolute; z-index: 3; min-width: 44px; min-height: 44px; border: 0; background: transparent; cursor: pointer; }
.scene-hotspot:focus-visible { outline: 2px dashed var(--border); background: rgba(248,240,74,.12); }

.clickable-word {
  cursor: pointer;
  border-radius: 3px;
  padding: 0 1px;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.clickable-word:active {
  background: rgba(248, 240, 74, .25);
}

.response .clickable-word,
.final-narrative .clickable-word,
.dialogue-text .clickable-word {
  color: #f4e6b8;
  text-decoration: underline dotted rgba(215, 181, 109, .48);
  text-underline-offset: 3px;
}

.command-panel {
  flex: 0 0 auto;
  border-top: 3px solid var(--border);
  padding: 10px;
  background: var(--panel);
  z-index: 10;
}

.selected-verb {
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.prompt {
  color: var(--accent);
  font-weight: bold;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.icon-button {
  width: 16px;
  height: 16px;
  display: block;
  pointer-events: none;
}

input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #05050a;
  border: 2px solid #4a4a91;
  padding: 10px;
  outline: none;
}

input:focus {
  border-color: var(--accent);
}

button {
  font-family: inherit;
  font-weight: bold;
  color: var(--ink);
  background: var(--button);
  border: 2px solid #6969c8;
  padding: 10px;
  cursor: pointer;
}

button:active {
  background: var(--button-active);
  border-color: var(--border);
}

#clearButton {
  padding-left: 12px;
  padding-right: 12px;
}

.verb-grid,
.direction-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.direction-grid {
  grid-template-columns: repeat(4, 1fr);
}

.verb-grid button,
.direction-grid button {
  font-size: .82rem;
  padding: 10px 4px;
}

.direction-grid button {
  background: #202040;
}

.final {
  color: var(--border);
  font-weight: bold;
}

@media (max-width: 420px) {
  body {
    padding: 0;
  }

  .game-shell {
    height: var(--app-height, 100vh);
    min-height: 0;
    border-width: 4px;
  }

  .screen {
    font-size: .92rem;
  }

  .verb-grid,
  .direction-grid {
    gap: 6px;
  }

  .verb-grid button,
  .direction-grid button {
    font-size: .76rem;
  }

  .cover-title {
    font-size: 1.7rem;
  }
}

/* Keep contextual mobile controls above the legacy responsive layers. */
.hud-mode { display: none !important; }
@media (max-width: 767px) {
  html, body { overflow: hidden !important; height: 100% !important; }
  body { display: block !important; padding: 0 !important; }
  .game-shell { height: 100dvh !important; min-height: 0 !important; }
  .game-area { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; overflow: hidden !important; }
  .hud { position: relative; top: auto; z-index: 20; flex: 0 0 54px !important; }
  .mobile-utility-bar { display: grid !important; }
  .room-image-tools, .mission-strip, .command-panel.bottom-input .control-deck { display: none !important; }
  .room-image-wrap { flex: 0 0 auto !important; }
  .screen { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; padding-bottom: 18px; }
  .mobile-utility-bar { flex: 0 0 auto !important; }
  .command-panel.bottom-input { flex: 0 0 auto !important; max-height: none !important; padding: 8px var(--mobile-gutter) calc(8px + env(safe-area-inset-bottom)) !important; }
  .command-console { min-height: 52px !important; }
  .command-console input { height: 50px !important; font-size: 1rem !important; }
  .command-console #clearButton, .command-console #sendButton { width: 48px !important; height: 48px !important; min-height: 48px !important; }
  .screen { font-size: 1.08rem !important; line-height: 1.6 !important; }
  .mobile-sheet { display: flex !important; }
  .mobile-sheet.hidden { display: none !important; }
}


/* V6: HUD y acabado retro */
.game-shell {
  position: relative;
  overflow: hidden;
}

.game-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.035) 0px,
    rgba(255,255,255,.035) 1px,
    transparent 2px,
    transparent 4px
  );
  mix-blend-mode: screen;
  opacity: .35;
}

.hud {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  background: #05050a;
  border-bottom: 2px solid #32327a;
  color: var(--muted);
  font-size: .8rem;
}

.hud strong {
  color: var(--border);
}

.final-card {
  display: block;
  border: 2px solid var(--border);
  background: #11112a;
  padding: 12px;
  margin-top: 12px;
  color: var(--border);
}

.final-narrative {
  display: block;
  width: min(100%, 470px);
  margin: 0 auto;
  color: #d9deE7;
  font-size: .76rem;
  line-height: 1.5;
}

.final-card .final-title {
  display: block;
  font-size: 1.2rem;
  margin-bottom: 8px;
  color: var(--accent);
}

.final-card .final-stat {
  display: block;
  color: var(--ink);
  margin: 4px 0;
}

.final-card .final-note {
  display: block;
  margin-top: 10px;
  color: var(--muted);
}

.final-card .final-subtitle {
  display: block;
  margin-bottom: 8px;
  color: #f0e8d6;
}

.final-actions {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.final-actions button {
  min-height: 34px;
  border: 1px solid #3d465d;
  border-radius: 4px;
  background: #151a27;
  color: #e7ecf4;
  box-shadow: none;
  text-shadow: none;
}

.intro-card {
  display: grid;
  position: relative;
  gap: 6px;
  width: min(100%, 520px);
  margin: 0 auto 16px;
  padding: 14px 14px 13px;
  border-top: 1px solid #7c6640;
  border-bottom: 1px solid #2d3446;
  background:
    linear-gradient(180deg, rgba(215, 181, 109, .08), transparent 58%),
    #0d1119;
}

.intro-kicker {
  display: block;
  margin-bottom: 6px;
  color: #b89c66;
  font-size: .66rem;
  letter-spacing: .16em;
}

.intro-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}

.intro-actions.hidden {
  display: none;
}

.intro-actions.visible {
  opacity: 1;
  transform: translateY(0);
}

.intro-skip {
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid #364055;
  border-radius: 4px;
  color: #8f99ab;
  background: #101521;
  box-shadow: none;
  font-size: .52rem;
  letter-spacing: .08em;
}

.intro-begin {
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid #7c6640;
  border-radius: 4px;
  color: #17130b;
  background: #d7b56d;
  box-shadow: none;
  font-size: .52rem;
  letter-spacing: .08em;
  text-shadow: none;
}

.intro-title {
  display: block;
  margin-bottom: 8px;
  color: #efe3c9;
  font-size: 1.18rem;
  line-height: 1.22;
  font-weight: bold;
}

.intro-text {
  display: block;
  color: #aeb5c2;
  font-size: .97rem;
  line-height: 1.6;
  margin-bottom: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .command-echo,
  .response,
  .room-title {
    animation: textPop .08s linear;
  }

  @keyframes textPop {
    from { opacity: .35; transform: translateY(1px); }
    to { opacity: 1; transform: translateY(0); }
  }
}


/* V7: ajustes PWA / móvil instalado */
body {
  padding-top: max(10px, env(safe-area-inset-top));
  padding-right: max(10px, env(safe-area-inset-right));
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  padding-left: max(10px, env(safe-area-inset-left));
}

@media (display-mode: standalone) {
  body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: #090914;
  }

  .game-shell {
    border-radius: 0;
    box-shadow: none;
  }
}

@media (max-width: 420px) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-right: 0;
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: 0;
  }
}


/* V8: HUD con indicador de modo API */
.hud {
  flex-wrap: wrap;
}

.hud span {
  white-space: nowrap;
}

.hud {
  align-items: center;
}

.hud-mode {
  margin-left: auto;
}

.hud-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #3c4560;
  border-radius: 50%;
  color: #d9e0ef;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 55%),
    #111624;
}

.hud-menu-button .icon-button {
  width: 15px;
  height: 15px;
}

.hud-menu-button:hover,
.hud-menu-button:focus-visible {
  border-color: #6d7896;
  color: #fff3c8;
}


/* V9: modo backend */
#modeLabel {
  color: var(--accent);
}


/* V11: episodios jugables */
.episode-item:not(.selected):hover {
  border-color: #4a4a91;
}


/* V12: soporte de ilustraciones retro por habitación */
.room-image-wrap {
  position: relative;
  flex: 0 0 auto;
  padding: 8px 10px 0;
  background: #05050a;
}

.room-image-wrap.hidden-image {
  display: none;
}

.room-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  image-rendering: pixelated;
  border: 3px solid #32327a;
  background: #090914;
  box-shadow: inset 0 0 0 2px #000;
}

/* V40: biblioteca vertical de archivos */
.archive-carousel {
  display: grid;
  grid-auto-flow: row;
  grid-auto-columns: auto;
  gap: 10px;
  margin-bottom: 14px;
  overflow: visible;
  scroll-snap-type: none;
}

.archive-group-label {
  margin: 7px 2px 0;
  color: #687389;
  font-size: .65rem;
  letter-spacing: .18em;
}

.archive-group-label:first-child {
  margin-top: 0;
  color: var(--menu-gold);
}

.archive-library-card {
  gap: 12px;
  padding: 14px;
  border-color: #30394d;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.025), transparent 48%),
    #101621;
  cursor: default;
}

.archive-library-card.active {
  border-color: #4c5870;
  background:
    linear-gradient(135deg, rgba(215, 181, 109, .07), transparent 50%),
    #121925;
  box-shadow: none;
}

.archive-library-card.featured {
  padding: 16px;
  border-color: #8a7245;
  background:
    radial-gradient(circle at 100% 0, rgba(215,181,109,.14), transparent 42%),
    linear-gradient(180deg, rgba(215,181,109,.08), transparent 58%),
    #151923;
  box-shadow: inset 3px 0 var(--menu-gold), 0 8px 24px rgba(0,0,0,.2);
}

.archive-card-top,
.archive-progress-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.archive-library-card .archive-number {
  color: #a88d5b;
  font-size: .62rem;
}

.archive-state {
  flex: 0 0 auto;
  padding: 3px 6px;
  border: 1px solid #465166;
  border-radius: 999px;
  color: #8f9aaf;
  font-size: .52rem;
  letter-spacing: .09em;
}

.archive-library-card.featured .archive-state {
  border-color: #76633e;
  color: #d7b56d;
}

.archive-library-card .archive-name {
  margin-top: 2px;
  font-size: 1.12rem;
}

.archive-library-card.featured .archive-name {
  font-size: 1.32rem;
}

.archive-library-card .archive-count {
  color: #aab2c0;
}

.archive-progress {
  display: grid;
  gap: 6px;
  padding-top: 2px;
}

.archive-progress-copy {
  color: #7f899c;
  font-size: .58rem;
  letter-spacing: .12em;
}

.archive-progress-copy strong {
  color: #d7b56d;
  font-weight: normal;
}

.archive-progress-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.archive-progress-track span {
  height: 4px;
  border-radius: 999px;
  background: #30384a;
}

.archive-progress-track span.done {
  background: var(--menu-gold);
  box-shadow: 0 0 8px rgba(215,181,109,.25);
}

.archive-library-card .archive-open-button {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 12px;
  border-color: #465166;
  color: #dce1e9;
  background: #1b2331;
}

.archive-library-card.featured .archive-open-button {
  border-color: #9d814b;
  color: #17130b;
  background: #d7b56d;
}

.archive-detail-progress {
  margin-top: 5px;
  color: #a88d5b;
  font-size: .6rem;
  letter-spacing: .12em;
}

.archive-expedients-header {
  gap: 6px;
  margin-bottom: 4px;
}

.archive-back-button {
  width: max-content;
  min-height: 30px;
  margin-top: 5px;
  padding: 5px 9px;
  border-color: #39445a;
  color: #9aa5b8;
  background: #121824;
}

.episode-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.episode-item.completed {
  border-color: #3d4b42;
}

.episode-item.completed .episode-number,
.episode-badge.completed {
  color: #a9bd94;
}

.episode-badge.completed {
  border-color: #59684f;
}

@media (max-width: 520px) {
  .archive-library-card,
  .archive-library-card.featured {
    padding: 13px;
  }

  .archive-library-card .archive-meta {
    font-size: .76rem;
  }

  .episode-item .episode-badge {
    justify-self: end;
    margin-top: 0;
    min-width: 64px;
    font-size: .57rem;
  }
}

/* V43: la portada ya contiene el contexto del archivo */
.archive-detail-list-label {
  margin: 2px 2px 4px;
  color: #8c96aa;
  font-size: .62rem;
  letter-spacing: .18em;
}

.archive-expedients-panel {
  gap: 9px;
}

.room-reload-button {
  position: absolute;
  right: 18px;
  bottom: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(215, 181, 109, .72);
  border-radius: 50%;
  color: #f4deb0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .16), transparent 48%),
    rgba(9, 12, 20, .85);
  box-shadow:
    0 3px 10px rgba(0, 0, 0, .45),
    inset 0 1px rgba(255, 255, 255, .08);
}

.room-reload-button .icon-button {
  width: 18px;
  height: 18px;
}

.room-reload-button:hover,
.room-reload-button:focus-visible {
  color: #fff3c8;
  border-color: #e0c176;
}

.room-reload-button.spinning .icon-button {
  animation: roomReloadSpin .65s linear;
}

@keyframes roomReloadSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 420px) {
  .room-image-wrap {
    padding: 6px 8px 0;
  }

  .room-image {
    max-height: 156px;
    border-width: 2px;
  }

  .room-reload-button {
    right: 14px;
    bottom: 12px;
    width: 32px;
    height: 32px;
  }

  .selected-verb {
    font-size: .75rem;
  }
}

@media (max-height: 680px) {
  .room-image {
    max-height: 132px;
  }
}

@media (max-height: 590px) {
  .room-image-wrap {
    display: none;
  }
}


/* V15: modo móvil compacto centrado en lectura */
:root {
  --compact-border: #24244a;
}

.game-header {
  display: none;
}

.game-shell {
  border-width: 2px;
  box-shadow: 0 0 0 2px #202040, 0 0 18px rgba(0, 240, 255, .14);
}

.hud {
  padding: 4px 8px;
  font-size: .68rem;
  border-bottom: 1px solid #202040;
}

.room-image-wrap {
  padding: 4px 6px 0;
  background: #05050a;
}

.room-image {
  border: 0;
  box-shadow: none;
  max-height: 144px;
  background: #05050a;
}

.screen {
  padding: 10px 12px;
  line-height: 1.48;
  font-size: .98rem;
}

.room-title {
  margin-bottom: 6px;
}

.response {
  margin-bottom: 8px;
}

.command-echo {
  margin: 8px 0 4px;
}

.separator {
  margin: 6px 0;
}

.command-panel.compact {
  border-top: 1px solid #303060;
  padding: 6px;
}

.command-panel.compact .selected-verb {
  display: none;
}

.input-row {
  gap: 5px;
}

input {
  padding: 8px;
  font-size: .95rem;
  border-width: 1px;
}

button {
  border-width: 1px;
}

#clearButton,
#sendButton {
  padding: 8px 10px;
}

.quick-toolbar {
  display: grid;
  grid-template-columns: 1.4fr .8fr .9fr .9fr;
  gap: 5px;
  margin-top: 6px;
}

.quick-toolbar button {
  padding: 7px 4px;
  font-size: .72rem;
}

.quick-actions {
  margin-top: 6px;
}

.quick-actions.collapsed {
  display: none;
}

.verb-grid,
.direction-grid {
  gap: 5px;
  margin-top: 5px;
}

.verb-grid {
  grid-template-columns: repeat(3, 1fr);
}

.direction-grid {
  grid-template-columns: repeat(4, 1fr);
}

.verb-grid button,
.direction-grid button {
  padding: 7px 3px;
  font-size: .7rem;
}

/* Más pantalla útil en móvil real */
@media (max-width: 520px) {
  html, body {
    background: #05050a;
  }

  body {
    padding: 0;
  }

  .game-shell {
    width: 100%;
    height: var(--app-height, 100vh);
    border: 0;
    box-shadow: none;
  }

  .game-shell::after {
    opacity: .18;
  }

  .hud span:nth-child(3) {
    display: none;
  }

  .room-image-wrap {
    padding: 0;
  }

  .room-image {
    max-height: 156px;
  }

  .screen {
    padding: 9px 10px;
    line-height: 1.45;
    font-size: .96rem;
  }

  .command-panel.compact {
    padding: 5px;
  }

  .quick-toolbar {
    gap: 4px;
    margin-top: 5px;
  }

  .quick-toolbar button {
    min-height: 31px;
    padding: 6px 2px;
    font-size: .68rem;
  }

  input {
    padding: 7px;
    font-size: .92rem;
  }

  #clearButton,
  #sendButton {
    padding: 7px 9px;
  }

  .verb-grid button,
  .direction-grid button {
    min-height: 30px;
    padding: 5px 2px;
    font-size: .66rem;
  }

  .direction-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-height: 720px) {
  .room-image {
    max-height: 132px;
  }

  .hud {
    padding: 3px 6px;
  }

  .screen {
    font-size: .93rem;
    line-height: 1.42;
  }
}

@media (max-height: 580px) {
  .room-image-wrap {
    display: none;
  }
}

/* Menú inicial también más compacto en móvil */
@media (max-width: 520px) {
  .start-menu {
    padding: 12px 10px;
    gap: 8px;
    justify-content: flex-start;
    overflow-y: auto;
  }

  .cover-title {
    font-size: 1.4rem;
    margin-bottom: 0;
  }

  .cover-text {
    display: none;
  }

  .big-button {
    padding: 10px;
    font-size: .86rem;
  }
}


/* V16: limpieza visual e iconos */
.game-shell {
  border: 0;
  box-shadow: none;
}

.game-shell::before {
  display: none;
}

.cover-title {
  text-shadow: none;
}

.room-image {
  border: 0 !important;
  box-shadow: none !important;
}

.room-image-wrap {
  padding-top: 0;
}

button {
  border-color: #2c2c5a;
  box-shadow: none;
}

button:hover,
button:active {
  border-color: #4a4a91;
}

.input-row .prompt {
  color: #9aa0ff;
}

.quick-toolbar button,
.verb-grid button,
.direction-grid button {
  font-size: 1.05rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-toolbar button {
  min-height: 34px;
}

.verb-grid button,
.direction-grid button {
  min-height: 34px;
}

#quickToggleButton {
  font-size: 1rem;
}

.quick-actions:not(.collapsed)::before {
  content: "ACCIONES";
  display: block;
  font-size: .58rem;
  color: #7e86ff;
  letter-spacing: .08em;
  margin: 1px 0 4px;
}

@media (max-width: 520px) {
  .quick-toolbar {
    grid-template-columns: repeat(4, 1fr);
  }

  .quick-toolbar button,
  .verb-grid button,
  .direction-grid button {
    font-size: .98rem;
    min-height: 31px;
  }

  .screen {
    padding-top: 8px;
  }
}


/* V17: iconos en una fila e input pegado abajo */
.command-panel.bottom-input {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px 6px calc(5px + env(safe-area-inset-bottom));
}

.icon-strip,
.more-actions {
  display: grid;
  gap: 4px;
}

.icon-strip {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.more-actions {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.more-actions.collapsed {
  display: none;
}

.icon-strip button,
.more-actions button {
  min-height: 30px;
  padding: 4px 1px;
  font-size: .94rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#moreToggleButton {
  font-size: 1.15rem;
  font-weight: bold;
}

.nav-button.is-disabled {
  opacity: .35;
  pointer-events: none;
}

.bottom-input .input-row {
  margin-top: 0;
}

.bottom-input input {
  min-height: 34px;
}

.bottom-input #clearButton,
.bottom-input #sendButton {
  min-height: 34px;
}

.quick-toolbar,
.quick-actions,
.verb-grid,
.direction-grid {
  display: none;
}

@media (max-width: 520px) {
  .command-panel.bottom-input {
    padding: 4px 5px calc(4px + env(safe-area-inset-bottom));
    gap: 4px;
  }

  .icon-strip {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .more-actions {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .icon-strip button,
  .more-actions button {
    min-height: 28px;
    font-size: .86rem;
    padding: 3px 0;
  }

  .bottom-input input {
    min-height: 32px;
    padding: 6px 7px;
  }

  .bottom-input #clearButton,
  .bottom-input #sendButton {
    min-height: 32px;
    padding: 6px 8px;
  }

  .screen {
    padding-bottom: 8px;
  }
}

@media (max-width: 360px) {
  .icon-strip button,
  .more-actions button {
    font-size: .78rem;
  }

  .icon-strip {
    gap: 3px;
  }
}

/* V19: consola de juego */
.command-panel.bottom-input {
  --control-border: #414866;
  --control-surface: #151a27;
  --control-raised: #202738;
  --control-active: #2d374e;
  --control-accent: #d7b56d;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "console"
    "deck"
    "actions";
  gap: 5px;
  padding: 7px 9px calc(7px + env(safe-area-inset-bottom));
  border-top: 1px solid #343b51;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 24%),
    #0d111a;
  box-shadow: 0 -10px 28px rgba(0, 0, 0, .38);
}

.control-deck {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 10px;
  align-items: stretch;
}

.action-bank,
.navigation-bank {
  min-width: 0;
}

.control-label {
  display: block;
  margin: 0 0 5px 2px;
  color: #78839d;
  font-size: .58rem;
  line-height: 1;
  letter-spacing: .16em;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.secondary-action-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 5px;
}

.secondary-action-key {
  min-height: 30px;
  color: #cbd3e0 !important;
  background: #141b28 !important;
  font-size: .61rem;
}

.command-panel button {
  min-width: 0;
  border: 1px solid var(--control-border);
  border-radius: 5px;
  color: #e9edf5;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), transparent 50%),
    var(--control-raised);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .045),
    0 2px 0 #080b11;
  text-shadow: 0 1px #000;
  transition: transform 70ms ease, background-color 70ms ease, border-color 70ms ease;
}

.command-panel button:active {
  transform: translateY(1px);
  border-color: var(--control-accent);
  background: var(--control-active);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45);
}

.action-key {
  min-height: 37px;
  padding: 6px 3px;
  font-size: .7rem;
  letter-spacing: .045em;
}

.utility-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 3px;
}

.utility-strip button {
  min-height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border-color: #30384c;
  color: #aeb8ca;
  background: #141925;
  font-size: .76rem;
}

.utility-glyph {
  color: #9daac0;
  font-size: .76rem;
  line-height: 1;
}

.direction-pad {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 42px);
  grid-template-rows: repeat(2, 30px);
  justify-content: center;
  gap: 3px;
}

.direction-pad .nav-button {
  min-height: 0;
  padding: 0;
  color: var(--control-accent);
  font-size: .76rem;
}

.direction-pad .north {
  grid-column: 1;
  grid-row: 1;
}

.direction-pad .west {
  grid-column: 2;
  grid-row: 1;
}

.direction-pad .east {
  grid-column: 3;
  grid-row: 1;
}

.direction-pad .south {
  grid-column: 1;
  grid-row: 2;
}

.direction-pad .vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: #9daac0;
  font-size: .7rem;
}

.direction-pad .vertical small {
  font-family: inherit;
  font-size: .39rem;
  line-height: 1;
  letter-spacing: .03em;
}

.direction-pad .up {
  grid-column: 2;
  grid-row: 2;
}

.direction-pad .down {
  grid-column: 3;
  grid-row: 2;
}

.more-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding-top: 6px;
  border-top: 1px solid #282f40;
}

.more-actions.collapsed {
  display: none;
}

.more-actions button {
  min-height: 29px;
  padding: 5px 3px;
  color: #b8c1d1;
  background: var(--control-surface);
  font-size: .6rem;
}

.nav-button.is-disabled {
  opacity: .35;
  pointer-events: none;
}

.direction-pad .vertical.is-disabled {
  opacity: .28;
}

.bottom-input .input-row {
  grid-area: console;
  margin-top: 0;
}

.control-deck {
  grid-area: deck;
}

.more-actions {
  grid-area: actions;
}

.command-console {
  min-height: 42px;
  gap: 0;
  overflow: hidden;
  border: 1px solid #46516b;
  border-radius: 6px;
  background: #070a10;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, .72),
    0 1px rgba(255, 255, 255, .025);
}

.command-console .prompt {
  flex: 0 0 auto;
  padding: 0 0 0 11px;
  color: var(--control-accent);
  font-size: 1.05rem;
}

.command-console input {
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  color: #f0f2f6;
  background: transparent;
  caret-color: var(--control-accent);
}

.command-console input:focus {
  border: 0;
}

.command-console #clearButton,
.command-console #sendButton {
  align-self: stretch;
  min-height: 40px;
  border-width: 0 0 0 1px;
  border-radius: 0;
  box-shadow: none;
}

.command-console #clearButton {
  padding: 4px 8px;
  border-color: #2e3547;
  color: #7f899c;
  background: #10151f;
  font-size: 1rem;
  line-height: 1;
}

.command-console #sendButton {
  padding: 4px 11px;
  border-color: #75623d;
  color: #17130b;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 55%),
    var(--control-accent);
  text-shadow: 0 1px rgba(255, 255, 255, .2);
  font-size: 1rem;
  line-height: 1;
}

@media (max-width: 520px) {
  .command-panel.bottom-input {
    padding: 6px 7px calc(6px + env(safe-area-inset-bottom));
    gap: 5px;
  }

  .control-deck {
    grid-template-columns: minmax(0, 1fr) 136px;
    gap: 7px;
  }

  .action-key {
    min-height: 34px;
    font-size: .65rem;
  }

  .utility-strip button {
    font-size: .5rem;
  }

  .utility-strip .utility-button {
    font-size: .76rem;
  }

  #moreToggleButton {
    font-size: .5rem;
  }

  .direction-pad {
    grid-template-columns: repeat(3, 39px);
    grid-template-rows: repeat(2, 28px);
  }

  .more-actions button {
    font-size: .55rem;
  }

  .screen {
    padding-bottom: 8px;
  }
}

@media (max-width: 360px) {
  .control-deck {
    grid-template-columns: minmax(0, 1fr) 126px;
    gap: 5px;
  }

  .action-grid,
  .utility-strip {
    gap: 3px;
  }

  .action-key {
    font-size: .58rem;
  }

  .utility-strip button {
    font-size: .44rem;
  }

  .utility-strip .utility-button {
    font-size: .7rem;
  }

  #moreToggleButton {
    font-size: .44rem;
  }

  .direction-pad {
    grid-template-columns: repeat(3, 35px);
    grid-template-rows: repeat(2, 26px);
    gap: 2px;
  }

  .command-console #clearButton {
    display: none;
  }

  .command-console #sendButton {
    padding-inline: 8px;
  }
}

/* V23: portada editorial */
.start-menu {
  --menu-gold: #d7b56d;
  --menu-gold-soft: #9c814e;
  --menu-line: #31394d;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-align: left;
  background:
    radial-gradient(circle at 85% 12%, rgba(122, 91, 45, .12), transparent 32%),
    #090d15;
  scrollbar-width: thin;
  scrollbar-color: #394156 #090d15;
  overflow-x: hidden;
}

.cover-art {
  position: relative;
  min-height: 238px;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid #4b402d;
  background: #0b0e14;
}

.cover-art img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  filter: saturate(.82) contrast(1.06) brightness(.72);
  transform: scale(1.015);
}

.cover-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(5, 8, 13, .9) 0%, rgba(5, 8, 13, .62) 48%, rgba(5, 8, 13, .1) 100%),
    linear-gradient(0deg, rgba(9, 13, 21, .8) 0%, transparent 56%);
}

.cover-copy {
  width: min(76%, 390px);
  padding: 34px 28px 30px;
}

.series-mark {
  display: block;
  margin-bottom: 17px;
  color: var(--menu-gold);
  font-size: .74rem;
  letter-spacing: .18em;
}

.start-menu .cover-title {
  position: relative;
  margin: 0;
  color: #f0e8d6;
  font-size: clamp(2.15rem, 8vw, 3rem);
  line-height: .91;
  letter-spacing: -.055em;
  text-shadow: 0 3px 18px #000;
}

.start-menu .cover-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 18px;
  background: var(--menu-gold);
  box-shadow: 0 0 14px rgba(215, 181, 109, .4);
}

.start-menu .cover-text {
  max-width: 330px;
  margin: 13px 0 0;
  color: #aab0bb;
  font-size: .84rem;
  line-height: 1.55;
}

.demo-stamp {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 6px 8px 5px;
  border: 1px solid rgba(215, 181, 109, .72);
  color: var(--menu-gold);
  font-size: .66rem;
  letter-spacing: .18em;
  transform: rotate(2deg);
}

.menu-content {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 17px 20px calc(18px + env(safe-area-inset-bottom));
  overflow: hidden;
}

.episode-panel {
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: #394156 transparent;
}

.episode-panel::-webkit-scrollbar {
  width: 6px;
}

.episode-panel::-webkit-scrollbar-thumb {
  background: #394156;
}

.menu-dock {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #2a3141;
  background:
    linear-gradient(180deg, rgba(9, 13, 21, .24), rgba(9, 13, 21, .96) 16%),
    #090d15;
  box-shadow: 0 -12px 24px rgba(0, 0, 0, .24);
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.episode-title,
.episode-count {
  color: #7f899e;
  font-size: .74rem;
  letter-spacing: .14em;
}

.episode-count {
  color: #596277;
}

.episode-list {
  display: grid;
  gap: 6px;
}

.archive-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 84%);
  gap: 10px;
  margin-bottom: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.archive-carousel::-webkit-scrollbar {
  display: none;
}

.archive-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #3b4458;
  border-radius: 5px;
  scroll-snap-align: center;
  background:
    linear-gradient(180deg, rgba(215, 181, 109, .07), transparent 38%),
    #0f1520;
  text-align: left;
  cursor: pointer;
}

.archive-card.active {
  border-color: #8a7245;
  background:
    linear-gradient(180deg, rgba(215, 181, 109, .14), transparent 42%),
    #141b28;
  box-shadow: inset 3px 0 #d7b56d;
}

.archive-header {
  display: grid;
  gap: 5px;
}

.archive-number {
  color: #b89c66;
  font-size: .62rem;
  letter-spacing: .16em;
}

.archive-name {
  color: #f0e8d6;
  font-size: 1rem;
  line-height: 1.1;
}

.archive-meta {
  color: #8b95a8;
  font-size: .72rem;
  line-height: 1.4;
}

.archive-status {
  color: #6f7890;
  font-size: .62rem;
  letter-spacing: .12em;
}

.archive-actions {
  display: flex;
}

.archive-open-button,
.archive-back-button {
  width: 100%;
  min-height: 34px;
  border: 1px solid #8a7245;
  border-radius: 4px;
  color: #17130b;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 55%),
    #d7b56d;
  text-shadow: none;
  box-shadow: none;
  font-size: .66rem;
  letter-spacing: .08em;
}

.archive-expedients-panel {
  display: grid;
  gap: 7px;
}

.archive-expedients-header {
  display: grid;
  gap: 3px;
  padding: 0 2px;
}

.archive-expedients-kicker {
  color: #b89c66;
  font-size: .62rem;
  letter-spacing: .16em;
}

.archive-expedients-meta {
  color: #778096;
  font-size: .72rem;
  line-height: 1.35;
}

.archive-detail-title {
  color: #f0e8d6;
  font-size: 1.18rem;
  line-height: 1.1;
}

.archive-expedients {
  display: grid;
  gap: 6px;
}

.episode-item {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: flex-start;
  justify-content: flex-start;
  gap: 7px;
  padding: 9px 11px;
  border: 1px solid var(--menu-line);
  border-radius: 5px;
  color: #d6dbe4;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 60%),
    #111722;
  text-align: left;
  box-shadow: none;
}

.episode-item:hover {
  border-color: #4d586f;
}

.episode-item.selected {
  border-color: var(--menu-gold-soft);
  background:
    linear-gradient(90deg, rgba(215, 181, 109, .1), transparent 70%),
    #151923;
  box-shadow: inset 3px 0 var(--menu-gold);
}

.episode-copy {
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 11px;
}

.episode-copy > div {
  min-width: 0;
}

.episode-number {
  flex: 0 0 auto;
  color: #5f687b;
  font-size: .78rem;
}

.episode-item.selected .episode-number {
  color: var(--menu-gold);
}

.episode-name {
  overflow: hidden;
  color: #e7e9ed;
  font-size: .92rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: normal;
}

.episode-meta {
  margin-top: 4px;
  overflow: hidden;
  color: #7d8799;
  font-size: .74rem;
  font-weight: normal;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: normal;
}

.episode-badge {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 4px 6px;
  border: 1px solid #414a5d;
  border-radius: 3px;
  color: #929daf;
  font-size: .57rem;
  letter-spacing: .06em;
  text-align: center;
}

.episode-badge.free {
  border-color: #59684f;
  color: #a9bd94;
}

.episode-badge.locked {
  border-color: #57484a;
  color: #9f8587;
}

.menu-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.start-menu .big-button {
  min-width: 0;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid #384157;
  border-radius: 5px;
  background: #171d29;
  box-shadow: 0 2px 0 #05070b;
  font-size: .82rem;
  letter-spacing: .035em;
  white-space: nowrap;
}

.start-menu .big-button:active {
  transform: translateY(1px);
  box-shadow: none;
}

.start-menu .continue-action {
  border-color: #4b576e;
  color: #e4e8ef;
  background: #202838;
}

.menu-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.menu-tools #accountButton,
.menu-tools #installButton {
  grid-column: 1 / -1;
}

.menu-tools .big-button {
  min-height: 32px;
  padding: 6px 4px;
  border-color: #2b3344;
  color: #7f899b;
  background: #0e131c;
  box-shadow: none;
  font-size: .7rem;
}

.menu-tools #installButton {
  grid-column: 1 / -1;
}

.menu-actions > *,
.menu-tools > * {
  max-width: 100%;
}

.start-menu .save-status {
  min-height: 1.25em;
  margin: 0 2px;
  color: #8d99ad;
  font-size: .78rem;
  line-height: 1.35;
  text-align: center;
}

@media (max-width: 760px) {
  .episode-item {
    padding: 10px;
  }

  .episode-copy {
    gap: 9px;
  }

  .episode-badge {
    margin-top: 2px;
    align-self: center;
  }
}

.account-modal {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 5, 9, .84);
  backdrop-filter: blur(5px);
}

.account-card {
  position: relative;
  width: min(430px, 100%);
  padding: 24px;
  border: 1px solid #76643f;
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(215, 181, 109, .07), transparent 45%),
    #101620;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}

.account-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #384155;
  border-radius: 4px;
  color: #8d96a7;
  background: #151b26;
}

.account-kicker {
  color: #d7b56d;
  font-size: .62rem;
  letter-spacing: .17em;
}

.account-card h2 {
  margin: 9px 0 7px;
  color: #f0e8d6;
  font-size: 1.25rem;
}

.account-intro {
  margin: 0 38px 18px 0;
  color: #9099a9;
  font-size: .8rem;
  line-height: 1.5;
}

.account-form {
  display: grid;
  gap: 10px;
}

.account-form label {
  display: grid;
  gap: 5px;
}

.account-form label span,
.account-session > span {
  color: #737e92;
  font-size: .56rem;
  letter-spacing: .12em;
}

.account-form input {
  width: 100%;
  min-height: 41px;
  padding: 9px 10px;
  border: 1px solid #3b465d;
  border-radius: 4px;
  background: #080c13;
}

.account-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 3px;
}

.account-actions button,
.account-session button {
  min-height: 40px;
  border: 1px solid #6f6041;
  border-radius: 4px;
  color: #17130b;
  background: #d7b56d;
  font-size: .64rem;
}

.account-actions #signupButton,
.account-session button {
  border-color: #414c62;
  color: #d9dee7;
  background: #1c2432;
}

.account-session {
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid #354158;
  border-radius: 5px;
  background: #0a0f17;
}

.account-session strong {
  overflow-wrap: anywhere;
  color: #e7dfcf;
  font-size: .86rem;
}

.account-session p {
  margin: 0 0 5px;
  color: #8993a5;
  font-size: .67rem;
  line-height: 1.45;
}

.account-message {
  min-height: 1.25em;
  margin: 12px 0 0;
  color: #b8c3d5;
  font-size: .65rem;
  line-height: 1.4;
  text-align: center;
}

.reset-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  font-family: "Space Grotesk", Arial, sans-serif;
}

.reset-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 9, .82);
  backdrop-filter: blur(5px);
}

.reset-modal-card {
  position: relative;
  width: min(430px, 100%);
  padding: 25px;
  border: 1px solid rgba(200, 155, 75, .48);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(200, 155, 75, .07), transparent 43%),
    #0d131b;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .64);
}

.reset-modal-kicker {
  color: #c89b4b;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
}

.reset-modal-card h2 {
  margin: 10px 0 12px;
  color: #eee4d1;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.35rem, 5vw, 1.7rem);
  line-height: 1.15;
}

.reset-modal-card > p {
  margin: 0;
  color: #a9a294;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: .96rem;
  line-height: 1.55;
}

.reset-modal-actions,
.game-options-actions {
  display: grid;
  gap: 9px;
  margin-top: 22px;
}

.reset-modal-actions {
  grid-template-columns: 1fr 1fr;
}

.reset-modal-actions button,
.game-options-actions button {
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 6px;
  box-shadow: none;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .11em;
}

.reset-cancel,
.game-options-actions > button:first-child {
  border: 1px solid rgba(200, 155, 75, .3);
  color: #d8cfbe;
  background: #151c25;
}

.reset-danger,
.reset-danger-outline {
  border: 1px solid rgba(177, 91, 78, .72);
  color: #f0d5cf;
  background: #552621;
}

.reset-danger-outline {
  background: rgba(83, 31, 28, .2);
}

.game-options-actions .reset-cancel {
  border-color: transparent;
  color: #888f99;
  background: transparent;
}

.reset-modal-error {
  margin-top: 14px !important;
  color: #db9387 !important;
  font-family: "Space Grotesk", Arial, sans-serif !important;
  font-size: .72rem !important;
}

body:has(.reset-modal:not(.hidden)) .mobile-dock {
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 420px) {
  .reset-modal {
    padding: 14px;
  }

  .reset-modal-card {
    padding: 22px 18px 18px;
  }

  .reset-modal-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .account-modal {
    padding: 10px;
  }

  .account-card {
    padding: 21px 16px 17px;
  }

  .account-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cover-copy {
    animation: coverReveal 420ms ease-out both;
  }

  .menu-content {
    animation: menuReveal 360ms 100ms ease-out both;
  }

  @keyframes coverReveal {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes menuReveal {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 520px) {
  /* V50: priorizar legibilidad en la portada móvil */
  .cover-art {
    min-height: 215px;
  }

  .cover-copy {
    width: 82%;
    padding: 27px 20px 24px;
  }

  .series-mark {
    margin-bottom: 14px;
    font-size: .76rem;
    letter-spacing: .13em;
  }

  .start-menu .cover-title {
    font-size: clamp(2rem, 11vw, 2.65rem);
  }

  .start-menu .cover-text {
    display: block;
    max-width: 340px;
    font-size: .92rem;
    line-height: 1.5;
  }

  .demo-stamp {
    top: 16px;
    right: 14px;
  }

  .menu-content {
    gap: 10px;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
  }

  .menu-dock {
    gap: 7px;
    padding-top: 9px;
  }

  .menu-actions {
    grid-template-columns: 1fr;
  }

  .menu-tools {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .menu-tools .big-button {
    min-height: 40px;
    padding-inline: 3px;
    font-size: .74rem;
    letter-spacing: .015em;
  }

  .episode-title,
  .episode-count {
    font-size: .82rem;
  }

  .archive-card {
    padding: 9px;
  }

  .archive-carousel {
    grid-auto-columns: minmax(240px, 90%);
  }

  .archive-number {
    font-size: .74rem;
  }

  .archive-name {
    font-size: 1.06rem;
  }

  .archive-meta {
    font-size: .86rem;
  }

  .archive-status {
    font-size: .72rem;
  }

  .archive-expedients-kicker {
    font-size: .68rem;
  }

  .archive-expedients-meta {
    font-size: .8rem;
  }

  .episode-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: flex-start;
    justify-content: flex-start;
    padding: 10px;
  }

  .episode-copy {
    width: 100%;
    gap: 9px;
  }

  .episode-name {
    font-size: 1.02rem;
    white-space: normal;
  }

  .episode-meta {
    font-size: .84rem;
    white-space: normal;
  }

  .episode-badge {
    margin-top: 7px;
    align-self: center;
    justify-self: center;
    font-size: .68rem;
  }

  .start-menu .big-button {
    min-height: 45px;
    font-size: .95rem;
  }

  .menu-tools .big-button {
    min-height: 40px;
    font-size: .74rem;
  }

  .start-menu .save-status {
    font-size: .82rem;
  }
}

@media (max-width: 360px) {
  .cover-art {
    min-height: 195px;
  }

  .cover-copy {
    padding: 23px 15px 20px;
  }

  .start-menu .cover-title {
    font-size: 2rem;
  }

  .start-menu .cover-text {
    max-width: 245px;
    font-size: .82rem;
  }

  .episode-item {
    min-height: 54px;
    padding: 8px;
  }

  .archive-name {
    font-size: .98rem;
  }

  .episode-name {
    font-size: 1rem;
  }

  .episode-meta {
    max-width: none;
    font-size: .8rem;
  }

  .menu-actions {
    grid-template-columns: 1fr;
  }

  .menu-tools .big-button {
    font-size: .65rem;
  }
}

@media (max-height: 680px) and (min-width: 361px) {
  .cover-art {
    min-height: 174px;
  }

  .cover-copy {
    padding-top: 20px;
    padding-bottom: 17px;
  }

  .series-mark {
    margin-bottom: 10px;
  }

  .start-menu .cover-title {
    font-size: 2rem;
  }

  .start-menu .cover-title::after {
    margin-top: 11px;
  }

  .start-menu .cover-text {
    margin-top: 8px;
    font-size: .69rem;
  }
}

/* V39: ventana final de ilustraciones de sala */
.room-image-wrap {
  padding: 0;
}

.room-image {
  width: 100%;
  height: auto;
  max-height: clamp(148px, 25vh, 240px);
  border: 0 !important;
  box-shadow: none !important;
  background: #05050a;
}

@media (max-width: 520px) {
  .room-image {
    max-height: clamp(150px, 24vh, 184px);
  }
}

@media (max-height: 720px) {
  .room-image {
    max-height: clamp(132px, 23vh, 168px);
  }
}

@media (max-height: 580px) {
  .room-image {
    max-height: 124px;
  }
}

@media (max-width: 420px) {
  .intro-card {
    width: min(100%, 100%);
    margin-bottom: 14px;
    padding: 12px 11px 11px;
  }

  .intro-title {
    font-size: 1.1rem;
  }

  .intro-kicker {
    font-size: .7rem;
  }

  .intro-text {
    font-size: .95rem;
  }

  .intro-actions {
    gap: 6px;
  }
}
.dialogue-panel {
  margin: .75rem 0;
  padding: 1rem;
  border: 1px solid rgba(235, 189, 98, .45);
  border-radius: 14px;
  background: transparent;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
}

.dialogue-panel.hidden { display: none; }
.dialogue-character { color: #edc36d; font-weight: 700; letter-spacing: .08em; font-size: .78rem; }
.dialogue-text { margin: .55rem 0  .8rem; line-height: 1.5; }
.dialogue-options { display: grid; gap: .5rem; }
.dialogue-option { text-align: left; padding: .7rem .8rem; border: 1px solid rgba(235, 189, 98, .35); border-radius: 10px; background: rgba(235, 189, 98, .08); color: inherit; cursor: pointer; }
.dialogue-option:active { transform: translateY(1px); background: rgba(235, 189, 98, .18); }
.command-panel.dialogue-paused { opacity: .45; pointer-events: none; }

/* V42: cabecera contextual del expediente activo */
.file-context {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-bottom: 1px solid #2f384b;
  background:
    linear-gradient(90deg, rgba(215,181,109,.08), transparent 60%),
    #0d131e;
}

.cover-back-button {
  position: absolute;
  right: 20px;
  bottom: 15px;
  z-index: 2;
  min-height: 29px;
  padding: 5px 8px;
  border: 1px solid rgba(215,181,109,.65);
  border-radius: 4px;
  color: #e1c789;
  background: rgba(9,13,21,.72);
  font-size: .58rem;
  letter-spacing: .08em;
}

.cover-title {
  text-transform: uppercase;
}

.cover-back-button:active {
  transform: translateY(1px);
}

.cover-text {
  white-space: pre-line;
  display: -webkit-box;
  max-height: 3.1em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.cover-art {
  height: 238px;
  min-height: 238px;
  flex: 0 0 238px;
}

.file-context-back {
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid #4a566e;
  border-radius: 4px;
  color: #c2cad6;
  background: #17202e;
  font-size: .61rem;
  letter-spacing: .08em;
  white-space: nowrap;
}

.file-context-back:active {
  transform: translateY(1px);
  background: #222e41;
}

.file-context-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.file-context-kicker {
  overflow: hidden;
  color: #b89c66;
  font-size: .56rem;
  letter-spacing: .16em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-context-title {
  overflow: hidden;
  color: #f0e8d6;
  font-size: .88rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-context-episode {
  overflow: hidden;
  color: #7f899e;
  font-size: .62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 360px) {
  .file-context {
    gap: 7px;
    padding-inline: 8px;
  }

  .file-context-back {
    padding-inline: 6px;
    font-size: .55rem;
  }

  .file-context-title {
    font-size: .78rem;
  }
}

@media (max-width: 520px) {
  .cover-art {
    height: 215px;
    min-height: 215px;
    flex-basis: 215px;
  }

  .cover-back-button {
    right: 14px;
    bottom: 13px;
  }
}

/* V41: overrides finales de biblioteca, después de los estilos responsivos heredados */
.archive-carousel {
  display: grid;
  grid-auto-flow: row;
  grid-auto-columns: auto;
  gap: 10px;
  margin-bottom: 14px;
  overflow: visible;
  scroll-snap-type: none;
}

.archive-group-label { margin: 7px 2px 0; color: #687389; font-size: .65rem; letter-spacing: .18em; }
.archive-group-label:first-child { margin-top: 0; color: var(--menu-gold); }
.archive-library-card { gap: 12px; padding: 14px; border-color: #30394d; border-radius: 8px; background: linear-gradient(135deg, rgba(255,255,255,.025), transparent 48%), #101621; cursor: default; }
.archive-library-card.active { border-color: #4c5870; background: linear-gradient(135deg, rgba(215,181,109,.07), transparent 50%), #121925; box-shadow: none; }
.archive-library-card.featured { padding: 16px; border-color: #8a7245; background: radial-gradient(circle at 100% 0, rgba(215,181,109,.14), transparent 42%), linear-gradient(180deg, rgba(215,181,109,.08), transparent 58%), #151923; box-shadow: inset 3px 0 var(--menu-gold), 0 8px 24px rgba(0,0,0,.2); }
.archive-card-top, .archive-progress-copy { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.archive-library-card .archive-number { color: #a88d5b; font-size: .62rem; }
.archive-state { flex: 0 0 auto; padding: 3px 6px; border: 1px solid #465166; border-radius: 999px; color: #8f9aaf; font-size: .52rem; letter-spacing: .09em; }
.archive-library-card.featured .archive-state { border-color: #76633e; color: #d7b56d; }
.archive-library-card .archive-name { margin-top: 2px; font-size: 1.12rem; }
.archive-library-card.featured .archive-name { font-size: 1.32rem; }
.archive-library-card .archive-count { color: #aab2c0; }
.archive-progress { display: grid; gap: 6px; padding-top: 2px; }
.archive-progress-copy { color: #7f899c; font-size: .58rem; letter-spacing: .12em; }
.archive-progress-copy strong { color: #d7b56d; font-weight: normal; }
.archive-progress-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.archive-progress-track span { height: 4px; border-radius: 999px; background: #30384a; }
.archive-progress-track span.done { background: var(--menu-gold); box-shadow: 0 0 8px rgba(215,181,109,.25); }
.archive-library-card .archive-open-button { min-height: 38px; display: flex; align-items: center; justify-content: space-between; padding-inline: 12px; border-color: #465166; color: #dce1e9; background: #1b2331; }
.archive-library-card.featured .archive-open-button { border-color: #9d814b; color: #17130b; background: #d7b56d; }
.archive-detail-progress { margin-top: 5px; color: #a88d5b; font-size: .6rem; letter-spacing: .12em; }
.archive-expedients-header { gap: 6px; margin-bottom: 4px; }
.archive-back-button { width: max-content; min-height: 30px; margin-top: 5px; padding: 5px 9px; border-color: #39445a; color: #9aa5b8; background: #121824; }
.episode-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.episode-item.completed { border-color: #3d4b42; }
.episode-item.completed .episode-number, .episode-badge.completed { color: #a9bd94; }
.episode-badge.completed { border-color: #59684f; }

@media (max-width: 520px) {
  .archive-library-card, .archive-library-card.featured { padding: 13px; }
  .archive-library-card .archive-meta { font-size: .76rem; }
  .episode-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .episode-item .episode-badge { justify-self: end; margin-top: 0; min-width: 64px; font-size: .57rem; }
}
.tutorial-lesson {
  display: block;
  margin: 0.8rem 0 1rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(220, 182, 91, 0.5);
  border-left: 3px solid #dcb65b;
  background: rgba(220, 182, 91, 0.08);
  color: #f1e5c2;
}

.tutorial-lesson-label,
.tutorial-lesson-text,
.tutorial-lesson-example {
  display: block;
}

.tutorial-lesson-label {
  margin-bottom: 0.35rem;
  color: #dcb65b;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.tutorial-lesson-text {
  line-height: 1.45;
}

.tutorial-lesson-example {
  margin-top: 0.55rem;
  color: #fff4cf;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

/* V44: interfaz de investigación priorizada para móvil */
.mission-strip {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  flex: 0 0 auto;
  padding: 7px 10px;
  border-top: 1px solid #292f40;
  border-bottom: 1px solid #343b51;
  background: linear-gradient(180deg, #141b28, #0e141e);
}

.mission-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.mission-label {
  color: #d7b56d;
  font-size: .54rem;
  letter-spacing: .16em;
}

.mission-copy strong {
  overflow: hidden;
  color: #e9edf5;
  font-size: .73rem;
  font-weight: normal;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid #596279;
  border-radius: 5px;
  color: #dce1e9;
  background: #1b2432;
  font-size: .58rem;
  letter-spacing: .07em;
}

.inventory-toggle strong {
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  border-radius: 50%;
  color: #15120b;
  background: #d7b56d;
  font-size: .58rem;
}

.inventory-tray {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 2px;
}

.inventory-tray.collapsed {
  display: none;
}

.inventory-item {
  min-height: 29px;
  padding: 4px 8px;
  border: 1px solid #75623d;
  border-radius: 999px;
  color: #f2deb0;
  background: #201d19;
  font-size: .62rem;
}

.inventory-empty {
  color: #8b95a7;
  font-size: .64rem;
}

.screen {
  padding-top: 9px;
  padding-bottom: 12px;
}

.command-panel.bottom-input {
  max-height: 218px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.command-panel.bottom-input .control-deck {
  min-height: 0;
}

.command-panel.bottom-input .action-key {
  min-height: 38px;
  color: #f0f2f6;
}

.command-panel.bottom-input .utility-strip button {
  min-height: 30px;
}

.tutorial-lesson {
  margin: 8px 0 10px;
  padding: 9px 11px;
  border-radius: 5px;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .18);
}

@media (max-width: 520px) {
  .mission-strip {
    padding: 7px 9px;
  }

  .mission-copy strong {
    font-size: .7rem;
  }

  .inventory-toggle {
    padding-inline: 8px;
  }

  .command-panel.bottom-input {
    max-height: 212px;
    padding: 6px 7px calc(6px + env(safe-area-inset-bottom));
  }

  .control-deck {
    grid-template-columns: minmax(0, 1fr) 122px;
  }

  .action-key {
    min-height: 36px;
    font-size: .64rem;
  }

  .tutorial-lesson-text {
    font-size: .88rem;
  }
}

/* V45: guía contextual y cierre profesional de expediente */
.guidance-hint {
  display: block;
  max-height: 0;
  overflow: hidden;
  color: #e8ca83;
  font-size: .61rem;
  line-height: 1.3;
  opacity: 0;
  transition: max-height 180ms ease, opacity 180ms ease, margin 180ms ease;
}

.mission-strip.guidance-active .guidance-hint {
  max-height: 2.8em;
  margin-top: 2px;
  opacity: 1;
}

.room-text .clickable-word {
  color: #f4e6b8;
  text-decoration: underline dotted rgba(215, 181, 109, .42);
  text-underline-offset: 3px;
}

.is-guided {
  position: relative;
  z-index: 2;
  border-color: #e2bf68 !important;
  color: #fff0b5 !important;
  background: rgba(215, 181, 109, .18) !important;
  box-shadow: 0 0 0 2px rgba(215, 181, 109, .13), 0 0 18px rgba(215, 181, 109, .28) !important;
  animation: guidancePulse 1.15s ease-in-out infinite;
}

.clickable-word.is-guided {
  padding: 1px 4px;
  border-radius: 4px;
  text-decoration: none;
}

.inventory-item.is-guided {
  display: inline-flex;
}

@keyframes guidancePulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.28); }
}

.game-area.game-complete .command-panel,
.game-area.game-complete .mission-strip,
.game-area.game-complete .dialogue-panel {
  display: none;
}

.game-area.game-complete .screen {
  padding: 16px;
  background:
    radial-gradient(circle at 50% 20%, rgba(215, 181, 109, .08), transparent 46%),
    #090d15;
}

.final-card {
  position: relative;
  display: grid;
  gap: 10px;
  width: min(100%, 470px);
  margin: 14px auto 18px;
  padding: 22px;
  border: 1px solid #7d6942;
  border-radius: 10px;
  color: #e8edf5;
  background:
    linear-gradient(145deg, rgba(215, 181, 109, .09), transparent 38%),
    #111722;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .04);
}

.final-seal {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 2px;
  border: 1px solid #b89552;
  border-radius: 50%;
  color: #17130b;
  background: #d7b56d;
  font-size: 1.35rem;
  box-shadow: 0 0 22px rgba(215, 181, 109, .18);
}

.final-kicker {
  color: #b99b62;
  font-size: .58rem;
  letter-spacing: .2em;
}

.final-card .final-title {
  margin: -3px 0 0;
  color: #f3ead8;
  font-size: clamp(1.18rem, 4vw, 1.48rem);
  line-height: 1.2;
}

.final-card .final-subtitle {
  margin: -5px 0 5px;
  color: #8f99ab;
  font-size: .73rem;
}

.final-progress-copy {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #7f899c;
  font-size: .56rem;
  letter-spacing: .1em;
}

.final-progress-copy strong {
  color: #d7b56d;
  font-weight: normal;
}

.final-progress-track {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #293142;
}

.final-progress-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9b7c40, #e3c26f);
  box-shadow: 0 0 12px rgba(215, 181, 109, .25);
}

.final-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 3px;
}

.final-metrics > span {
  display: grid;
  gap: 4px;
  padding: 9px 7px;
  border: 1px solid #303a4e;
  border-radius: 6px;
  background: #0b1018;
  text-align: center;
}

.final-metrics small,
.final-learning > small {
  color: #69758a;
  font-size: .5rem;
  letter-spacing: .12em;
}

.final-metrics strong {
  color: #e6dcc8;
  font-size: .8rem;
  font-weight: normal;
}

.final-learning {
  display: grid;
  gap: 7px;
  padding: 11px 0 2px;
  border-top: 1px solid #2b3344;
}

.final-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.final-skill {
  padding: 5px 7px;
  border: 1px solid #46513f;
  border-radius: 999px;
  color: #b9c9aa;
  background: #121a16;
  font-size: .58rem;
}

.final-conclusion {
  color: #b6bfcd;
  font-size: .72rem;
  line-height: 1.5;
}

.final-rank {
  display: grid;
  gap: 3px;
  margin-top: 5px;
  padding: 8px 10px;
  border: 1px solid #6f5d39;
  border-radius: 6px;
  color: #d7b56d;
  background: rgba(215, 181, 109, .07);
}

.final-rank small {
  color: #8e7a51;
  font-size: .48rem;
  letter-spacing: .14em;
}

.final-rank strong {
  color: #f0d58e;
  font-size: .76rem;
  letter-spacing: .08em;
}

.final-score {
  display: grid;
  gap: 5px;
  padding: 11px 10px;
  border-top: 1px solid #2b3344;
  border-bottom: 1px solid #2b3344;
}

.final-score small {
  color: #69758a;
  font-size: .5rem;
  letter-spacing: .12em;
}

.final-score strong {
  color: #f0d58e;
  font-size: 1.15rem;
  font-weight: normal;
  letter-spacing: .08em;
}

.final-score span {
  color: #aeb7c6;
  font-size: .68rem;
  line-height: 1.45;
}

.final-social-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 7px;
}

.final-social-actions button {
  display: grid;
  place-items: center;
  min-height: 34px;
  border: 1px solid #3c465b;
  border-radius: 5px;
  color: #d5c28e;
  background: #141d2a;
}

.final-social-actions button:hover,
.final-social-actions button:focus-visible {
  border-color: #b2904f;
  color: #fff0bd;
}

.final-social-actions svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.final-x-icon {
  font-size: 1rem;
  line-height: 1;
}

.final-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 4px;
}

.final-actions button {
  min-height: 39px;
  border: 1px solid #3c465b;
  border-radius: 5px;
  color: #dce2ec;
  background: #1a2230;
  font-size: .61rem;
  letter-spacing: .04em;
}

.final-actions .final-primary {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: 13px;
  border-color: #b2904f;
  color: #17130b;
  background: #d7b56d;
}

.final-actions .final-share {
  grid-column: 1 / -1;
  border-color: #6f9e9d;
  color: #d8f0ed;
  background: #173039;
}

.final-actions .final-ghost {
  color: #818da1;
  background: transparent;
}

@media (max-width: 520px) {
  .game-area.game-complete .room-image {
    max-height: 110px;
  }

  .game-area.game-complete .screen {
    padding: 10px;
  }

  .final-card {
    gap: 9px;
    margin-top: 7px;
    padding: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-guided {
    animation: none;
  }
}

/* V46: lecciones fuera de la narración */
.game-area {
  position: relative;
}

.tutorial-coachmark {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4, 7, 12, .72);
  backdrop-filter: blur(3px);
}

.tutorial-coachmark.hidden {
  display: none;
}

.tutorial-coachmark-card {
  position: relative;
  display: grid;
  gap: 10px;
  width: min(100%, 390px);
  padding: 21px 20px 18px;
  border: 1px solid #b08c4b;
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(215, 181, 109, .12), transparent 42%),
    #121a25;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .62), inset 0 1px rgba(255, 255, 255, .05);
  animation: coachmarkIn 180ms ease-out both;
}

.tutorial-coachmark-kicker {
  color: #d7b56d;
  font-size: .59rem;
  letter-spacing: .2em;
}

.tutorial-coachmark-title {
  color: #f3ead8;
  font-size: 1.08rem;
  font-weight: bold;
}

.tutorial-coachmark-text {
  margin: 0;
  color: #b9c2d0;
  font-size: .82rem;
  line-height: 1.55;
}

.tutorial-coachmark-example {
  display: block;
  padding: 9px 10px;
  border: 1px solid #354158;
  border-radius: 5px;
  color: #f0d99f;
  background: #0a1018;
  font-size: .68rem;
  letter-spacing: .08em;
}

.tutorial-coachmark-close {
  min-height: 39px;
  margin-top: 3px;
  border: 1px solid #b08c4b;
  border-radius: 5px;
  color: #17130b;
  background: #d7b56d;
  font-size: .65rem;
  letter-spacing: .1em;
}

@keyframes coachmarkIn {
  from { opacity: 0; transform: translateY(7px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 520px) {
  .tutorial-coachmark {
    align-items: end;
    padding: 10px;
  }

  .tutorial-coachmark-card {
    width: 100%;
    padding: 17px 16px 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-coachmark-card {
    animation: none;
  }
}

/* V47: resultado de expediente como popup */
.case-complete-modal {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 6, 11, .78);
  backdrop-filter: blur(5px);
}

.case-complete-modal.hidden {
  display: none;
}

.case-complete-modal-card {
  position: relative;
  width: min(100%, 510px);
  max-height: 100%;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid #76633f;
  border-radius: 12px;
  background: #0d131d;
  box-shadow: 0 24px 90px rgba(0, 0, 0, .7);
  animation: caseCompleteIn 220ms ease-out both;
}

.case-complete-modal-card .final-card {
  width: 100%;
  margin: 0;
  border: 0;
  box-shadow: none;
}

.case-complete-close {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  padding: 0;
  border: 1px solid #475269;
  border-radius: 50%;
  color: #aab4c5;
  background: #151d29;
  font-size: 1.15rem;
  line-height: 1;
}

@keyframes caseCompleteIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 520px) {
  .case-complete-modal {
    align-items: end;
    padding: 8px;
  }

  .case-complete-modal-card {
    max-height: calc(100% - 4px);
    padding: 5px;
  }

  .case-complete-modal-card .final-card {
    padding: 17px 15px 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-complete-modal-card {
    animation: none;
  }
}

/* V48: bienvenida y presentación de expediente como popups */
.welcome-modal,
.episode-intro-modal {
  position: absolute;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 6, 11, .78);
  backdrop-filter: blur(5px);
}

.welcome-modal.hidden,
.episode-intro-modal.hidden {
  display: none;
}

.welcome-modal-card,
.episode-intro-modal-card {
  display: grid;
  gap: 11px;
  width: min(100%, 430px);
  padding: 25px 23px 21px;
  border: 1px solid #806943;
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(215, 181, 109, .11), transparent 40%),
    #111924;
  box-shadow: 0 24px 85px rgba(0, 0, 0, .68), inset 0 1px rgba(255, 255, 255, .04);
  animation: introPopupIn 220ms ease-out both;
}

.welcome-kicker,
.episode-intro-kicker {
  color: #d7b56d;
  font-size: .62rem;
  letter-spacing: .2em;
}

.welcome-modal-card h2,
.episode-intro-modal-card h2 {
  margin: 0;
  color: #f3ead8;
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  line-height: 1.18;
}

.welcome-modal-card > p,
.episode-intro-modal-card > p {
  margin: 0;
  color: #b8c1cf;
  font-size: .82rem;
  line-height: 1.55;
}

.welcome-howto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 3px 0;
}

.welcome-howto span {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px 4px 8px;
  border: 1px solid #303b50;
  border-radius: 6px;
  background: #0b111a;
  text-align: center;
}

.welcome-howto strong {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  color: #17130b;
  background: #d7b56d;
  font-size: .7rem;
}

.welcome-howto b {
  color: #e6dcc8;
  font-size: .55rem;
  letter-spacing: .08em;
}

.welcome-howto small {
  color: #7f899c;
  font-size: .55rem;
}

.welcome-note {
  padding: 10px 11px;
  border-left: 2px solid #76613e;
  color: #9faabb !important;
  background: rgba(215, 181, 109, .05);
  font-size: .7rem !important;
}

.welcome-details {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid #303b50;
  border-radius: 6px;
  background: rgba(11, 17, 26, .72);
}

.welcome-details-label {
  color: #d7b56d;
  font-size: .58rem;
  letter-spacing: .14em;
}

.welcome-details p {
  margin: 0;
  color: #aeb8c8;
  font-size: .7rem;
  line-height: 1.45;
}

.welcome-primary,
.episode-intro-primary {
  min-height: 41px;
  border: 1px solid #b08c4b;
  border-radius: 5px;
  color: #17130b;
  background: #d7b56d;
  font-size: .64rem;
  letter-spacing: .09em;
}

.episode-intro-modal-card {
  width: min(100%, 500px);
}

.episode-intro-modal-card h2 {
  font-size: clamp(1.45rem, 6vw, 2rem);
}

.episode-intro-modal-card > p {
  white-space: pre-line;
  font-size: .88rem;
  line-height: 1.65;
}

.episode-intro-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  margin-top: 4px;
}

.episode-intro-secondary {
  min-width: 84px;
  min-height: 41px;
  padding-inline: 12px;
  border: 1px solid #465269;
  border-radius: 5px;
  color: #aeb8ca;
  background: #182130;
  font-size: .6rem;
}

/* Final mobile overrides: keep the contextual surface above legacy desktop rules. */
.hud-mode { display: none !important; }
@media (max-width: 767px) {
  .mobile-utility-bar { display: grid !important; }
  .room-image-tools, .command-panel.bottom-input .control-deck { display: none !important; }
  .command-panel.bottom-input { max-height: none !important; padding: 8px var(--mobile-gutter) calc(8px + env(safe-area-inset-bottom)) !important; }
  .command-console { min-height: 52px !important; }
  .command-console input { height: 50px !important; font-size: 1rem !important; }
  .command-console #clearButton, .command-console #sendButton { width: 48px !important; height: 48px !important; min-height: 48px !important; }
  .screen { font-size: 1.08rem !important; line-height: 1.6 !important; }
  .mobile-sheet { display: flex !important; }
  .mobile-sheet.hidden { display: none !important; }
}

@keyframes introPopupIn {
  from { opacity: 0; transform: translateY(10px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 520px) {
  .welcome-modal,
  .episode-intro-modal {
    align-items: end;
    padding: 9px;
  }

  .welcome-modal-card,
  .episode-intro-modal-card {
    padding: 20px 17px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-modal-card,
  .episode-intro-modal-card {
    animation: none;
  }
}

/* V50: controles compactos en dos filas */
.command-panel.bottom-input {
  max-height: 180px;
  gap: 4px;
  padding-top: 5px;
}

.command-panel.bottom-input .control-deck {
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: 7px;
  align-items: start;
}

.action-bank-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 18px;
  margin-bottom: 3px;
}

.action-bank-header .control-label,
.navigation-bank > .control-label {
  margin: 0 0 3px 2px;
}

.action-bank-header .control-label {
  margin-bottom: 0;
}

.action-bank-header .utility-strip {
  display: flex;
  gap: 3px;
  margin: 0;
}

.action-bank-header .utility-button {
  width: 24px;
  min-height: 18px;
  height: 18px;
  border-radius: 4px;
  background: #111824;
}

.action-bank-header .utility-glyph {
  font-size: .62rem;
}

.command-panel.bottom-input .action-grid,
.command-panel.bottom-input .secondary-action-strip {
  gap: 3px;
}

.command-panel.bottom-input .secondary-action-strip {
  margin-top: 3px;
}

.command-panel.bottom-input .action-key {
  min-height: 29px;
  padding: 3px 2px;
  font-size: .61rem;
}

.command-panel.bottom-input .secondary-action-key {
  min-height: 27px;
  font-size: .56rem;
}

.command-panel.bottom-input .direction-pad {
  grid-template-columns: repeat(3, 39px);
  grid-template-rows: repeat(2, 28px);
  gap: 3px;
}

@media (max-width: 520px) {
  .command-panel.bottom-input {
    max-height: 174px;
    padding-top: 4px;
  }

  .command-panel.bottom-input .control-deck {
    grid-template-columns: minmax(0, 1fr) 116px;
    gap: 5px;
  }

  .command-panel.bottom-input .direction-pad {
    grid-template-columns: repeat(3, 36px);
    grid-template-rows: repeat(2, 27px);
  }

  .action-bank-header .utility-button {
    width: 22px;
  }

  .command-panel.bottom-input .action-key {
    font-size: .56rem;
  }
}

/* V51: herramientas flotantes sobre la ilustración */
.room-image-tools {
  position: absolute;
  right: 18px;
  bottom: 14px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.room-image-tool-button,
.room-image-tools .room-reload-button {
  position: relative;
  right: auto;
  bottom: auto;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid rgba(215, 181, 109, .6);
  border-radius: 50%;
  color: #e8d6aa;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .13), transparent 48%),
    rgba(9, 12, 20, .88);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .07);
}

.room-image-tool-button .icon-button,
.room-image-tools .room-reload-button .icon-button {
  width: 17px;
  height: 17px;
}

.room-image-tool-button:hover,
.room-image-tool-button:focus-visible {
  color: #fff3c8;
  border-color: #e0c176;
}

.room-tool-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border: 1px solid #17130b;
  border-radius: 999px;
  color: #17130b;
  background: #d7b56d;
  font-size: .48rem;
  line-height: 1;
}

.mission-strip {
  grid-template-columns: minmax(0, 1fr);
}

.room-image-wrap > .mission-strip {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 3;
  display: grid;
  padding: 5px 9px;
  border: 0;
  border-bottom: 1px solid rgba(215, 181, 109, .32);
  background: linear-gradient(180deg, rgba(7, 12, 20, .92), rgba(7, 12, 20, .7) 78%, transparent);
  pointer-events: none;
}

.room-image-wrap > .mission-strip .mission-copy,
.room-image-wrap > .mission-strip .inventory-tray {
  pointer-events: auto;
}

.room-image-wrap > .mission-strip .mission-copy {
  gap: 2px;
}

.room-image-wrap > .mission-strip .mission-copy strong {
  white-space: normal;
}

.room-image-wrap > .mission-strip .inventory-tray {
  padding-top: 4px;
}

@media (max-height: 590px) {
  .room-image-wrap {
    display: block;
    min-height: 70px;
    padding: 3px 8px;
    background: #090e16;
  }

  .room-image-wrap .room-image {
    display: none;
  }

  .room-image-tools {
    position: static;
    justify-content: flex-end;
  }

  .room-image-wrap > .mission-strip {
    position: relative;
  }
}

.room-image-wrap.hidden-image {
  display: block;
  min-height: 70px;
  padding: 3px 8px;
  background: #090e16;
}

.room-image-wrap.hidden-image .room-image {
  display: none;
}

.room-image-wrap.hidden-image .room-image-tools {
  position: static;
  justify-content: flex-end;
}

.room-image-wrap.hidden-image > .mission-strip {
  position: relative;
}

@media (max-width: 420px) {
  .room-image-tools {
    right: 12px;
    bottom: 10px;
    gap: 5px;
  }

  .room-image-tool-button,
  .room-image-tools .room-reload-button {
    width: 31px;
    height: 31px;
    min-height: 31px;
  }
}

/* Mobile scroll contract: only the narrative panel scrolls. */
@media (max-width: 767px) {
  html, body { overflow: hidden !important; height: 100% !important; }
  body { display: block !important; padding: 0 !important; }
  .game-shell { height: 100dvh !important; min-height: 0 !important; }
  .game-area { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; overflow: hidden !important; }
  .hud { position: relative !important; top: auto !important; flex: 0 0 54px !important; }
  .room-image-wrap, .mobile-utility-bar, .command-panel.bottom-input { flex: 0 0 auto !important; }
  .room-image-tools, .mission-strip, .command-panel.bottom-input .control-deck { display: none !important; }
  .screen { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; }
  .mobile-utility-bar { display: grid !important; }
  .command-panel.bottom-input { max-height: none !important; }
}

/* Mobile visual polish: warm retro palette and deliberate vertical rhythm. */
@media (max-width: 767px) {
  :root {
    --mobile-ink: #f3eee0;
    --mobile-muted: #aeb4c4;
    --mobile-gold: #d9ae58;
    --mobile-gold-soft: rgba(217, 174, 88, .34);
    --mobile-panel: #111827;
  }
  .hud {
    background: #0b101d !important;
    border-bottom: 1px solid var(--mobile-gold-soft) !important;
    box-shadow: 0 3px 16px rgba(0,0,0,.28);
  }
  .hud-stat, .hud-objective {
    border-color: rgba(217,174,88,.38) !important;
    color: var(--mobile-gold) !important;
    background: rgba(20,25,42,.82) !important;
    border-radius: 7px !important;
  }
  .hud-progress { background: transparent !important; border-color: transparent !important; }
  .room-image-wrap {
    padding: 12px 14px 0 !important;
    background: #080c17 !important;
  }
  .room-image-wrap .room-image {
    width: 100% !important;
    height: clamp(190px, 48vw, 280px) !important;
    border: 1px solid rgba(217,174,88,.42) !important;
    border-radius: 10px !important;
    box-shadow: 0 7px 24px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.04);
    filter: brightness(1.12) contrast(1.08) saturate(1.04);
  }
  .screen {
    margin: 12px 14px 0 !important;
    padding: 21px 18px 26px !important;
    border: 1px solid rgba(217,174,88,.2);
    border-radius: 10px 10px 0 0;
    background: linear-gradient(180deg, #121a2a 0%, var(--mobile-panel) 100%) !important;
    color: var(--mobile-ink) !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 17px !important;
    line-height: 1.65 !important;
    letter-spacing: .01em;
    box-shadow: 0 5px 18px rgba(0,0,0,.18);
  }
  .screen .room-title {
    margin: 0 0 18px !important;
    color: #e3ba68 !important;
    font-size: clamp(1.25rem, 5vw, 1.55rem) !important;
    letter-spacing: .11em !important;
    text-shadow: 0 1px 0 #000, 0 0 12px rgba(217,174,88,.14);
  }
  .screen .room-text, .screen .response, .screen .final-narrative {
    color: var(--mobile-ink) !important;
  }
  .screen .response { color: #d3d8df !important; }
  .screen .command-echo {
    display: block;
    margin: 0 0 14px;
    color: #83bdc4 !important;
    font-family: "Courier New", monospace;
    font-size: .78rem;
    letter-spacing: .04em;
    opacity: .9;
  }
  .screen .separator {
    color: rgba(217,174,88,.28) !important;
    margin: 20px 0 !important;
  }
  .screen .clickable-word,
  .screen .room-text .clickable-word,
  .screen .response .clickable-word {
    display: inline-block !important;
    padding: 4px 5px !important;
    margin: -4px -2px !important;
    border: 1px solid rgba(217,174,88,.22) !important;
    border-radius: 5px !important;
    background: rgba(217,174,88,.08) !important;
    color: #f0c96f !important;
    font: inherit !important;
    line-height: 1.45 !important;
    text-decoration: underline dotted rgba(240,201,111,.72) !important;
    text-underline-offset: 4px;
  }
  .screen .clickable-word:hover, .screen .clickable-word:focus-visible, .screen .clickable-word:active {
    border-color: rgba(240,201,111,.7) !important;
    background: rgba(217,174,88,.18) !important;
    color: #fff0bd !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(217,174,88,.1);
  }
  .mobile-utility-bar {
    gap: 12px !important;
    padding: 12px 14px !important;
    border-top: 1px solid rgba(217,174,88,.18) !important;
    background: #0b101d !important;
  }
  .mobile-utility-bar button {
    min-height: 54px !important;
    border: 1px solid rgba(217,174,88,.48) !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #202943, #151d30) !important;
    color: #e8c474 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 3px 10px rgba(0,0,0,.2);
    font-family: "Courier New", monospace !important;
    font-size: .83rem !important;
    font-weight: 700;
    letter-spacing: .04em;
  }
  .mobile-utility-bar button:active { transform: translateY(1px); background: #2b3452 !important; }
  .command-panel.bottom-input {
    padding: 8px 14px calc(10px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(217,174,88,.28) !important;
    background: #080c17 !important;
  }
  .command-console {
    min-height: 56px !important;
    border: 1px solid rgba(217,174,88,.5) !important;
    border-radius: 8px !important;
    background: #141c2d !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.28);
  }
  .command-console input {
    height: 54px !important;
    color: var(--mobile-ink) !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1rem !important;
  }
  .command-console input::placeholder { color: #9aa4b7; opacity: 1; }
  .command-console .prompt { color: #e8c474 !important; }
  .command-console #sendButton {
    width: 52px !important;
    height: 52px !important;
    margin-right: 2px;
    border-radius: 6px !important;
    background: #d9ae58 !important;
    color: #101522 !important;
  }
  .mobile-sheet-backdrop { background: rgba(3,6,14,.78) !important; backdrop-filter: blur(3px); }
  .mobile-sheet-card {
    max-height: min(74dvh, 620px) !important;
    padding: 28px 18px calc(25px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(240,201,111,.72) !important;
    border-radius: 16px 16px 0 0 !important;
    background: linear-gradient(180deg, #192238, #0f1626) !important;
    box-shadow: 0 -16px 38px rgba(0,0,0,.5), 0 -1px 0 rgba(255,255,255,.05);
  }
  .mobile-sheet-card::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 50%;
    width: 38px;
    height: 3px;
    border-radius: 3px;
    background: rgba(240,201,111,.42);
    transform: translateX(-50%);
  }
  .sheet-close {
    border-color: rgba(240,201,111,.4) !important;
    background: rgba(255,255,255,.04) !important;
    color: #f0d38d !important;
  }
  .sheet-kicker { color: #91a0ba !important; font-size: .68rem !important; letter-spacing: .16em !important; }
  .mobile-sheet h2 { margin-bottom: 20px !important; color: #f0c96f !important; font-size: 1.18rem !important; }
  .sheet-actions, .sheet-items { gap: 11px !important; }
  .sheet-actions button, .sheet-item {
    min-height: 56px !important;
    border: 1px solid rgba(217,174,88,.38) !important;
    border-radius: 8px !important;
    background: rgba(31,44,68,.88) !important;
    color: #ebc975 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1rem !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  }
  .sheet-actions button:active, .sheet-item:active { background: #354664 !important; border-color: #f0c96f !important; }
}

/* Editorial mobile direction: minimal chrome, story first. */
@media (max-width: 767px) {
  body, .game-shell, .game-area { background: #080b12 !important; }
  .hud {
    min-height: 48px !important;
    height: 48px !important;
    padding: 5px 18px !important;
    border-bottom: 1px solid rgba(215,173,70,.2) !important;
    background: #080b12 !important;
    box-shadow: none !important;
  }
  .hud-stat, .hud-objective {
    min-height: 36px !important;
    padding: 4px 5px !important;
    border: 0 !important;
    background: transparent !important;
    color: #d7ad46 !important;
    box-shadow: none !important;
  }
  .hud-progress { font-size: .85rem !important; }
  .hud-objective { width: 34px !important; overflow: hidden; font-size: 0 !important; }
  .hud-objective::before { content: "☼"; font-size: 1.05rem; color: rgba(238,231,213,.72); }
  .room-image-wrap {
    padding: 0 !important;
    background: #080b12 !important;
  }
  .room-image-wrap .room-image {
    height: clamp(210px, 56vw, 300px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }
  .screen {
    margin: 0 !important;
    padding: 25px 20px 24px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #080b12 !important;
    box-shadow: none !important;
    color: #eee7d5 !important;
    font-size: 18px !important;
    line-height: 1.67 !important;
  }
  .screen .room-title {
    margin-bottom: 20px !important;
    color: #d7ad46 !important;
    font-size: 1.25rem !important;
    letter-spacing: .12em !important;
    text-shadow: none !important;
  }
  .screen .room-text, .screen .response, .screen .final-narrative { color: #eee7d5 !important; }
  .screen .response { color: rgba(238,231,213,.88) !important; }
  .screen .command-echo { display: none !important; }
  .screen .separator { margin: 22px 0 !important; color: rgba(215,173,70,.18) !important; }
  .screen .clickable-word,
  .screen .room-text .clickable-word,
  .screen .response .clickable-word {
    display: inline-block !important;
    margin: -6px -3px !important;
    padding: 6px 3px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #d7ad46 !important;
    font-weight: 600 !important;
    text-decoration: underline dotted rgba(215,173,70,.72) !important;
    text-underline-offset: 4px;
    box-shadow: none !important;
  }
  .screen .clickable-word:hover, .screen .clickable-word:focus-visible, .screen .clickable-word:active {
    background: rgba(215,173,70,.1) !important;
    color: #f1d58a !important;
    outline: none !important;
  }
  .mobile-utility-bar {
    display: flex !important;
    justify-content: space-between;
    gap: 22px !important;
    padding: 8px 20px 10px !important;
    border-top: 0 !important;
    background: #080b12 !important;
  }
  .mobile-utility-bar button {
    min-height: 40px !important;
    padding: 4px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(238,231,213,.78) !important;
    box-shadow: none !important;
    font-family: "Courier New", monospace !important;
    font-size: .78rem !important;
    font-weight: 600;
    letter-spacing: .03em;
  }
  .mobile-utility-bar button:active { transform: none; color: #d7ad46 !important; background: transparent !important; }
  .mobile-utility-bar strong { color: #d7ad46 !important; }
  .command-panel.bottom-input {
    padding: 5px 20px calc(7px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(215,173,70,.14) !important;
    background: #080b12 !important;
  }
  .command-console {
    min-height: 42px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .command-console .prompt { padding-left: 0 !important; color: rgba(215,173,70,.7) !important; font-size: .95rem !important; }
  .command-console input {
    height: 40px !important;
    padding: 0 8px !important;
    color: #eee7d5 !important;
    background: transparent !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: .95rem !important;
  }
  .command-console input::placeholder { color: rgba(238,231,213,.48) !important; }
  .command-panel.bottom-input:not(.is-expanded) .command-console #clearButton,
  .command-panel.bottom-input:not(.is-expanded) .command-console #sendButton { display: none !important; }
  .command-panel.bottom-input.is-expanded .command-console {
    border-bottom: 1px solid rgba(215,173,70,.35) !important;
  }
  .command-panel.bottom-input.is-expanded .command-console #sendButton {
    display: block !important;
    width: 44px !important;
    height: 40px !important;
    border-radius: 3px !important;
    background: #d7ad46 !important;
    color: #080b12 !important;
  }
  .mobile-sheet-backdrop { background: rgba(3,5,10,.8) !important; backdrop-filter: blur(4px); }
  .mobile-sheet-card {
    padding: 27px 20px calc(24px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(215,173,70,.38) !important;
    border-radius: 22px 22px 0 0 !important;
    background: #101522 !important;
    box-shadow: 0 -18px 40px rgba(0,0,0,.5) !important;
  }
  .mobile-sheet-card::before { background: rgba(215,173,70,.45) !important; }
  .sheet-close { border: 0 !important; background: transparent !important; color: rgba(238,231,213,.72) !important; }
  .sheet-kicker { color: rgba(238,231,213,.5) !important; }
  .mobile-sheet h2 { color: #eee7d5 !important; font-size: 1.2rem !important; letter-spacing: .08em !important; }
  .sheet-actions, .sheet-items { gap: 0 !important; }
  .sheet-actions button, .sheet-item {
    display: flex !important;
    align-items: center;
    gap: 13px;
    min-height: 60px !important;
    padding: 9px 2px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(238,231,213,.1) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #eee7d5 !important;
    box-shadow: none !important;
    text-align: left;
  }
  .sheet-actions button:active, .sheet-item:active { background: rgba(215,173,70,.08) !important; }
  .sheet-action-icon { flex: 0 0 26px; color: #d7ad46; font-size: 1.05rem; text-align: center; }
  .sheet-action-copy { display: grid; gap: 2px; }
  .sheet-action-copy strong { color: #eee7d5; font-size: 1rem; font-weight: 600; }
  .sheet-action-copy small { color: rgba(238,231,213,.56); font-size: .78rem; line-height: 1.25; }
}

/* Final editorial pass: restrained chrome, clearer story hierarchy. */
@media (max-width: 767px) {
  :root { --story-bg: #080b12; --story-panel: #0e1320; --story-ink: #eee7d5; --story-muted: rgba(238,231,213,.62); --story-gold: #d6ad45; }
  .hud { background: var(--story-bg) !important; border-bottom-color: rgba(214,173,69,.16) !important; }
  .hud-progress { color: var(--story-gold) !important; }
  .hud-progress .material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-size: 18px;
    line-height: 1;
    vertical-align: -3px;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  }
  .hud-objective::before { color: var(--story-muted) !important; }
  .room-image-wrap { padding: 6px 0 0 !important; background: var(--story-bg) !important; }
  .room-image-wrap .room-image { height: clamp(205px, 54vw, 285px) !important; border-radius: 4px !important; border: 0 !important; }
  .screen { padding: 26px 20px 24px !important; background: var(--story-bg) !important; color: var(--story-ink) !important; font-size: 18px !important; line-height: 1.67 !important; }
  .screen .room-title { position: relative; margin-bottom: 25px !important; padding-bottom: 12px; color: var(--story-gold) !important; font-size: 1.3rem !important; letter-spacing: .1em !important; }
  .screen .room-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 1px; background: rgba(214,173,69,.38); }
  .screen .room-text { display: block; color: var(--story-ink) !important; }
  .screen .response { display: block !important; margin: 28px 0 0 8px !important; padding: 0 0 0 14px !important; border-left: 1px solid rgba(214,173,69,.28) !important; color: var(--story-muted) !important; }
  .screen .response + .response { margin-top: 26px !important; }
  .screen .response .clickable-word { color: var(--story-gold) !important; }
  .screen .command-echo { display: none !important; }
  .screen .separator { display: none !important; }
  .screen .clickable-word,
  .screen .room-text .clickable-word,
  .screen .response .clickable-word { color: var(--story-gold) !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; text-decoration: underline dotted rgba(214,173,69,.72) !important; text-underline-offset: 4px; transition: background-color 120ms ease, color 120ms ease; }
  .screen .clickable-word:active, .screen .clickable-word:focus-visible { color: #f1d788 !important; background: rgba(214,173,69,.1) !important; }
  .mobile-utility-bar { padding: 9px 20px 10px !important; gap: 24px !important; border: 0 !important; background: var(--story-bg) !important; }
  .mobile-utility-bar button { min-height: 44px !important; color: var(--story-muted) !important; font-size: .78rem !important; transition: opacity 140ms ease, color 140ms ease; }
  .mobile-utility-bar button:active { opacity: .65; color: var(--story-gold) !important; }
  .mobile-utility-bar strong { color: var(--story-gold) !important; }
  .command-panel.bottom-input { padding: 5px 20px calc(7px + env(safe-area-inset-bottom)) !important; border-top-color: rgba(214,173,69,.12) !important; background: var(--story-bg) !important; transition: padding 180ms ease, background-color 180ms ease; }
  .command-console { min-height: 40px !important; }
  .command-console input { height: 38px !important; font-size: .95rem !important; }
  .command-panel.bottom-input.is-expanded { padding-top: 8px !important; }
  .command-panel.bottom-input.is-expanded .command-console { border-bottom: 1px solid rgba(214,173,69,.34) !important; }
  .mobile-sheet-card { background: var(--story-panel) !important; border-top-color: rgba(214,173,69,.34) !important; border-radius: 22px 22px 0 0 !important; }
  .mobile-sheet-card::before { background: rgba(214,173,69,.42) !important; }
  .mobile-sheet h2 { color: var(--story-ink) !important; margin-bottom: 18px !important; }
  .sheet-actions button, .sheet-item { min-height: 60px !important; border-bottom-color: rgba(238,231,213,.09) !important; background: transparent !important; }
  .sheet-action-icon { color: var(--story-gold) !important; }
  .sheet-action-copy strong { color: var(--story-ink) !important; font-size: 1rem !important; }
  .sheet-action-copy small { color: var(--story-muted) !important; font-size: .8rem !important; }
}

/* Floating mobile dock: quick actions stay available without a bottom toolbar. */
.mobile-dock { display: none; }
@media (max-width: 767px) {
  .mobile-utility-bar { display: none !important; }
  .mobile-dock {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 70;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
  }
  .dock-button {
    position: relative;
    width: 50px;
    height: 50px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border: 1px solid rgba(238,231,213,.18);
    border-radius: 14px;
    background: rgba(14,19,32,.94);
    color: #d6ad45;
    box-shadow: 0 5px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
    font-size: 1.15rem;
    line-height: 1;
    transition: transform 120ms ease, opacity 120ms ease, background-color 120ms ease;
  }
  .dock-button:active { transform: scale(.94); background: #182238; }
  .dock-button:focus-visible { outline: 2px solid rgba(214,173,69,.78); outline-offset: 2px; }
  .dock-button .material-symbols-outlined {
    display: block;
    font-family: "Material Symbols Outlined";
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  }
  .dock-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 2px 4px;
    border: 1px solid #080b12;
    border-radius: 10px;
    background: #d6ad45;
    color: #080b12;
    font-family: "Courier New", monospace;
    font-size: 10px;
    font-weight: 700;
    line-height: 13px;
  }
  .screen { padding-bottom: 112px !important; }
  .command-panel.bottom-input:not(.is-expanded) { display: none !important; }
  .command-panel.bottom-input.is-expanded {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 65;
    display: block !important;
    padding-right: 84px !important;
    background: rgba(8,11,18,.97) !important;
  }
  body.has-mobile-sheet .mobile-dock,
  body:has(.mobile-sheet:not(.hidden)) .mobile-dock,
  body:has(.welcome-modal:not(.hidden)) .mobile-dock,
  body:has(.episode-intro-modal:not(.hidden)) .mobile-dock,
  body:has(.case-complete-modal:not(.hidden)) .mobile-dock,
  body:has(.account-modal:not(.hidden)) .mobile-dock,
  body:has(.tutorial-coachmark:not(.hidden)) .mobile-dock { display: none !important; }
}

@media (max-width: 767px) {
  .narrative-result { display: block; }
  .narrative-result .action-meta {
    display: block;
    margin: 0 0 7px 0;
    color: rgba(214,173,69,.62);
    font-family: "Courier New", monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .11em;
    line-height: 1.25;
    text-transform: uppercase;
  }
  .narrative-result > .response {
    margin-top: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: 0 !important;
    color: var(--story-muted) !important;
  }
  .narrative-result + .separator { display: none !important; }
}

@media (max-width: 767px) {
  .narrative-result {
    display: block !important;
    margin: 28px 0 0 6px !important;
    padding: 8px 0 8px 20px !important;
    border-left: 2px solid rgba(244,200,93,.48) !important;
  }
  .narrative-result .action-meta {
    margin: 0 0 8px !important;
    color: #f4c85d !important;
    font-family: "Space Grotesk", Arial, sans-serif !important;
    font-size: 12px !important;
    line-height: 16px !important;
    letter-spacing: .1em !important;
  }
  .narrative-result > .response {
    display: block !important;
    color: #ecc157 !important;
    font-family: "Source Serif 4", Georgia, serif !important;
    font-size: 19px !important;
    line-height: 30px !important;
  }
}

@media (max-width: 767px) {
  :root { --mobile-page-padding: 18px; }
  .hud-hints { display: none !important; }
  .hud-progress-group { gap: 0 !important; }
  .screen { padding-left: var(--mobile-page-padding) !important; padding-right: var(--mobile-page-padding) !important; padding-bottom: 0 !important; scroll-padding-bottom: 0 !important; font-size: 18px !important; line-height: 1.68 !important; }
  .screen .room-text, .screen .response, .narrative-result > .response { font-size: 18px !important; line-height: 1.68 !important; font-weight: 400 !important; }
  .screen .room-text br + br, .screen .response br + br { margin-bottom: 16px; }
  .narrative-result { margin-top: 36px !important; margin-bottom: 8px !important; }
  .narrative-result + .narrative-result { margin-top: 32px !important; }
  .narrative-result .action-meta { margin-bottom: 9px !important; }
  .screen .clickable-word { font-weight: 600 !important; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .screen .room-title { margin-bottom: 24px !important; font-size: 21px !important; letter-spacing: .09em !important; }
  .room-image-wrap.hidden-image { display: none !important; min-height: 0 !important; padding: 0 !important; }
  .mobile-dock { right: 14px !important; gap: 10px !important; }
  .dock-button { width: 50px !important; height: 50px !important; min-width: 48px !important; min-height: 48px !important; border-color: rgba(238,231,213,.1) !important; background: rgba(14,19,32,.32) !important; backdrop-filter: blur(4px) !important; box-shadow: 0 3px 10px rgba(0,0,0,.18) !important; }
  .dock-button .material-symbols-outlined { font-size: 24px !important; }
  .dock-badge { opacity: .78 !important; transform: scale(.9); }
}

@media (max-width: 767px) {
  .command-console .prompt { color: rgba(209,197,176,.62) !important; }
  .command-console #sendButton {
    background: transparent !important;
    color: #d6ad45 !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  .command-console #sendButton .material-symbols-outlined {
    font-family: "Material Symbols Outlined" !important;
    font-size: 24px !important;
    line-height: 1;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  }
}

/* Full-width manual command dock, inspired by the Stitch input treatment. */
@media (max-width: 767px) {
  .screen { padding-bottom: 0 !important; }
  .command-panel.bottom-input.is-expanded {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 65;
    display: block !important;
    width: 100%;
    max-height: none !important;
    padding: 8px 16px calc(10px + env(safe-area-inset-bottom)) !important;
    border-top: 0 !important;
    background: rgba(8,11,18,.88) !important;
    backdrop-filter: blur(8px);
  }
  .command-panel.bottom-input:not(.is-expanded) { display: none !important; }
  body:has(.command-panel.bottom-input.is-expanded) .screen { padding-bottom: 76px !important; }
  .command-console {
    display: flex !important;
    align-items: center;
    width: 100%;
    min-height: 56px !important;
    padding: 4px 3px 4px 14px;
    border: 1px solid rgba(214,173,69,.25) !important;
    border-radius: 999px !important;
    background: rgba(29,32,39,.86) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.3);
  }
  .command-console .prompt {
    flex: 0 0 24px;
    padding: 0 !important;
    color: #d6ad45 !important;
    font-family: "Material Symbols Outlined" !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }
  .command-console input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px !important;
    padding: 0 8px !important;
    border: 0 !important;
    background: transparent !important;
    color: #eee7d5 !important;
    font-family: "Space Grotesk", Arial, sans-serif !important;
    font-size: 15px !important;
    outline: 0 !important;
  }
  .command-console input::placeholder { color: rgba(238,231,213,.52) !important; }
  .command-console #clearButton { display: none !important; }
  .command-console #sendButton {
    display: flex !important;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #d6ad45 !important;
    color: #080b12 !important;
  }
  .command-console #sendButton:active { transform: scale(.94); }
}

@media (max-width: 767px) {
  .mobile-sheet-card { box-shadow: 0 -10px 40px rgba(16,19,27,.9) !important; }
  .sheet-action-icon {
    font-family: "Material Symbols Outlined" !important;
    font-size: 24px !important;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  }
  .sheet-actions button { transition: background-color 160ms ease, border-color 160ms ease; }
  .sheet-actions button:active { border-left: 3px solid #f4c85d !important; padding-left: 0 !important; }
}

/* Last mobile polish: keep the current composition, refine its rhythm. */
@media (max-width: 767px) {
  :root { --mobile-page-padding: 18px; }
  .hud-hints { display: none !important; }
  .hud-progress-group { gap: 0 !important; }
  .room-image-wrap { padding-left: 0 !important; padding-right: 0 !important; }
  .screen {
    padding-left: var(--mobile-page-padding) !important;
    padding-right: var(--mobile-page-padding) !important;
    font-size: 18px !important;
    line-height: 1.68 !important;
  }
  .screen .room-text,
  .screen .response,
  .narrative-result > .response {
    font-size: 18px !important;
    line-height: 1.68 !important;
    font-weight: 400 !important;
  }
  .screen .room-text br + br,
  .screen .response br + br { margin-bottom: 16px; }
  .narrative-result {
    margin-top: 36px !important;
    margin-bottom: 8px !important;
  }
  .narrative-result + .narrative-result { margin-top: 32px !important; }
  .narrative-result .action-meta { margin-bottom: 9px !important; }
  .screen .clickable-word {
    font-weight: 600 !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
  .screen .room-title {
    margin-bottom: 24px !important;
    font-size: 21px !important;
    letter-spacing: .09em !important;
  }
  .mobile-dock {
    right: 14px !important;
    gap: 10px !important;
  }
  .dock-button {
    width: 50px !important;
    height: 50px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-color: rgba(238,231,213,.1) !important;
    background: rgba(14,19,32,.32) !important;
    backdrop-filter: blur(4px) !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.18) !important;
  }
  .dock-button .material-symbols-outlined { font-size: 24px !important; }
  .dock-badge { opacity: .78 !important; transform: scale(.9); }
  .screen { padding-bottom: 116px !important; }
}

/* Final spacing refinement for the existing mobile composition. */
@media (max-width: 767px) {
  .screen {
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-weight: 400 !important;
    line-height: 1.76 !important;
  }
  .screen .room-text,
  .screen .response,
  .narrative-result > .response {
    font-weight: 400 !important;
    line-height: 1.76 !important;
    color: rgba(238,231,213,.9) !important;
  }
  .screen .room-text br + br,
  .screen .response br + br {
    display: block;
    content: "";
    margin-bottom: 13px;
  }
  .narrative-result {
    margin-top: 32px !important;
    margin-bottom: 6px !important;
    padding-top: 5px !important;
    padding-bottom: 8px !important;
  }
  .narrative-result + .narrative-result { margin-top: 28px !important; }
  .narrative-result .action-meta { margin-bottom: 10px !important; }
  .mobile-dock { right: 16px !important; gap: 8px !important; }
  .dock-button {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-color: rgba(238,231,213,.12) !important;
    background: rgba(14,19,32,.28) !important;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 12px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025) !important;
    color: rgba(214,173,69,.9) !important;
  }
  .dock-badge {
    top: -2px !important;
    right: -2px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 1px 3px !important;
    font-size: 9px !important;
    line-height: 13px !important;
    opacity: .86;
  }
  .mobile-dock {
    top: calc(58px + env(safe-area-inset-top)) !important;
    right: 16px !important;
    bottom: auto !important;
  }
.dock-button .material-symbols-outlined { font-size: 23px; }
}

@media (max-width: 767px) {
  .hud-room-title {
    display: block;
    grid-column: 2;
    justify-self: center;
    max-width: 48vw;
    overflow: hidden;
    color: rgba(214,173,69,.72);
    font-family: "Space Grotesk", Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .1em;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .hud-objective { grid-column: 3; justify-self: end; }
  .hud-objective {
    width: 44px !important;
    min-width: 44px !important;
    padding: 4px !important;
    font-size: 1rem !important;
  }
  .hud-objective::before { content: none !important; }
  .hud-objective .material-symbols-outlined {
    display: block;
    font-family: "Material Symbols Outlined";
    font-size: 21px;
    line-height: 1;
    color: #d6ad45;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  }
  .hud-progress-group {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
  }
  .hud-progress-group .hud-progress { grid-column: auto; }
  .hud-progress-group .hud-hints { grid-column: auto; justify-self: auto; min-width: 0; }
  .hud-progress .material-symbols-outlined { color: rgba(214,173,69,.9) !important; }
  .dock-button {
    border-color: transparent !important;
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
  .dock-button:active { background: rgba(14,19,32,.16) !important; }
  .dock-button .material-symbols-outlined { text-shadow: 0 1px 5px rgba(0,0,0,.9); }
  .mobile-dock { gap: 0 !important; }
  .hud-hints {
    grid-column: 3;
    justify-self: end;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    min-width: 38px;
    min-height: 36px;
    color: rgba(238,231,213,.68);
    font-family: "Space Grotesk", Arial, sans-serif;
    font-size: .82rem;
  }
  .hud-hints .material-symbols-outlined {
    color: rgba(214,173,69,.82);
    font-size: 17px;
    line-height: 1;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  }
}

/* Typography extracted from the approved illustrated-novel reference. */
@media (max-width: 767px) {
  .screen,
  .screen .room-text,
  .screen .response,
  .screen .final-narrative,
  .narrative-result > .response {
    font-family: "Source Serif 4", Georgia, serif !important;
    font-size: 19px !important;
    font-weight: 400 !important;
    line-height: 30px !important;
    color: #eee7d5 !important;
  }
  .screen .room-title,
  .hud,
  .mobile-utility-bar,
  .mobile-dock,
  .command-panel,
  .mobile-sheet,
  .action-meta,
  .sheet-kicker,
  .sheet-action-copy small {
    font-family: "Space Grotesk", Arial, sans-serif !important;
  }
  .screen .room-title { font-weight: 600 !important; }
  .action-meta {
    font-family: "Space Grotesk", Arial, sans-serif !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    color: rgba(244,200,93,.8) !important;
  }
}

@media (max-width: 767px) {
  .narrative-result { margin: 28px 0 0 !important; padding: 8px 0 !important; border-left: 0 !important; }
  .narrative-result .action-meta { margin: 0 0 8px !important; padding-left: 12px; border-left: 2px solid rgba(244,200,93,.48); color: #f4c85d !important; }
  .narrative-result > .response {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: #eee7d5 !important;
    font-family: "Source Serif 4", Georgia, serif !important;
    font-size: 19px !important;
    font-weight: 400 !important;
    line-height: 30px !important;
  }
}

/* Final override for the requested composition polish. */
@media (max-width: 767px) {
  :root { --mobile-page-padding: 18px; }
  .hud-hints { display: none !important; }
  .hud-progress-group { gap: 0 !important; }
  .room-image-wrap { padding-top: 0 !important; }
  .screen { margin-top: 0 !important; padding-top: 14px !important; padding-left: var(--mobile-page-padding) !important; padding-right: var(--mobile-page-padding) !important; padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important; font-size: 18px !important; line-height: 1.55 !important; }
  body:has(.command-panel.bottom-input.is-expanded) .screen { padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
  .screen .room-text { line-height: 1.65 !important; }
  .screen .intro-text { font-size: 18px !important; line-height: 1.62 !important; font-weight: 400 !important; }
  .screen .response, .narrative-result > .response { font-size: 18px !important; line-height: 1.55 !important; font-weight: 400 !important; }
  .game-area.game-complete .room-image {
    height: clamp(205px, 54vw, 285px) !important;
    max-height: none !important;
  }
  .room-image.is-dim-initial {
    filter: brightness(1.2) contrast(1.04) saturate(1.06) !important;
  }
  .screen .final-narrative { display: block !important; width: auto !important; margin: 0 !important; color: inherit !important; }
  .screen .final-narrative > .response { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; color: inherit !important; }
  .narrative-result { margin-top: 36px !important; margin-bottom: 8px !important; }
  .narrative-result + .narrative-result { margin-top: 32px !important; }
  .narrative-result .action-meta { margin-bottom: 9px !important; }
  .screen .clickable-word { font-weight: 600 !important; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .screen .room-title { margin-bottom: 24px !important; font-size: 21px !important; letter-spacing: .09em !important; }
  .mobile-dock { right: 14px !important; gap: 10px !important; }
  .dock-button { width: 50px !important; height: 50px !important; min-width: 48px !important; min-height: 48px !important; border-color: rgba(238,231,213,.1) !important; background: rgba(14,19,32,.32) !important; backdrop-filter: blur(4px) !important; box-shadow: 0 3px 10px rgba(0,0,0,.18) !important; }
  .dock-button .material-symbols-outlined { font-size: 24px !important; }
  .dock-badge { opacity: .78 !important; transform: scale(.9); }
}

@media (max-width: 767px) {
  .command-console .prompt { color: rgba(209,197,176,.62) !important; }
  .command-console #sendButton,
  .command-console #sendButton:hover,
  .command-console #sendButton:focus,
  .command-console #sendButton:active {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #d6ad45 !important;
    box-shadow: none !important;
    border: 0 !important;
    outline: 0 !important;
  }
  .command-console #sendButton .material-symbols-outlined { color: #d6ad45 !important; font-family: "Material Symbols Outlined" !important; font-size: 24px !important; line-height: 1; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }
}
.screen .intro-card {
  display: block;
  width: auto;
  margin: 0 0 1.4rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.screen.intro-reading {
  padding-top: 12px !important;
  scroll-behavior: auto;
  overflow-anchor: none;
}

.screen .intro-card .intro-kicker {
  margin-bottom: .8rem;
  color: var(--story-muted, #aeb5c2);
}

.screen .intro-card .intro-title {
  margin-bottom: 1rem;
  color: var(--story-ink, #eee7d5);
  font-family: inherit;
  font-size: 1.08rem;
  letter-spacing: .02em;
}

.screen .intro-card .intro-text {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.screen .intro-card .intro-actions {
  justify-content: flex-start;
  margin-top: 1.4rem;
}

.screen .intro-continue-hint,
.screen .final-continue-hint {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  width: 100%;
  margin-top: 22px !important;
  line-height: 1 !important;
  color: rgba(214, 173, 69, .82);
  font-family: "Space Grotesk", sans-serif;
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-align: right;
}

.screen .intro-continue-hint::before,
.screen .final-continue-hint::before {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 173, 69, .7));
}

.screen .intro-continue-hint::after,
.screen .final-continue-hint::after {
  content: "\2192";
  margin-left: 1px;
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: 0;
  transform: translateY(-1px);
}

.screen .intro-continue-hint.hidden {
  display: none;
}

.screen .final-continue-hint.hidden {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .screen .intro-continue-hint:not(.hidden),
  .screen .final-continue-hint:not(.hidden) {
    animation: editorialContinueReveal 420ms ease-out both;
  }

  @keyframes editorialContinueReveal {
    from { opacity: 0; transform: translateX(-5px); }
    to { opacity: 1; transform: translateX(0); }
  }
}

/* Informe final: composición basada en la referencia aprobada. */
.case-complete-modal {
  background: rgba(16, 19, 27, .66);
  backdrop-filter: blur(12px);
}

.case-complete-modal-card {
  width: min(100%, 480px);
  padding: 8px;
  border: 1px solid rgba(244, 200, 93, .2);
  border-radius: 9px;
  background: rgba(23, 29, 42, .94);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .62), 0 0 20px rgba(244, 200, 93, .05);
}

.case-complete-modal-card .final-card {
  gap: 24px;
  padding: 24px 22px 20px;
  border: 0;
  border-radius: 5px;
  background: transparent;
}

.case-complete-modal-card .final-kicker {
  display: block;
  width: 100%;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(244, 200, 93, .1);
  color: #f4c85d;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-align: center;
}

.case-complete-modal-card .final-metrics {
  gap: 16px;
  margin: 0;
}

.case-complete-modal-card .final-metrics > span {
  min-height: 78px;
  padding: 14px 8px;
  border: 1px solid rgba(244, 200, 93, .15);
  border-radius: 7px;
  background: rgba(29, 32, 39, .55);
}

.case-complete-modal-card .final-metrics small,
.case-complete-modal-card .final-score small,
.case-complete-modal-card .final-rank small {
  color: #9e988d;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.case-complete-modal-card .final-metrics strong {
  color: #e0e2ed;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
}

.case-complete-modal-card .final-score {
  gap: 8px;
  padding: 0;
  border: 0;
  text-align: center;
}

.case-complete-modal-card .final-score strong {
  color: #f4c85d;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 2.35rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.case-complete-modal-card .final-score span {
  max-width: 280px;
  margin: 0 auto;
  color: #d1c5b0;
  font-size: .86rem;
  line-height: 1.55;
}

.case-complete-modal-card .final-rank {
  gap: 7px;
  margin: 0;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid rgba(244, 200, 93, .2);
  border-radius: 0;
  background: transparent;
  text-align: center;
}

.case-complete-modal-card .final-rank strong {
  color: #f4c85d;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 1.2rem;
  letter-spacing: .08em;
}

.case-complete-modal-card .final-social-actions {
  gap: 16px;
  margin: 0;
}

.case-complete-modal-card .final-social-actions button {
  min-height: 48px;
  border: 1px solid rgba(244, 200, 93, .12);
  border-radius: 7px;
  color: #e0e2ed;
  background: rgba(50, 53, 61, .56);
}

.case-complete-modal-card .final-social-actions button:hover,
.case-complete-modal-card .final-social-actions button:focus-visible {
  border-color: rgba(244, 200, 93, .4);
  color: #f4c85d;
  background: rgba(244, 200, 93, .1);
}

.case-complete-modal-card .final-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  margin: 0;
}

.case-complete-modal-card .final-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  border-radius: 7px;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.case-complete-modal-card .final-primary {
  border: 1px solid #d6ad45;
  color: #3e2e00;
  background: #d6ad45;
}

.case-complete-modal-card .final-primary:hover,
.case-complete-modal-card .final-primary:focus-visible {
  filter: brightness(1.1);
}

.case-complete-modal-card .final-archive {
  width: 100%;
  border: 1px solid rgba(244, 200, 93, .4);
  color: #eee7d5;
  background: transparent;
}

.case-complete-modal-card .final-archive:hover,
.case-complete-modal-card .final-archive:focus-visible {
  border-color: #f4c85d;
  color: #f4c85d;
  background: rgba(244, 200, 93, .08);
}

.case-complete-close {
  top: 13px;
  right: 13px;
  width: 30px;
  height: 30px;
  border-color: rgba(244, 200, 93, .15);
  color: #9e988d;
  background: transparent;
}

@media (max-width: 520px) {
  .case-complete-modal {
    align-items: center;
    padding: 10px;
  }

  .case-complete-modal-card {
    max-height: calc(100% - 20px);
  }

  .case-complete-modal-card .final-card {
    gap: 20px;
    padding: 22px 14px 16px;
  }

  .case-complete-modal-card .final-social-actions {
    gap: 9px;
  }
}

/* Transición editorial al cambiar la ilustración de la escena. */
.room-image-wrap {
  overflow: hidden;
  isolation: isolate;
}

.room-image-wrap .room-image-previous {
  position: absolute !important;
  inset: 0;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover;
  pointer-events: none;
  animation: sceneImageOut 420ms ease-out both;
}

.room-image-wrap .room-image.is-scene-entering {
  animation: sceneImageIn 420ms cubic-bezier(.2, .7, .2, 1) both;
}

.room-image-wrap.is-scene-changing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid rgba(214, 173, 69, .58);
  box-shadow: inset 0 0 24px rgba(214, 173, 69, .16);
  pointer-events: none;
  animation: sceneImageGlow 560ms ease-out both;
}

@keyframes sceneImageIn {
  from { opacity: .28; transform: scale(1.015); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes sceneImageOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes sceneImageGlow {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .room-image-wrap .room-image-previous {
    display: none;
  }

  .room-image-wrap .room-image.is-scene-entering,
  .room-image-wrap.is-scene-changing::after {
    animation: none;
  }
}

/* V101: la superficie móvil de juego es también la única interfaz de escritorio. */
@media (min-width: 768px) {
  .game-shell:has(> .game-area:not(.hidden)) {
    width: min(430px, 100%);
    height: calc(var(--app-height, 100vh) - 20px);
    min-height: 0;
    overflow: hidden;
    border: 0;
    background: #080b12;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .42);
  }

  .game-shell:has(> .game-area:not(.hidden)) > .game-header {
    display: none;
  }

  .game-shell:has(> .game-area:not(.hidden)) > .game-area {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow: hidden;
    background: #080b12;
  }

  .game-area:not(.hidden) .hud {
    position: relative;
    top: auto;
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    flex: 0 0 48px;
    min-height: 48px;
    height: 48px;
    gap: 8px;
    padding: 5px 18px;
    border-bottom: 1px solid rgba(214, 173, 69, .16);
    background: #080b12;
    box-shadow: none;
    font-family: "Space Grotesk", Arial, sans-serif;
  }

  .game-area:not(.hidden) .hud-progress-group {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-height: 36px;
  }

  .game-area:not(.hidden) .hud-progress {
    justify-self: start;
    min-height: 36px;
    padding: 4px 5px;
    border: 0;
    color: #d6ad45;
    background: transparent;
    box-shadow: none;
    font: inherit;
    font-size: .85rem;
  }

  .game-area:not(.hidden) .hud-progress .material-symbols-outlined {
    color: rgba(214, 173, 69, .9);
    font-family: "Material Symbols Outlined";
    font-size: 18px;
    line-height: 1;
    vertical-align: -3px;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  }

  .game-area:not(.hidden) .hud-room-title {
    grid-column: 2;
    justify-self: center;
    display: block;
    max-width: 205px;
    overflow: hidden;
    color: rgba(214, 173, 69, .72);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .1em;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .game-area:not(.hidden) .hud-objective {
    grid-column: 3;
    justify-self: end;
    width: 44px;
    min-width: 44px;
    min-height: 36px;
    padding: 4px;
    overflow: hidden;
    border: 0;
    color: #d6ad45;
    background: transparent;
    box-shadow: none;
    font-size: 1rem;
  }

  .game-area:not(.hidden) .hud-objective::before { content: none; }
  .game-area:not(.hidden) .hud-objective .material-symbols-outlined {
    display: block;
    color: #d6ad45;
    font-family: "Material Symbols Outlined";
    font-size: 21px;
    line-height: 1;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  }

  .game-area:not(.hidden) .hud-desktop-stat,
  .game-area:not(.hidden) .hud-mode,
  .game-area:not(.hidden) .hud-menu-button,
  .game-area:not(.hidden) .hud-hints,
  .game-area:not(.hidden) .room-image-tools,
  .game-area:not(.hidden) .mission-strip,
  .game-area:not(.hidden) .mobile-utility-bar,
  .game-area:not(.hidden) .command-panel.bottom-input .control-deck {
    display: none !important;
  }

  .game-area:not(.hidden) .room-image-wrap {
    flex: 0 0 auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: #080b12;
  }

  .game-area:not(.hidden) .room-image-wrap.hidden-image {
    display: none;
  }

  .game-area:not(.hidden) .room-image-wrap .room-image {
    display: block;
    width: 100%;
    height: 232px;
    max-height: none;
    object-fit: cover;
    image-rendering: pixelated;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: none;
  }

  .game-area:not(.hidden).game-complete .room-image {
    height: 232px;
    max-height: none;
  }

  .game-area:not(.hidden) .room-image.is-dim-initial {
    filter: brightness(1.2) contrast(1.04) saturate(1.06);
  }

  .game-area:not(.hidden) > .screen {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 14px 18px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 0;
    background: #080b12;
    box-shadow: none;
    color: #eee7d5;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    scrollbar-width: thin;
    scrollbar-color: rgba(214, 173, 69, .28) transparent;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }

  .game-area:not(.hidden) > .screen::-webkit-scrollbar {
    width: 5px;
  }

  .game-area:not(.hidden) > .screen::-webkit-scrollbar-track {
    background: transparent;
  }

  .game-area:not(.hidden) > .screen::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(214, 173, 69, .26);
  }

  .game-area:not(.hidden) > .screen::-webkit-scrollbar-thumb:hover {
    background: rgba(214, 173, 69, .46);
  }

  .game-area:not(.hidden) > .dialogue-panel {
    scrollbar-width: thin;
    scrollbar-color: rgba(214, 173, 69, .28) transparent;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }

  .game-area:not(.hidden) > .dialogue-panel::-webkit-scrollbar {
    width: 5px;
  }

  .game-area:not(.hidden) > .dialogue-panel::-webkit-scrollbar-track {
    background: transparent;
  }

  .game-area:not(.hidden) > .dialogue-panel::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(214, 173, 69, .26);
  }

  .game-area:not(.hidden) > .dialogue-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(214, 173, 69, .46);
  }

  .game-area:not(.hidden) .screen .room-text {
    display: block;
    color: #eee7d5;
    font: inherit;
    line-height: 1.65;
  }

  .game-area:not(.hidden) .screen .intro-text {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.62;
  }

  .game-area:not(.hidden) .screen .response,
  .game-area:not(.hidden) .narrative-result > .response {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    color: #eee7d5;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
  }

  .game-area:not(.hidden) .narrative-result {
    display: block;
    margin: 36px 0 8px;
    padding: 8px 0;
    border-left: 0;
  }

  .game-area:not(.hidden) .narrative-result + .narrative-result { margin-top: 32px; }
  .game-area:not(.hidden) .narrative-result .action-meta {
    display: block;
    margin: 0 0 9px;
    padding-left: 12px;
    border-left: 2px solid rgba(244, 200, 93, .48);
    color: #f4c85d;
    font-family: "Space Grotesk", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .game-area:not(.hidden) .screen .room-title {
    display: block;
    margin-bottom: 24px;
    color: #d6ad45;
    font-family: "Space Grotesk", Arial, sans-serif;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .09em;
  }

  .game-area:not(.hidden) .screen .command-echo,
  .game-area:not(.hidden) .screen .separator { display: none; }

  .game-area:not(.hidden) .screen .clickable-word {
    display: inline-block;
    min-height: 30px;
    margin: -6px -3px;
    padding: 6px 3px;
    border: 0;
    border-radius: 0;
    color: #d6ad45;
    background: transparent;
    box-shadow: none;
    font-weight: 600;
    text-decoration: underline dotted rgba(214, 173, 69, .72);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }

  .game-area:not(.hidden) .mobile-dock {
    position: absolute;
    top: 58px;
    right: 14px;
    bottom: auto;
    z-index: 70;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: "Space Grotesk", Arial, sans-serif;
  }

  .game-area:not(.hidden) .dock-button {
    position: relative;
    width: 50px;
    height: 50px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border: 1px solid rgba(238, 231, 213, .1);
    border-radius: 14px;
    color: rgba(214, 173, 69, .9);
    background: rgba(14, 19, 32, .32);
    backdrop-filter: blur(4px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
  }

  .game-area:not(.hidden) .dock-button .material-symbols-outlined {
    display: block;
    font-family: "Material Symbols Outlined";
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .9);
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  }

  .game-area:not(.hidden) .dock-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    display: grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    padding: 1px 3px;
    border: 1px solid #080b12;
    border-radius: 10px;
    color: #080b12;
    background: #d6ad45;
    font-size: 9px;
    font-weight: 700;
    line-height: 13px;
  }

  .game-area:not(.hidden) .command-panel.bottom-input:not(.is-expanded) {
    display: none;
  }

  .game-area:not(.hidden) .command-panel.bottom-input.is-expanded {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 65;
    display: block;
    width: 100%;
    max-height: none;
    padding: 8px 16px 10px;
    border-top: 0;
    background: rgba(8, 11, 18, .88);
    backdrop-filter: blur(8px);
  }

  .game-area:not(.hidden):has(.command-panel.bottom-input.is-expanded) > .screen {
    padding-bottom: 76px;
  }

  .game-area:not(.hidden) .command-console {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 56px;
    padding: 4px 3px 4px 14px;
    border: 1px solid rgba(214, 173, 69, .25);
    border-radius: 999px;
    background: rgba(29, 32, 39, .86);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
  }

  .game-area:not(.hidden) .command-console .prompt {
    flex: 0 0 24px;
    padding: 0;
    color: rgba(209, 197, 176, .62);
    font-family: "Material Symbols Outlined";
    font-size: 22px;
    line-height: 1;
  }

  .game-area:not(.hidden) .command-console input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 8px;
    border: 0;
    outline: 0;
    color: #eee7d5;
    background: transparent;
    font-family: "Space Grotesk", Arial, sans-serif;
    font-size: 15px;
  }

  .game-area:not(.hidden) .command-console #clearButton { display: none; }
  .game-area:not(.hidden) .command-console #sendButton,
  .game-area:not(.hidden) .command-console #sendButton:hover,
  .game-area:not(.hidden) .command-console #sendButton:focus,
  .game-area:not(.hidden) .command-console #sendButton:active {
    display: flex;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    min-height: 46px;
    border: 0;
    border-radius: 50%;
    outline: 0;
    color: #d6ad45;
    background: transparent;
    box-shadow: none;
  }

  .game-area:not(.hidden) .mobile-sheet {
    position: absolute;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: flex-end;
    font-family: "Space Grotesk", Arial, sans-serif;
  }

  .game-area:not(.hidden) .mobile-sheet.hidden { display: none; }
  .game-area:not(.hidden) .mobile-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 5, 10, .8);
    backdrop-filter: blur(4px);
  }

  .game-area:not(.hidden) .mobile-sheet-card {
    position: relative;
    width: 100%;
    max-height: min(78vh, 620px);
    overflow-y: auto;
    padding: 27px 20px 24px;
    border-top: 1px solid rgba(214, 173, 69, .34);
    border-radius: 22px 22px 0 0;
    background: #0e1320;
    box-shadow: 0 -10px 40px rgba(16, 19, 27, .9);
  }

  .game-area:not(.hidden) .sheet-close {
    position: absolute;
    top: 12px;
    right: 18px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    color: rgba(238, 231, 213, .72);
    background: transparent;
    font-size: 1.7rem;
    line-height: 1;
  }

  .game-area:not(.hidden) .sheet-kicker {
    display: block;
    margin-bottom: 5px;
    color: rgba(238, 231, 213, .5);
    font-size: .72rem;
    letter-spacing: .14em;
  }

  .game-area:not(.hidden) .mobile-sheet h2 {
    margin: 0 48px 18px 0;
    color: #eee7d5;
    font-size: 1.2rem;
    letter-spacing: .08em;
  }

  .game-area:not(.hidden) .mobile-sheet p {
    margin: 0;
    color: #eee7d5;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.06rem;
    line-height: 1.55;
  }

  .game-area:not(.hidden) .sheet-actions,
  .game-area:not(.hidden) .sheet-items {
    display: grid;
    gap: 0;
  }

  .game-area:not(.hidden) .sheet-actions button,
  .game-area:not(.hidden) .sheet-item {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-height: 60px;
    padding: 9px 2px;
    border: 0;
    border-bottom: 1px solid rgba(238, 231, 213, .09);
    border-radius: 0;
    color: #eee7d5;
    background: transparent;
    box-shadow: none;
    font: inherit;
    text-align: left;
  }

  .game-area:not(.hidden) .sheet-action-icon {
    flex: 0 0 26px;
    color: #d6ad45;
    font-family: "Material Symbols Outlined";
    font-size: 24px;
    text-align: center;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  }

  .game-area:not(.hidden) .sheet-action-copy {
    display: grid;
    gap: 2px;
  }

  .game-area:not(.hidden) .sheet-action-copy strong,
  .game-area:not(.hidden) .sheet-item strong {
    color: #eee7d5;
    font-size: 1rem;
    font-weight: 600;
  }

  .game-area:not(.hidden) .sheet-action-copy small,
  .game-area:not(.hidden) .sheet-item small,
  .game-area:not(.hidden) .inventory-empty {
    color: rgba(238, 231, 213, .62);
    font-size: .8rem;
    line-height: 1.3;
  }

  .game-area:not(.hidden) > .dialogue-panel {
    flex: 0 0 auto;
    max-height: 52vh;
    overflow-y: auto;
    margin: 0;
    padding: 16px 18px;
    border: 0;
    border-top: 1px solid rgba(214, 173, 69, .34);
    border-radius: 0;
    background: #0e1320;
  }

  .game-area:not(.hidden) .dialogue-text {
    margin: .55rem 0 .8rem;
    color: #eee7d5;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.08rem;
    line-height: 1.55;
  }

  .game-area:not(.hidden) .dialogue-option {
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid rgba(214, 173, 69, .3);
    border-radius: 8px;
    color: #eee7d5;
    background: rgba(214, 173, 69, .07);
    font-size: .98rem;
    text-align: left;
  }

  .game-area:not(.hidden) .action-feedback {
    position: absolute;
    z-index: 100;
    top: 62px;
    left: 50%;
    display: block;
    transform: translateX(-50%);
    padding: 9px 14px;
    border: 1px solid #d6ad45;
    border-radius: 20px;
    color: #d6ad45;
    background: #0e1320;
    font-family: "Space Grotesk", Arial, sans-serif;
    font-size: .82rem;
    white-space: nowrap;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .4);
  }

  .game-area:not(.hidden) .action-feedback.hidden { display: none; }

  body.has-mobile-sheet .game-area:not(.hidden) .mobile-dock,
  .game-area:not(.hidden):has(.mobile-sheet:not(.hidden)) .mobile-dock,
  .game-area:not(.hidden):has(.welcome-modal:not(.hidden)) .mobile-dock,
  .game-area:not(.hidden):has(.episode-intro-modal:not(.hidden)) .mobile-dock,
  .game-area:not(.hidden):has(.case-complete-modal:not(.hidden)) .mobile-dock,
  .game-area:not(.hidden):has(.account-modal:not(.hidden)) .mobile-dock,
  .game-area:not(.hidden):has(.tutorial-coachmark:not(.hidden)) .mobile-dock {
    display: none;
  }
}

/* V107: portada interior premium de cada archivo. */
.archive-detail-view {
  width: min(900px, 100%);
  margin: 0 auto;
  padding: 22px clamp(20px, 4vw, 42px) 36px;
  color: var(--home-cream);
  font-family: Georgia, "Times New Roman", serif;
}

.start-menu.is-detail-view .home-detail-cover,
.start-menu.is-detail-view .menu-content {
  display: none !important;
}

.start-menu.is-detail-view .home-header {
  justify-content: flex-start;
}

.start-menu.is-detail-view .home-brand {
  order: 2;
}

.start-menu.is-detail-view .cover-back-button {
  order: 1;
  display: grid;
  place-items: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  margin: 0 18px 0 0;
  padding: 0;
  border: 0;
  color: var(--home-gold-bright);
  background: transparent;
  box-shadow: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.15rem;
  font-weight: 400;
  line-height: 1;
}

.archive-detail-hero {
  overflow: hidden;
  border: 1px solid rgba(200, 155, 75, .62);
  border-radius: 16px;
  background: var(--home-panel);
}

.archive-detail-hero-media {
  position: relative;
  height: clamp(260px, 43vw, 440px);
  overflow: hidden;
}

.archive-detail-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--home-panel) 0, rgba(13, 19, 27, .34) 48%, rgba(8, 13, 18, .04) 80%);
  pointer-events: none;
}

.archive-detail-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.75) contrast(1.08) brightness(.72);
}

.archive-detail-hero-body {
  position: relative;
  z-index: 2;
  display: grid;
  margin-top: -94px;
  padding: 0 clamp(24px, 5vw, 42px) 28px;
}

.archive-detail-kicker,
.archive-detail-section > h3,
.archive-detail-progress > div {
  color: var(--home-gold-bright);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.archive-detail-hero h2 {
  margin: 13px 0 10px;
  color: var(--home-cream);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 7vw, 4.4rem);
  font-weight: 400;
  line-height: 1;
}

.archive-detail-subtitle,
.archive-detail-synopsis {
  max-width: 650px;
  margin: 0;
  color: rgba(241, 230, 210, .72);
  font-size: 1rem;
  line-height: 1.5;
}

.archive-detail-subtitle {
  margin-bottom: 10px;
  font-style: italic;
}

.archive-detail-synopsis {
  color: rgba(241, 230, 210, .8);
}

.archive-detail-progress {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.archive-detail-progress > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.archive-detail-progress > div strong {
  font-weight: 400;
}

.archive-detail-progress-track {
  display: grid;
  grid-template-columns: repeat(var(--archive-segments), minmax(4px, 1fr));
  gap: 6px;
}

.archive-detail-progress-track span {
  height: 7px;
  border-radius: 999px;
  background: rgba(143, 152, 167, .22);
}

.archive-detail-progress-track span.done {
  background: linear-gradient(90deg, #c28d3d, #e0b565);
}

.archive-detail-primary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  margin-top: 24px;
  padding: 12px 54px 12px 20px;
  border: 1px solid #e0b565;
  border-radius: 9px;
  color: #17120a;
  background: linear-gradient(180deg, rgba(255,255,255,.17), transparent 48%), #cda04e;
  box-shadow: inset 0 0 0 2px rgba(92,58,15,.16);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .83rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.archive-detail-primary > span:last-child {
  position: absolute;
  right: 26px;
  font-size: 1.55rem;
  font-weight: 400;
}

.archive-detail-complete,
.archive-next-empty {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid rgba(127, 179, 90, .42);
  border-radius: 8px;
  color: var(--home-green);
  font-size: .72rem;
  letter-spacing: .14em;
  text-align: center;
}

.archive-detail-section {
  margin-top: 24px;
}

.archive-detail-section > h3 {
  margin: 0 12px 12px;
}

.archive-next-card,
.archive-episode-row {
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(200, 155, 75, .42);
  color: var(--home-cream);
  background: #0d131b;
  box-shadow: none;
  font-family: Georgia, "Times New Roman", serif;
  text-align: left;
}

.archive-next-card {
  display: grid;
  grid-template-columns: minmax(180px, 34%) minmax(0, 1fr) 42px;
  align-items: stretch;
  min-height: 160px;
  padding: 0;
  border-radius: 14px;
}

.archive-next-card:disabled,
.archive-episode-row:disabled {
  cursor: default;
  opacity: .52;
}

.archive-next-image,
.archive-row-image {
  display: block;
  overflow: hidden;
  background: #090d12;
}

.archive-next-image img,
.archive-row-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.7) contrast(1.06) brightness(.68);
}

.archive-next-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: 20px 22px;
}

.archive-next-copy > strong {
  margin: 8px 0 7px;
  color: var(--home-cream);
  font-size: clamp(1.45rem, 4vw, 2rem);
  font-weight: 400;
  line-height: 1.08;
}

.archive-next-copy > small {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(241, 230, 210, .65);
  font-size: .9rem;
  font-style: italic;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.archive-next-arrow,
.archive-row-arrow {
  align-self: center;
  color: var(--home-gold-bright);
  font-size: 1.8rem;
}

.archive-episode-state {
  margin-top: 9px;
  font-size: .67rem;
  font-style: normal;
  letter-spacing: .1em;
}

.archive-episode-state.is-completed,
.archive-episode-state.is-available {
  color: var(--home-green);
}

.archive-episode-state.is-in-progress {
  color: var(--home-gold-bright);
}

.archive-episode-state.is-locked,
.archive-episode-state.is-upcoming {
  color: var(--home-muted);
}

.archive-episode-list {
  display: grid;
  gap: 8px;
}

.archive-episode-row {
  display: grid;
  grid-template-columns: 175px 34px minmax(0, 1fr) 36px;
  align-items: center;
  min-height: 104px;
  padding: 0;
  border-radius: 12px;
}

.archive-row-image {
  align-self: stretch;
}

.archive-row-icon {
  display: grid;
  place-items: center;
  width: 34px;
  color: var(--home-gold-bright);
  font-size: 21px;
}

.archive-row-icon.is-completed {
  color: var(--home-green);
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
}

.archive-row-copy {
  display: grid;
  min-width: 0;
  padding: 14px 10px;
}

.archive-row-copy > strong {
  margin-top: 5px;
  overflow: hidden;
  color: var(--home-cream);
  font-size: 1.38rem;
  font-weight: 400;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-row-copy .archive-episode-state {
  margin-top: 5px;
}

.archive-next-card:not(:disabled):hover,
.archive-next-card:not(:disabled):focus-visible,
.archive-episode-row:not(:disabled):hover,
.archive-episode-row:not(:disabled):focus-visible {
  border-color: rgba(224, 181, 101, .72);
  filter: brightness(1.05);
}

@media (max-width: 640px) {
  .archive-detail-view {
    padding: 14px 14px 24px;
  }

  .start-menu.is-detail-view .cover-back-button {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    margin-right: 8px;
    font-size: 1.85rem;
  }

  .archive-detail-hero {
    border-radius: 12px;
  }

  .archive-detail-hero-media {
    height: clamp(210px, 62vw, 280px);
  }

  .archive-detail-hero-body {
    margin-top: -62px;
    padding: 0 18px 18px;
  }

  .archive-detail-hero h2 {
    margin-top: 9px;
    font-size: clamp(2.05rem, 11vw, 3rem);
  }

  .archive-detail-subtitle,
  .archive-detail-synopsis {
    font-size: .9rem;
    line-height: 1.42;
  }

  .archive-detail-progress {
    margin-top: 17px;
  }

  .archive-detail-progress-track {
    gap: 4px;
  }

  .archive-detail-progress-track span {
    height: 6px;
  }

  .archive-detail-primary {
    min-height: 54px;
    margin-top: 19px;
    font-size: .7rem;
    letter-spacing: .11em;
  }

  .archive-detail-section {
    margin-top: 20px;
  }

  .archive-detail-section > h3 {
    margin: 0 10px 10px;
    font-size: .65rem;
  }

  .archive-next-card {
    grid-template-columns: 112px minmax(0, 1fr) 28px;
    min-height: 128px;
    border-radius: 11px;
  }

  .archive-next-copy {
    padding: 14px 12px;
  }

  .archive-next-copy > strong {
    margin: 6px 0 5px;
    font-size: 1.26rem;
  }

  .archive-next-copy > small {
    font-size: .78rem;
  }

  .archive-episode-row {
    grid-template-columns: 94px 28px minmax(0, 1fr) 26px;
    min-height: 84px;
    border-radius: 9px;
  }

  .archive-row-icon {
    width: 28px;
    font-size: 18px;
  }

  .archive-row-copy {
    padding: 10px 6px;
  }

  .archive-row-copy > strong {
    font-size: 1.08rem;
  }

  .archive-detail-kicker,
  .archive-detail-progress > div {
    font-size: .6rem;
    letter-spacing: .15em;
  }

  .archive-row-copy .archive-episode-state {
    font-size: .58rem;
  }
}

@media (max-width: 360px) {
  .archive-detail-view {
    padding-inline: 10px;
  }

  .archive-next-card {
    grid-template-columns: 92px minmax(0, 1fr) 24px;
  }

  .archive-episode-row {
    grid-template-columns: 76px 25px minmax(0, 1fr) 22px;
  }

  .archive-row-icon {
    width: 25px;
  }

  .archive-row-copy > strong {
    font-size: .98rem;
  }
}
.tutorial-response {
  color: inherit;
}

.tutorial-paragraph {
  font-style: italic;
  color: var(--story-muted, #a8a29a);
}

.conversation-mode #screen,
.conversation-mode #commandPanel,
.conversation-mode .mission-strip {
  display: none;
  pointer-events: none;
}

.conversation-mode .dialogue-panel {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 16px var(--mobile-gutter, 18px);
  border: 0;
  border-radius: 0;
  background: #080b12 !important;
  box-shadow: none;
}

.game-area.conversation-mode {
  background: #080b12 !important;
  display: block;
  height: 0;
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(214, 173, 69, .28) transparent;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.game-area.conversation-mode .dialogue-panel {
  display: block;
  max-height: none;
  overflow: visible;
  min-height: auto;
}

.game-area.conversation-mode::-webkit-scrollbar {
  width: 5px;
}

.game-area.conversation-mode::-webkit-scrollbar-track {
  background: transparent;
}

.game-area.conversation-mode::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(214, 173, 69, .26);
}

.game-area.conversation-mode::-webkit-scrollbar-thumb:hover {
  background: rgba(214, 173, 69, .46);
}

html:has(.game-area.conversation-mode),
body:has(.game-area.conversation-mode) {
  overflow-y: auto;
}

body:has(.game-area.conversation-mode) {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  align-items: flex-start;
}

body:has(.game-area.conversation-mode) .game-shell {
  height: auto;
  min-height: calc(var(--app-height, 100vh) - 20px);
}

body:has(.game-area.conversation-mode) .game-area.conversation-mode {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* La conversación desplaza solo su área de contenido; el navegador permanece fijo. */
html:has(.game-area.conversation-mode) {
  height: 100%;
  overflow: hidden !important;
}

body:has(.game-area.conversation-mode) {
  height: 100%;
  min-height: 0;
  overflow: hidden !important;
  align-items: stretch;
}

body:has(.game-area.conversation-mode) .game-shell {
  height: calc(var(--app-height, 100vh) - 20px);
  min-height: 0;
  overflow: hidden;
}

body:has(.game-area.conversation-mode) .game-area.conversation-mode {
  height: 0 !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body:has(.game-area.conversation-mode) .game-area.conversation-mode > .hud {
  position: sticky !important;
  top: 0;
  z-index: 22;
}

body:has(.game-area.conversation-mode) .game-area.conversation-mode > .room-image-wrap {
  position: sticky !important;
  top: 54px;
  z-index: 21;
  background: #080b12;
}

/* En conversación solo se desplaza el texto; las opciones quedan ancladas. */
body:has(.game-area.conversation-mode) .game-area.conversation-mode {
  display: flex !important;
  flex-direction: column;
  overflow: hidden !important;
}

body:has(.game-area.conversation-mode) .game-area.conversation-mode > .dialogue-panel {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

body:has(.game-area.conversation-mode) .game-area.conversation-mode #dialogueText {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(214, 173, 69, .28) transparent;
  -webkit-overflow-scrolling: touch;
}

body:has(.game-area.conversation-mode) .game-area.conversation-mode #dialogueOptions,
body:has(.game-area.conversation-mode) .game-area.conversation-mode #dialogueContinue {
  flex: 0 0 auto;
}

body:has(.game-area.conversation-mode) #dialogueText::-webkit-scrollbar {
  width: 5px;
}

body:has(.game-area.conversation-mode) #dialogueText::-webkit-scrollbar-track {
  background: transparent;
}

body:has(.game-area.conversation-mode) #dialogueText::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(214, 173, 69, .26);
}

/* El diálogo usa exactamente el mismo modelo que la pantalla normal de juego. */
body:has(.game-area.conversation-mode) .game-area.conversation-mode {
  display: flex !important;
  flex-direction: column !important;
  height: 0 !important;
  flex: 1 1 0 !important;
  overflow: hidden !important;
}

body:has(.game-area.conversation-mode) .game-area.conversation-mode > .hud,
body:has(.game-area.conversation-mode) .game-area.conversation-mode > .room-image-wrap {
  position: static !important;
  flex: 0 0 auto !important;
}

body:has(.game-area.conversation-mode) .game-area.conversation-mode > .dialogue-panel {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(214, 173, 69, .28) transparent;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

body:has(.game-area.conversation-mode) .game-area.conversation-mode #dialogueText {
  overflow: visible !important;
  min-height: auto !important;
}

@media (max-width: 767px) {
  .game-area.conversation-mode {
    display: block !important;
    flex: 1 1 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

/* Cortina cinematográfica entre la narración y el modo conversación. */
.game-area.conversation-transition-entering::before,
.game-area.conversation-transition-entering::after,
.game-area.conversation-transition-leaving::before,
.game-area.conversation-transition-leaving::after,
.game-area.conversation-transition-returning::before,
.game-area.conversation-transition-returning::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 28;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(188, 142, 54, .035), transparent 22%),
    linear-gradient(90deg, #05080d, #080b12 62%, #030509);
  will-change: transform;
}

.game-area.conversation-transition-entering::before,
.game-area.conversation-transition-leaving::before,
.game-area.conversation-transition-returning::before {
  left: 0;
  transform-origin: left center;
  box-shadow: inset -1px 0 rgba(214, 173, 69, .16);
}

.game-area.conversation-transition-entering::after,
.game-area.conversation-transition-leaving::after,
.game-area.conversation-transition-returning::after {
  right: 0;
  transform-origin: right center;
  background:
    linear-gradient(180deg, rgba(188, 142, 54, .035), transparent 22%),
    linear-gradient(270deg, #05080d, #080b12 62%, #030509);
  box-shadow: inset 1px 0 rgba(214, 173, 69, .16);
}

.game-area.conversation-transition-entering::before,
.game-area.conversation-transition-entering::after,
.game-area.conversation-transition-leaving::before,
.game-area.conversation-transition-leaving::after {
  animation: conversationCurtainClose 320ms cubic-bezier(.55, .06, .68, .19) both;
}

.game-area.conversation-transition-entering.conversation-transition-switch::before,
.game-area.conversation-transition-entering.conversation-transition-switch::after,
.game-area.conversation-transition-returning::before,
.game-area.conversation-transition-returning::after {
  animation: conversationCurtainOpen 640ms cubic-bezier(.16, 1, .3, 1) both;
}

.game-area.conversation-transition-entering:not(.conversation-mode) > .screen {
  animation: conversationHistoryOut 260ms ease-in both;
}

.game-area.conversation-transition-entering.conversation-mode > .dialogue-panel {
  animation: conversationPanelIn 540ms 80ms cubic-bezier(.16, 1, .3, 1) both;
}

.game-area.conversation-transition-leaving > .dialogue-panel {
  animation: conversationPanelOut 260ms ease-in both;
}

.game-area.conversation-transition-returning > .screen {
  animation: conversationHistoryIn 540ms 70ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes conversationCurtainClose {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes conversationCurtainOpen {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@keyframes conversationHistoryOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: .08; transform: translateY(-5px); }
}

@keyframes conversationPanelIn {
  from { opacity: 0; transform: translateY(11px); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes conversationPanelOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: .08; transform: translateY(7px); }
}

@keyframes conversationHistoryIn {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: translateY(0); }
}

/* El velo ya cubre el cambio de retrato: evita solapar la transición de escena. */
.game-area.conversation-transition-switch .room-image-wrap .room-image-previous {
  animation: none;
  opacity: 0;
}

.game-area.conversation-transition-switch .room-image-wrap .room-image.is-scene-entering,
.game-area.conversation-transition-switch .room-image-wrap.is-scene-changing::after {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .game-area.conversation-transition-entering::before,
  .game-area.conversation-transition-entering::after,
  .game-area.conversation-transition-leaving::before,
  .game-area.conversation-transition-leaving::after,
  .game-area.conversation-transition-returning::before,
  .game-area.conversation-transition-returning::after {
    display: none;
  }

  .game-area.conversation-transition-entering:not(.conversation-mode) > .screen,
  .game-area.conversation-transition-entering.conversation-mode > .dialogue-panel,
  .game-area.conversation-transition-leaving > .dialogue-panel,
  .game-area.conversation-transition-returning > .screen {
    animation: none;
  }
}

.dialogue-continue {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  width: 100%;
  margin: 22px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(214, 173, 69, .82);
  font: 500 .64rem/1 "Space Grotesk", sans-serif;
  letter-spacing: .14em;
  cursor: pointer;
}

.dialogue-continue::before {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 173, 69, .7));
}

.dialogue-continue::after {
  content: "\2192";
  margin-left: 1px;
  color: rgba(214, 173, 69, .82);
  font-size: .9rem;
  letter-spacing: 0;
}

.dialogue-line {
  margin: 1rem 0;
}

.dialogue-speaker {
  display: block;
  margin-bottom: .45rem;
  color: var(--story-gold, #d6ad45);
  font: 600 .68rem/1.2 "Space Grotesk", sans-serif;
  letter-spacing: .12em;
}

.dialogue-copy {
  display: block;
  color: rgba(214, 173, 69, .88);
  font-style: italic;
}

.dialogue-line-mateo .dialogue-copy {
  color: #c8c0b2;
}

.conversation-mode .dialogue-copy {
  display: block;
  white-space: pre-line;
  color: #e5ded0 !important;
  font-family: "Source Serif 4", Georgia, serif;
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1.55;
}

.conversation-mode .dialogue-line-narration .dialogue-copy {
  color: #928d84 !important;
  font-style: italic;
}

.conversation-mode .dialogue-copy .clickable-word {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none;
}

.conversation-mode .dialogue-line .dialogue-speaker {
  visibility: visible;
}

.conversation-mode .dialogue-line:has(.dialogue-copy.typewriter-pending) .dialogue-speaker {
  visibility: hidden;
}

.conversation-mode .dialogue-speaker,
.conversation-mode .dialogue-speaker * {
  pointer-events: none;
  text-decoration: none !important;
}

.conversation-post-response {
  display: block;
  margin-top: 1.5rem;
  padding-left: 0;
  border-left: 0 !important;
  color: var(--story-ink, #eee7d5);
}

.dialogue-line-player {
  color: var(--story-gold, #d6ad45);
  font-style: italic;
}

.dialogue-line-mateo {
  color: var(--story-ink, #eee7d5);
}

.final-narrative .dialogue-line {
  display: block;
  margin: 1.35rem 0;
}

.final-narrative .dialogue-speaker {
  margin-bottom: .55rem;
}

.final-narrative > .narrative-result {
  margin-top: 0 !important;
}

.intro-text .tutorial-paragraph,
.intro-text .story-paragraph {
  font-style: italic;
  color: var(--story-muted, #a8a29a);
}