/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
 * D-EVENTOS-VIAJE D-EVV-1 (claude/_CLAUDE_D_EVENTOS_VIAJE_MESA.md) — la escena del evento del viaje, a pantalla completa:
 * el lugar de fondo (el arte del mapa alrededor del punto), el grupo a la izquierda, el evento a la derecha y el cuadro de
 * madera y oro de la taberna abajo. Sin scroll: todo en vh. HTML en src/ui/escena_evento.ts.
 * ════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.evv-capa { position: fixed; inset: 0; z-index: 9000; transition: opacity .2s ease; }
.evv-capa--fuera { opacity: 0; pointer-events: none; }

.evv { --evv-oro: #e9c46a; --evv-oro-claro: #ffe7a1; --evv-tinta: #f3e6c8; --evv-tinta-2: #d9c69b;
  position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden;
  color: var(--evv-tinta); font-family: var(--ui-fuente-texto, "Montserrat", system-ui, sans-serif); animation: evv-entra .4s ease-out both; }
@keyframes evv-entra { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }

/* ── El lugar: el arte del mapa del mundo, ampliado y centrado en el punto del evento ── */
.evv__fondo { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0b0906; }
.evv__mapa { --evv-w: max(260vw, 300vh); position: absolute; width: var(--evv-w); height: calc(var(--evv-w) * .75);
  left: clamp(calc(100vw - var(--evv-w)), calc(50vw - var(--evv-x) * var(--evv-w) / 100), 0px);
  top: clamp(calc(100vh - var(--evv-w) * .75), calc(48vh - var(--evv-y) * var(--evv-w) * .75 / 100), 0px);
  background-size: 100% 100%; background-repeat: no-repeat; filter: blur(2px) saturate(.85) brightness(.6);
  animation: evv-deriva 40s ease-in-out infinite alternate; }
@keyframes evv-deriva { from { transform: scale(1.03) translate(0, 0); } to { transform: scale(1.07) translate(-.6%, -.4%); } }
.evv__velo { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 75% 65% at 50% 42%, transparent 35%, rgba(6,4,2,.78) 100%),
    linear-gradient(180deg, rgba(6,4,2,.6) 0%, transparent 16%, transparent 48%, rgba(6,4,2,.94) 100%); }
.evv--emboscada .evv__velo, .evv--errante .evv__velo, .evv--rara .evv__velo {
  background: radial-gradient(ellipse 75% 65% at 50% 42%, transparent 30%, rgba(30,4,2,.8) 100%),
    linear-gradient(180deg, rgba(10,3,2,.6) 0%, transparent 16%, transparent 48%, rgba(8,3,2,.95) 100%); }

/* ── La cabecera ── */
.evv__cabeza { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .5vh; padding: 2.4vh 4vw 0; text-align: center; }
.evv__titulo { padding: 0 1.4em .35em; font-family: var(--ui-fuente-titulo, "Cinzel", Georgia, serif) !important; font-size: clamp(22px, 4.4vh, 46px); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--evv-oro-claro); text-shadow: 0 2px 10px #000, 0 0 26px rgba(233,196,106,.35);
  background: linear-gradient(90deg, transparent, rgba(233,196,106,.75), transparent) center bottom / 100% 1px no-repeat; }
.evv--emboscada .evv__titulo, .evv--errante .evv__titulo { color: #ffcf9a; text-shadow: 0 2px 10px #000, 0 0 26px rgba(224,82,70,.45); }
.evv__lugar { font-size: clamp(11px, 1.6vh, 15px); letter-spacing: .2em; text-transform: uppercase; color: var(--evv-tinta-2); text-shadow: 0 1px 4px #000; }

/* ── El escenario: el grupo a la izquierda, el evento a la derecha ── */
.evv__escenario { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 2vw; padding: 1vh 6vw 1.6vh; min-height: 0; }
.evv__grupo { display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-end; height: 100%; min-height: 0; }
.evv__pj { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-height: 0; }
.evv__grupo .evv__pj { z-index: calc(10 - var(--evv-i, 0)); animation: evv-llega .6s ease-out both; animation-delay: calc(var(--evv-i, 0) * 90ms); }
.evv__grupo .evv__pj + .evv__pj { margin-right: -5.5vh; }
@keyframes evv-llega { from { opacity: 0; transform: translateX(-3vw); } to { opacity: 1; transform: none; } }
.evv__figura { display: block; height: calc(min(46vh, 96%) * var(--escala-raza, 1)); width: auto; max-width: none; aspect-ratio: 832 / 1248;
  object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.75)); }
