/* ------------------------------------------------------------------ */
/* Aventura: estructura                                                */
/* ------------------------------------------------------------------ */

.game-screen {
  padding-top: 1.4rem;
}
.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 1.4rem;
  align-items: start;
}
.story-column { min-width: 0; }

.scene-card {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 90% 40% at 50% 0%, rgba(201, 164, 92, 0.03), transparent 70%),
    linear-gradient(180deg, #121620, #0d1017);
  padding: 0 1.6rem 1.6rem;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.scene-art {
  position: relative;
  height: 235px;
  margin: 0 -1.6rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 70% at 50% 20%, color-mix(in srgb, var(--art-glow, #c9a45c) 26%, transparent), transparent 60%),
    linear-gradient(180deg, var(--art-sky, #18202c) 0%, #0b0e14 88%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.scene-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 12% 26%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 28% 12%, rgba(255, 255, 255, 0.38), transparent),
    radial-gradient(1.5px 1.5px at 46% 22%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1px 1px at 64% 9%, rgba(232, 203, 134, 0.5), transparent),
    radial-gradient(1px 1px at 79% 28%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 91% 14%, rgba(255, 255, 255, 0.4), transparent);
  opacity: 0.8;
}
.scene-art::after {
  content: '';
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -2px;
  height: 58%;
  background: var(--art-ground, #080b0f);
  clip-path: polygon(0 100%, 0 72%, 10% 58%, 19% 68%, 30% 38%, 41% 60%, 51% 50%, 63% 69%, 74% 41%, 85% 62%, 94% 52%, 100% 66%, 100% 100%);
  opacity: 0.92;
}
.scene-sigil {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  color: var(--art-glow, #c9a45c);
  opacity: 0.16;
  filter: drop-shadow(0 0 34px color-mix(in srgb, var(--art-glow, #c9a45c) 35%, transparent));
  pointer-events: none;
}
.scene-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(180deg, transparent 56%, rgba(13, 16, 23, 0.1) 80%, rgba(13, 16, 23, 0.82) 100%),
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 62%, rgba(0, 0, 0, 0.32));
}
.scene-vignette::before {
  content: '';
  position: absolute;
  top: 8%;
  right: 12%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--art-glow, #c9a45c) 38%, transparent), transparent 68%);
  filter: blur(16px);
  opacity: 0.5;
}
.scene-art::after {
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--art-glow, #c9a45c) 12%, transparent);
}
.scene-head {
  position: relative;
  z-index: 3;
  margin-top: -55px;
  margin-bottom: 1.2rem;
}
.scene-head h1 {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  margin: 0 0 0.4rem;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
}
.last-check {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: 0.68rem;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  background: rgba(8, 10, 15, 0.55);
}
.scene-text {
  position: relative;
  z-index: 3;
  max-width: 72ch;
}
.scene-text p {
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.72;
  margin-bottom: 0.85rem;
}
.scene-text p:first-child::first-letter {
  font-family: var(--font-display);
  font-size: 2.9rem;
  line-height: 0.8;
  float: left;
  padding: 0.08em 0.08em 0 0;
  color: var(--gold);
}

.story-options {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 1.5rem;
  position: relative;
  z-index: 3;
}
.story-option {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.016);
  color: var(--ink);
  text-align: left;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.story-option:hover:not(.is-locked) {
  border-color: rgba(201, 164, 92, 0.5);
  background: rgba(201, 164, 92, 0.05);
  transform: translateX(3px);
}
.story-option.is-locked {
  opacity: 0.52;
  cursor: not-allowed;
}
.option-number {
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--gold-dim);
  flex: none;
  width: 24px;
}
.option-copy {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}
.option-copy strong {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.option-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.option-arrow {
  color: var(--gold-dim);
  flex: none;
  transition: transform 0.18s ease, color 0.18s ease;
}
.story-option:hover:not(.is-locked) .option-arrow {
  transform: translateX(3px);
  color: var(--gold-bright);
}
.keyboard-hint {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 1rem 0 0;
  color: var(--ink-faint);
  font-size: 0.68rem;
  font-style: italic;
}

/* ------------------------------------------------------------------ */
/* Paletas de escenario                                               */
/* ------------------------------------------------------------------ */

.art-village { --art-sky: #1b272b; --art-glow: #d6a55f; --art-ground: #0a1110; }
.art-village_night { --art-sky: #101823; --art-glow: #8d9fc4; --art-ground: #080d12; }
.art-forest_edge { --art-sky: #17241f; --art-glow: #c2b069; --art-ground: #080e0b; }
.art-forest_night { --art-sky: #0e1818; --art-glow: #799c8e; --art-ground: #070c0c; }
.art-tavern { --art-sky: #261c15; --art-glow: #d38d4f; --art-ground: #0d0907; }
.art-tavern_dark { --art-sky: #19131a; --art-glow: #a66b6b; --art-ground: #0b080b; }
.art-shrine { --art-sky: #1a2320; --art-glow: #d7c783; --art-ground: #0a0f0d; }
.art-bridge { --art-sky: #172029; --art-glow: #9aaec2; --art-ground: #080c0f; }
.art-camp { --art-sky: #201a1b; --art-glow: #e29c5d; --art-ground: #0c0808; }
.art-tower { --art-sky: #162022; --art-glow: #81a39b; --art-ground: #080c0d; }
.art-tower_ritual { --art-sky: #1b1a24; --art-glow: #9b85d1; --art-ground: #0a0910; }
.art-dawn { --art-sky: #3b2e2b; --art-glow: #f0bc73; --art-ground: #1a120d; }
.art-road { --art-sky: #26201d; --art-glow: #cfa66a; --art-ground: #100c09; }
.art-ash { --art-sky: #242426; --art-glow: #98928a; --art-ground: #0d0d0f; }
.art-swamp_night { --art-sky: #101b1a; --art-glow: #6f9e83; --art-ground: #070d0c; }
.art-swamp { --art-sky: #17221f; --art-glow: #91b07a; --art-ground: #090e0b; }
.art-city { --art-sky: #1e222e; --art-glow: #bca46b; --art-ground: #0b0d12; }
.art-city_gates { --art-sky: #1b1d26; --art-glow: #b08f65; --art-ground: #090a0e; }
.art-city_alley { --art-sky: #171a21; --art-glow: #7b8fa8; --art-ground: #080a0d; }
.art-city_night { --art-sky: #101420; --art-glow: #8795c4; --art-ground: #07090d; }
.art-dawn_city { --art-sky: #39302d; --art-glow: #e4b26b; --art-ground: #16100c; }
.art-temple { --art-sky: #242322; --art-glow: #e4d08f; --art-ground: #0d0c0b; }
.art-cemetery { --art-sky: #161b1d; --art-glow: #7f9b95; --art-ground: #070b0c; }
.art-crypt_door { --art-sky: #161c1a; --art-glow: #7f9a72; --art-ground: #070b09; }
.art-crypt { --art-sky: #131817; --art-glow: #7d9974; --art-ground: #060908; }
.art-crypt_cells { --art-sky: #171519; --art-glow: #94798f; --art-ground: #08070a; }
.art-crypt_altar { --art-sky: #191422; --art-glow: #a589cf; --art-ground: #08060d; }
.art-mountain { --art-sky: #1d2632; --art-glow: #b8ccd8; --art-ground: #0b0e13; }
.art-cave { --art-sky: #151c20; --art-glow: #8aa1a7; --art-ground: #070a0c; }
.art-citadel_council { --art-sky: #21232f; --art-glow: #c8b477; --art-ground: #0b0c11; }
.art-citadel { --art-sky: #202535; --art-glow: #c5b16f; --art-ground: #0b0d14; }
.art-citadel_altar { --art-sky: #241d2b; --art-glow: #e0ab66; --art-ground: #0e090f; }
.art-emberwood { --art-sky: #1b2520; --art-glow: #c6b66b; --art-ground: #080d09; }
.art-library { --art-sky: #1e1f28; --art-glow: #bca776; --art-ground: #0a0a0e; }
.art-dragon_lair { --art-sky: #2b1c1a; --art-glow: #e08a52; --art-ground: #120b09; }
.art-worldtree_light { --art-sky: #203128; --art-glow: #f0d58a; --art-ground: #0a120d; }
.art-worldtree_dark { --art-sky: #191522; --art-glow: #8b78b8; --art-ground: #08060c; }
.art-forest { --art-sky: #17231f; --art-glow: #a7b877; --art-ground: #080d0a; }

.art-swamp .scene-art::before,
.art-swamp_night .scene-art::before {
  background-image:
    radial-gradient(ellipse 60% 30% at 30% 85%, rgba(105, 150, 118, 0.22), transparent 70%),
    radial-gradient(ellipse 45% 25% at 75% 92%, rgba(84, 123, 100, 0.18), transparent 70%),
    radial-gradient(1px 1px at 30% 20%, rgba(255, 255, 255, 0.4), transparent);
  clip-path: none;
}
.art-city .scene-art::after,
.art-city_night .scene-art::after,
.art-dawn_city .scene-art::after,
.art-citadel .scene-art::after {
  clip-path: polygon(0 100%, 0 55%, 8% 55%, 8% 45%, 14% 45%, 14% 62%, 22% 62%, 22% 30%, 27% 30%, 27% 15%, 33% 15%, 33% 44%, 42% 44%, 42% 26%, 47% 26%, 47% 8%, 53% 8%, 53% 40%, 60% 40%, 60% 22%, 67% 22%, 67% 48%, 76% 48%, 76% 18%, 82% 18%, 82% 60%, 90% 60%, 90% 38%, 96% 38%, 96% 62%, 100% 62%, 100% 100%);
}
.art-crypt .scene-art::after,
.art-crypt_cells .scene-art::after,
.art-crypt_altar .scene-art::after,
.art-crypt_door .scene-art::after {
  clip-path: polygon(0 100%, 0 35%, 6% 35%, 6% 55%, 11% 55%, 11% 8%, 16% 8%, 16% 55%, 22% 55%, 22% 30%, 27% 30%, 27% 55%, 33% 55%, 33% 16%, 38% 16%, 38% 55%, 47% 55%, 47% 25%, 52% 25%, 52% 55%, 61% 55%, 61% 12%, 66% 12%, 66% 55%, 74% 55%, 74% 31%, 79% 31%, 79% 55%, 87% 55%, 87% 20%, 92% 20%, 92% 55%, 100% 55%, 100% 100%);
  opacity: 0.65;
}
.art-tower .scene-art::after,
.art-tower_ritual .scene-art::after {
  clip-path: polygon(0 100%, 0 72%, 30% 72%, 30% 38%, 36% 38%, 36% 24%, 40% 20%, 44% 24%, 44% 38%, 52% 38%, 52% 62%, 68% 62%, 68% 34%, 74% 34%, 74% 18%, 78% 14%, 82% 18%, 82% 34%, 88% 34%, 88% 70%, 100% 70%, 100% 100%);
}
.art-dragon_lair .scene-art::after {
  clip-path: polygon(0 100%, 0 60%, 12% 45%, 22% 62%, 35% 30%, 46% 55%, 58% 28%, 72% 58%, 84% 38%, 100% 62%, 100% 100%);
}
.art-tavern .scene-art::after,
.art-tavern_dark .scene-art::after {
  clip-path: polygon(0 100%, 0 52%, 14% 52%, 14% 38%, 30% 38%, 30% 55%, 48% 55%, 48% 44%, 66% 44%, 66% 60%, 82% 60%, 82% 40%, 100% 40%, 100% 100%);
}
.art-worldtree_light .scene-art::after,
.art-worldtree_dark .scene-art::after {
  clip-path: polygon(40% 100%, 44% 55%, 22% 38%, 36% 40%, 28% 15%, 44% 26%, 50% 0, 56% 26%, 72% 15%, 64% 40%, 78% 38%, 56% 55%, 60% 100%);
  opacity: 0.78;
}
.art-forest_edge .scene-art::after,
.art-forest_night .scene-art::after,
.art-emberwood .scene-art::after,
.art-forest .scene-art::after {
  clip-path: polygon(0 100%, 0 70%, 4% 70%, 4% 40%, 8% 40%, 8% 72%, 14% 72%, 14% 20%, 18% 20%, 18% 72%, 24% 72%, 24% 48%, 29% 48%, 29% 72%, 35% 72%, 35% 12%, 40% 12%, 40% 72%, 48% 72%, 48% 32%, 53% 32%, 53% 72%, 61% 72%, 61% 18%, 66% 18%, 66% 72%, 74% 72%, 74% 45%, 79% 45%, 79% 72%, 86% 72%, 86% 22%, 91% 22%, 91% 72%, 100% 72%, 100% 100%);
  opacity: 0.8;
}
.art-mountain .scene-art::after,
.art-cave .scene-art::after,
.art-step .scene-art::after {
  clip-path: polygon(0 100%, 0 72%, 15% 45%, 28% 68%, 42% 22%, 56% 62%, 71% 35%, 84% 67%, 100% 42%, 100% 100%);
}

/* ------------------------------------------------------------------ */
/* Barra lateral                                                      */
/* ------------------------------------------------------------------ */

.game-sidebar {
  position: sticky;
  top: calc(var(--topbar-height) + 1.2rem);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.hero-card {
  padding: 1rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 90% 45% at 50% 0%, rgba(201, 164, 92, 0.08), transparent 68%),
    var(--panel);
}
.hero-card-top {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line-soft);
}
.hero-card-copy { min-width: 0; }
.hero-card-copy h2 {
  font-size: 1.15rem;
  margin: 0 0 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-card-copy p {
  margin: 0 0 0.3rem;
  color: var(--ink-muted);
  font-size: 0.75rem;
}
.hp-block { margin-top: 0.75rem; }
.hp-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  color: var(--ink-muted);
  font-size: 0.73rem;
}
.hp-label strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
}
.hero-vitals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
  margin: 0.8rem 0;
}
.hero-vitals div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.4rem 0.15rem;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.012);
}
.hero-vitals span {
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hero-vitals strong {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.xp-block small {
  display: block;
  margin-top: 0.3rem;
  color: var(--ink-faint);
  font-size: 0.62rem;
  font-style: italic;
}
.hero-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.7rem;
}
.sidebar-section {
  padding: 0.9rem;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.012);
}
.companion-mini {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.companion-mini:last-child { border-bottom: 0; }
.companion-copy { min-width: 0; }
.companion-copy strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.companion-copy small {
  color: var(--ink-faint);
  font-size: 0.66rem;
}
.companion-mini .meter { width: 62px; }
.chapter-list {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.chapter-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  color: var(--ink-faint);
  font-size: 0.74rem;
  line-height: 1.35;
}
.chapter-list li span {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 0.05rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.52rem;
}
.chapter-list li.is-current { color: var(--gold-bright); }
.chapter-list li.is-current span { border-color: var(--gold); background: rgba(201, 164, 92, 0.1); }
.chapter-list li.is-done { color: var(--ink-muted); }
.chapter-list li.is-done span { border-color: rgba(121, 167, 131, 0.5); color: var(--heal); }
.pending-asi {
  border-color: rgba(201, 164, 92, 0.45);
  background: rgba(201, 164, 92, 0.07);
}
.pending-asi p {
  color: var(--ink-muted);
  font-size: 0.78rem;
  margin-bottom: 0.6rem;
}
.sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.sidebar-actions .btn {
  justify-content: flex-start;
}

@media (max-width: 980px) {
  .game-layout { grid-template-columns: 1fr; }
  .game-sidebar { position: static; }
  .scene-art { height: 210px; }
}
@media (max-width: 620px) {
  .scene-card { padding: 0 1rem 1.2rem; }
  .scene-art { margin: 0 -1rem; height: 170px; }
  .scene-head { margin-top: -40px; }
  .scene-head h1 { font-size: 1.65rem; }
  .scene-text p { font-size: 0.96rem; }
  .scene-text p:first-child::first-letter { font-size: 2.4rem; }
  .story-option { gap: 0.55rem; padding: 0.65rem 0.7rem; }
  .option-number { width: 18px; }
}