.evv__pj--grupo .evv__figura { height: calc(min(40vh, 86%) * var(--escala-raza, 1)); filter: drop-shadow(0 10px 14px rgba(0,0,0,.75)) brightness(.86); }
.evv__placa { position: relative; z-index: 2; margin-top: -1.4vh; padding: 3px 10px 4px; border-radius: 4px; text-align: center; white-space: nowrap;
  font-size: clamp(10px, 1.4vh, 13px); background: rgba(12,8,4,.86); border: 1px solid rgba(233,196,106,.45); box-shadow: 0 4px 10px rgba(0,0,0,.6); }
.evv__placa b { display: block; font-family: var(--ui-fuente-titulo, "Cinzel", Georgia, serif) !important; letter-spacing: .06em; color: var(--evv-oro-claro); }
.evv__placa small { display: block; font-size: .85em; color: #c8b88f; }
.evv__pj--grupo .evv__placa { opacity: .85; }

/* el PNJ, mirando al grupo, con su saludo */
.evv__frente { position: relative; height: 100%; min-height: 0; }
.evv__frente--pnj { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; animation: evv-llega-d .6s ease-out both; }
@keyframes evv-llega-d { from { opacity: 0; transform: translateX(3vw); } to { opacity: 1; transform: none; } }
.evv__pj--pnj { height: auto; flex: 1 1 auto; }
.evv__pj--pnj .evv__figura { transform: scaleX(-1); height: calc(min(44vh, 82%) * var(--escala-raza, 1)); }
.evv__bocadillo { position: absolute; z-index: 3; top: 2%; right: 54%; max-width: min(30vw, 380px); margin: 0; padding: 1vh 14px; border-radius: 10px;
  font-size: clamp(12px, 1.8vh, 16px); font-style: italic; line-height: 1.4; color: #2a1d0b;
  background: linear-gradient(180deg, #f7ecd0, #e6d3a6); border: 1px solid #8b6a2b; box-shadow: 0 6px 16px rgba(0,0,0,.6); animation: evv-bocadillo .5s .45s ease-out both; }
.evv__bocadillo::after { content: ''; position: absolute; right: -9px; bottom: 14px; border: 9px solid transparent; border-left-color: #e6d3a6; border-right: 0; }
@keyframes evv-bocadillo { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
.evv__ficha-pnj { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: .8vh 0 0; font-size: clamp(10px, 1.35vh, 13px); color: var(--evv-tinta-2); text-shadow: 0 1px 3px #000; }

/* las criaturas: retrato, nombre y nivel con el color de la dificultad */
.evv__frente--criaturas { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-end; gap: 1.8vh 2.2vw; padding-bottom: 2vh; }
.evv__criatura { --evv-con: #d9c69b; position: relative; display: flex; flex-direction: column; align-items: center; gap: .6vh; margin: 0;
  animation: evv-acecha .55s ease-out both; animation-delay: calc(var(--evv-i, 0) * 110ms + 150ms); }
@keyframes evv-acecha { from { opacity: 0; transform: translateY(2vh) scale(.92); } to { opacity: 1; transform: none; } }
.evv__frente--criaturas[data-evv-n="1"] .evv__criatura img { width: clamp(110px, 26vh, 280px); }
.evv__frente--criaturas[data-evv-n="2"] .evv__criatura img, .evv__frente--criaturas[data-evv-n="3"] .evv__criatura img { width: clamp(90px, 21vh, 230px); }
.evv__criatura img { width: clamp(72px, 16vh, 180px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: #120c06;
  border: 3px solid var(--evv-con); box-shadow: 0 0 0 2px rgba(0,0,0,.7), 0 0 22px color-mix(in srgb, var(--evv-con) 45%, transparent), 0 10px 18px rgba(0,0,0,.7); }
.evv__criatura--marcada img { box-shadow: 0 0 0 2px rgba(0,0,0,.7), 0 0 0 5px var(--evv-oro), 0 0 30px rgba(233,196,106,.55), 0 10px 18px rgba(0,0,0,.7); }
.evv__criatura figcaption { display: flex; flex-direction: column; align-items: center; padding: 2px 9px 3px; border-radius: 4px; background: rgba(12,8,4,.86);
  border: 1px solid color-mix(in srgb, var(--evv-con) 60%, transparent); font-size: clamp(10px, 1.35vh, 13px); text-align: center; max-width: 18vw; }
.evv__criatura figcaption b { color: var(--evv-tinta); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.evv__criatura figcaption span { color: var(--evv-con); font-weight: 700; }
.evv__criatura--red { --evv-con: #e05246; }
.evv__criatura--yellow { --evv-con: #e8c547; }
.evv__criatura--white { --evv-con: #f2f2f2; }
.evv__criatura--blue { --evv-con: #5b93ff; }
.evv__criatura--lightblue { --evv-con: #6fd0ff; }
.evv__criatura--green { --evv-con: #5cd65c; }
.evv__criatura--gray { --evv-con: #9a9a9a; }
/* el lugar: la lámina del arte que ya hay (el cofre, la fuente, la ruina) */
.evv__frente--lugar { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3vh; }
.evv__lamina { max-height: min(34vh, 90%); max-width: 80%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0,0,0,.75)) brightness(.95); animation: evv-acecha .6s .2s ease-out both; }
.evv__mas { align-self: center; font-family: var(--ui-fuente-titulo, "Cinzel", Georgia, serif) !important; font-size: 3vh; color: var(--evv-tinta-2); }

/* ── El cuadro de madera y oro ── */
.evv__cuadro { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 1.3vh; width: min(1120px, 92vw); max-height: 42vh; margin: 0 auto 2.6vh;
  padding: 2vh 2.2vw 1.4vh; border-radius: 10px; overflow: hidden;
  background: repeating-linear-gradient(92deg, rgba(255,235,200,.025) 0 2px, transparent 2px 11px), linear-gradient(180deg, rgba(52,35,16,.97), rgba(22,14,6,.98));
  border: 1px solid #b8913f; box-shadow: 0 0 0 3px rgba(0,0,0,.6), 0 0 0 4px rgba(233,196,106,.32), 0 20px 44px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,231,161,.22);
  animation: evv-cuadro .45s .1s ease-out both; }
@keyframes evv-cuadro { from { opacity: 0; transform: translateY(2.5vh); } to { opacity: 1; transform: none; } }
.evv__esquina { position: absolute; width: 9px; height: 9px; background: var(--evv-oro); transform: rotate(45deg); box-shadow: 0 0 6px rgba(233,196,106,.6); }
.evv__esquina--tl { top: 6px; left: 6px; } .evv__esquina--tr { top: 6px; right: 6px; } .evv__esquina--bl { bottom: 6px; left: 6px; } .evv__esquina--br { bottom: 6px; right: 6px; }
.evv__texto { margin: 0; font-size: clamp(13px, 2.05vh, 19px); line-height: 1.5; text-align: center; color: var(--evv-tinta); text-wrap: pretty; }
.evv__opciones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 1vh .9vw; min-height: 0; }
.evv__opciones li { display: flex; min-width: 0; }

/* el botón de la casa (el de la taberna, sitio.css .tab-boton), con su número, sus etiquetas y su tirada */
.evv .tab-boton { cursor: pointer; border-radius: 6px; color: #f1e3c4; background: rgba(10,8,5,.78); border: 1px solid rgba(200,168,96,.55);
  transition: border-color .15s, box-shadow .15s, filter .15s, transform .15s; font-family: inherit; }
.evv .tab-boton:hover:not(:disabled), .evv .tab-boton:focus-visible { outline: none; border-color: var(--evv-oro-claro); color: #fff3c4; box-shadow: 0 0 16px rgba(233,196,106,.32); }
.evv .tab-boton--principal { color: #1b1406; border-color: var(--evv-oro); background: linear-gradient(180deg, #ffe7a1 0%, #e0b252 45%, #b07d26 100%); box-shadow: 0 0 0 1px #5a3f10 inset;
  padding: 1.1vh 28px; font-size: clamp(12px, 1.7vh, 15px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.evv .tab-boton--principal:hover, .evv .tab-boton--principal:focus-visible { color: #1b1406; filter: brightness(1.08); box-shadow: 0 0 0 1px #5a3f10 inset, 0 0 20px rgba(233,196,106,.55); }
.evv .tab-boton:disabled { cursor: not-allowed; filter: grayscale(.8) brightness(.62); }
.evv__opcion { flex: 1; display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 1vh 12px; text-align: left; font-size: clamp(12px, 1.75vh, 16px); }
.evv__opcion:hover:not(:disabled) { transform: translateY(-1px); }
.evv__num { flex: none; display: grid; place-items: center; width: 1.75em; height: 1.75em; border-radius: 50%; border: 1px solid rgba(233,196,106,.65);
  font-family: var(--ui-fuente-titulo, "Cinzel", Georgia, serif) !important; font-size: .9em; color: var(--evv-oro-claro); background: rgba(0,0,0,.35); }
.evv__op-cuerpo { display: flex; flex-direction: column; gap: .55vh; min-width: 0; }
.evv__op-texto { font-weight: 600; line-height: 1.3; color: #f6ead0; }
.evv__etiquetas { display: flex; flex-wrap: wrap; gap: 4px; }
.evv__etq { padding: 1px 8px; border-radius: 999px; border: 1px solid; font-style: normal; font-weight: 600; font-size: .72em; letter-spacing: .03em; white-space: nowrap; }
.evv__etq--bueno { color: #a6e3a1; border-color: rgba(120,200,110,.5); background: rgba(30,80,30,.35); }
.evv__etq--malo { color: #f3a593; border-color: rgba(220,110,90,.5); background: rgba(110,30,22,.4); }
.evv__etq--neutro { color: #e2d3ad; border-color: rgba(200,180,130,.4); background: rgba(70,55,30,.35); }
.evv__etq--combate { color: #ffc27a; border-color: rgba(255,150,60,.6); background: rgba(130,50,10,.45); }
.evv__prob { padding: 1px 8px; border-radius: 999px; font-size: .72em; font-weight: 700; white-space: nowrap; color: #1b1406; background: linear-gradient(180deg, #ffe7a1, #c8963a); }
.evv__motivo { font-size: .76em; font-style: italic; color: #f0a896; }
.evv__teclas { margin: 0; text-align: center; font-size: 11px; letter-spacing: .12em; color: rgba(217,198,155,.55); }

/* el resultado */
.evv__resultado { display: flex; flex-direction: column; align-items: center; gap: 1.1vh; animation: evv-cuadro .35s ease-out both; }
.evv__tirada { margin: 0; font-family: var(--ui-fuente-titulo, "Cinzel", Georgia, serif) !important; font-size: clamp(12px, 1.8vh, 16px); letter-spacing: .14em; text-transform: uppercase; color: var(--evv-tinta-2); }
.evv__resultado--bueno .evv__tirada { color: #a6e3a1; }
.evv__resultado--malo .evv__tirada { color: #f3a593; }
.evv__ganado { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; }
.evv__ganado li { padding: 3px 10px; border-radius: 5px; font-size: clamp(11px, 1.55vh, 14px); color: #f6e6bf; background: rgba(233,196,106,.12); border: 1px solid rgba(233,196,106,.38); }
.evv__seguir { min-width: 240px; }
.evv--resuelto.evv--combate .evv__seguir { background: linear-gradient(180deg, #ffb48a 0%, #d2552f 50%, #8e2a12 100%); border-color: #ffb48a; color: #1e0702; }

/* ── Pantallas estrechas: el grupo y el evento, uno encima de otro ── */
@media (max-width: 760px) {
  .evv__escenario { grid-template-columns: 1fr 1fr; padding: 0 3vw; }
  .evv__grupo .evv__pj + .evv__pj { margin-right: -9vw; }
  .evv__pj--grupo .evv__placa { display: none; }
  .evv__bocadillo { right: auto; left: 0; top: 0; max-width: 46vw; }
  .evv__bocadillo::after { display: none; }
  .evv__cuadro { width: 96vw; max-height: 50vh; padding: 1.6vh 3.5vw 1.2vh; }
  .evv__opciones { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .evv, .evv__mapa, .evv__pj, .evv__criatura, .evv__cuadro, .evv__bocadillo, .evv__resultado, .evv__frente--pnj { animation: none !important; }
}