/* Oraculo Gitano V2 ---------------------------------------------------------
   Capa visual autonoma. Nada fuera de .oapp-gv2 recibe estilos.
   Estados previstos por el motor:
   - raiz: data-state="choice|ceremony|result"
   - carta: data-state="waiting|dealt|revealed|turning|matched|muted"
   - union: atributo data-match="1" o clase .is-matched en cada borde unido
*/

.oapp-gv2 {
  --gv2-night: #050c17;
  --gv2-deep: #071a23;
  --gv2-petrol: #0b3037;
  --gv2-petrol-soft: #15515a;
  --gv2-plum: #3e1838;
  --gv2-plum-soft: #71365f;
  --gv2-gold: #d7b66c;
  --gv2-gold-bright: #f0d694;
  --gv2-ivory: #f7f0df;
  --gv2-mist: #bccbc8;
  --gv2-line: rgba(226, 195, 126, .25);
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 940px;
  min-height: 42rem;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(227, 194, 120, .32);
  border-radius: clamp(1.1rem, 2.8vw, 2rem);
  color: var(--gv2-ivory);
  background:
    radial-gradient(circle at 13% 5%, rgba(36, 111, 116, .32), transparent 28rem),
    radial-gradient(circle at 88% 16%, rgba(101, 39, 84, .34), transparent 25rem),
    radial-gradient(circle at 50% 112%, rgba(17, 89, 93, .31), transparent 34rem),
    linear-gradient(145deg, #07141e 0%, #09131d 46%, #160d1c 100%);
  box-shadow:
    0 32px 72px rgba(3, 7, 14, .38),
    inset 0 1px 0 rgba(255, 255, 255, .055),
    inset 0 0 90px rgba(0, 0, 0, .2);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.oapp-gv2 *,
.oapp-gv2 *::before,
.oapp-gv2 *::after {
  box-sizing: border-box;
}

.oapp-gv2 [hidden] {
  display: none !important;
}

.oapp-gv2 button {
  font: inherit;
}

.oapp-gv2-atmosphere,
.oapp-gv2-atmosphere::before,
.oapp-gv2-atmosphere::after {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.oapp-gv2-atmosphere {
  overflow: hidden;
  opacity: .8;
  background-image:
    radial-gradient(circle, rgba(247, 240, 223, .65) 0 1px, transparent 1.25px),
    radial-gradient(circle, rgba(215, 182, 108, .5) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(112, 181, 178, .48) 0 1px, transparent 1.35px);
  background-position: 9px 14px, 47px 36px, 77px 20px;
  background-size: 91px 83px, 149px 137px, 211px 197px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 52%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0 52%, transparent 96%);
}

.oapp-gv2-atmosphere::before,
.oapp-gv2-atmosphere::after {
  content: '';
  z-index: -1;
  border: 1px solid rgba(217, 184, 111, .12);
  border-radius: 50%;
}

.oapp-gv2-atmosphere::before {
  width: 48rem;
  height: 48rem;
  left: 50%;
  top: -39rem;
  transform: translateX(-50%);
  box-shadow: 0 0 0 3.8rem rgba(211, 178, 105, .025), 0 0 0 8rem rgba(117, 61, 101, .022);
}

.oapp-gv2-atmosphere::after {
  width: 34rem;
  height: 34rem;
  left: -24rem;
  top: 18rem;
  box-shadow: 0 0 0 5rem rgba(41, 137, 139, .025);
}

.oapp-gv2-atmosphere i {
  position: absolute;
  display: block;
  width: .28rem;
  height: .28rem;
  border-radius: 50%;
  background: var(--gv2-gold-bright);
  box-shadow: 0 0 1.1rem rgba(241, 211, 140, .85);
  animation: gv2-star 4.8s ease-in-out infinite;
}

.oapp-gv2-atmosphere i:nth-child(1) { left: 11%; top: 17%; }
.oapp-gv2-atmosphere i:nth-child(2) { right: 12%; top: 31%; animation-delay: -1.6s; }
.oapp-gv2-atmosphere i:nth-child(3) { left: 67%; top: 8%; animation-delay: -3.1s; }

.oapp-gv2-step {
  position: relative;
  z-index: 1;
  padding: clamp(1.1rem, 4vw, 2.7rem);
}

.oapp-gv2-choice {
  isolation: isolate;
  min-height: 42rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* La portada admite una imagen propia desde style="--gv2-hero:url(...)".
   La fotografia vive bajo dos velos independientes: nunca compite con el
   texto ni con las seis cartas, y se desvanece al llegar a la zona inferior. */
.oapp-gv2-choice::before,
.oapp-gv2-choice::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.oapp-gv2-choice::before {
  background-image: var(--gv2-hero, none);
  background-repeat: no-repeat;
  background-position: center 38%;
  background-size: cover;
  opacity: .82;
  filter: saturate(.82) contrast(1.05);
  transform: scale(1.018);
}

.oapp-gv2-choice::after {
  background:
    radial-gradient(ellipse at 50% 24%, rgba(4, 14, 20, .15) 0%, rgba(4, 13, 20, .44) 56%, rgba(5, 11, 18, .87) 100%),
    linear-gradient(180deg, rgba(4, 10, 17, .52) 0%, rgba(7, 17, 24, .64) 48%, rgba(9, 12, 19, .96) 100%),
    linear-gradient(90deg, rgba(5, 11, 18, .6), transparent 28% 72%, rgba(15, 8, 17, .64));
  box-shadow: inset 0 0 8rem rgba(2, 7, 12, .44);
}

.oapp-gv2-choice > * {
  position: relative;
  z-index: 2;
}

.oapp-gv2-intro,
.oapp-gv2-result-head {
  width: min(100%, 690px);
  margin-inline: auto;
  text-align: center;
}

.oapp-gv2-emblem {
  position: relative;
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 auto 1rem;
  border: 1px solid rgba(223, 191, 119, .52);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(216, 184, 110, .12) 0 34%, transparent 35%),
    conic-gradient(from 45deg, rgba(103, 188, 184, .18), rgba(101, 41, 83, .22), rgba(103, 188, 184, .18));
  box-shadow: 0 0 2.2rem rgba(81, 166, 165, .15), inset 0 0 1.6rem rgba(0, 0, 0, .35);
}

.oapp-gv2-emblem::before,
.oapp-gv2-emblem::after,
.oapp-gv2-emblem span::before,
.oapp-gv2-emblem span::after {
  content: '';
  position: absolute;
}

.oapp-gv2-emblem::before {
  inset: .65rem;
  border: 1px dashed rgba(227, 194, 120, .35);
  border-radius: 50%;
  animation: gv2-orbit 24s linear infinite;
}

.oapp-gv2-emblem::after {
  left: 50%;
  top: 50%;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--gv2-gold);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: inset 0 0 1rem rgba(209, 171, 88, .13), 0 0 1rem rgba(209, 171, 88, .12);
}

.oapp-gv2-emblem span::before,
.oapp-gv2-emblem span::after {
  left: 50%;
  top: 50%;
  background: var(--gv2-gold-bright);
  transform: translate(-50%, -50%);
}

.oapp-gv2-emblem span::before {
  width: .32rem;
  height: 2.75rem;
  border-radius: 100%;
  box-shadow: 0 0 .8rem rgba(242, 215, 151, .45);
}

.oapp-gv2-emblem span::after {
  width: 2.75rem;
  height: .32rem;
  border-radius: 100%;
  box-shadow: 0 0 .8rem rgba(242, 215, 151, .45);
}

.oapp-gv2-eyebrow {
  margin: 0 0 .55rem;
  color: var(--gv2-gold-bright);
  font: 800 .72rem/1.2 system-ui, -apple-system, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.oapp-gv2 h2,
.oapp-gv2 h3,
.oapp-gv2 p {
  max-width: none;
}

.oapp-gv2 h2 {
  margin: 0;
  color: #fffaf0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.85rem, 5vw, 3rem);
  font-weight: 500;
  line-height: 1.08;
  text-wrap: balance;
  text-shadow: 0 3px 22px rgba(0, 0, 0, .42);
}

.oapp-gv2-lead,
.oapp-gv2-result-head > p:last-child {
  margin: .9rem auto 0;
  color: rgba(224, 235, 230, .79);
  font-size: clamp(.96rem, 2.1vw, 1.08rem);
  line-height: 1.68;
  text-wrap: pretty;
}

/* Eleccion de una de las seis entradas ------------------------------------ */
.oapp-gv2-choices {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: clamp(.45rem, 1.6vw, .9rem);
  width: min(100%, 720px);
  margin: clamp(1.5rem, 4vw, 2.25rem) auto 0;
  padding: 1rem .3rem 1.25rem;
  perspective: 1100px;
}

.oapp-gv2-choice-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.18;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: .72rem;
  color: inherit;
  background: none;
  cursor: pointer;
  transform: translateY(var(--gv2-choice-y, 0)) rotate(var(--gv2-choice-r, 0));
  transform-origin: 50% 110%;
  transition: transform .25s ease, filter .25s ease;
  -webkit-tap-highlight-color: transparent;
}

.oapp-gv2-choice-card:nth-child(1) { --gv2-choice-y: .58rem; --gv2-choice-r: -3.5deg; }
.oapp-gv2-choice-card:nth-child(2) { --gv2-choice-y: .24rem; --gv2-choice-r: -2deg; }
.oapp-gv2-choice-card:nth-child(3) { --gv2-choice-y: .04rem; --gv2-choice-r: -.65deg; }
.oapp-gv2-choice-card:nth-child(4) { --gv2-choice-y: .04rem; --gv2-choice-r: .65deg; }
.oapp-gv2-choice-card:nth-child(5) { --gv2-choice-y: .24rem; --gv2-choice-r: 2deg; }
.oapp-gv2-choice-card:nth-child(6) { --gv2-choice-y: .58rem; --gv2-choice-r: 3.5deg; }

.oapp-gv2-choice-card:hover {
  z-index: 2;
  transform: translateY(-.55rem) rotate(0) scale(1.035);
  filter: drop-shadow(0 15px 15px rgba(0, 0, 0, .34));
}

.oapp-gv2-choice-card:active {
  transform: translateY(-.28rem) scale(.985);
}

.oapp-gv2-choice-card:focus-visible,
.oapp-gv2 button:focus-visible,
.oapp-gv2 summary:focus-visible {
  outline: 3px solid #f4d98f;
  outline-offset: 4px;
}

.oapp-gv2-choice-shadow {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -.6rem;
  height: 1.3rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, .42);
  filter: blur(.5rem);
  transition: opacity .2s ease, transform .2s ease;
}

.oapp-gv2-card-back,
.oapp-gv2-tile-back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(232, 201, 128, .72);
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 50%, rgba(225, 193, 118, .72) 0 1.5%, transparent 1.8% 14%, rgba(218, 185, 109, .17) 14.5% 15.8%, transparent 16.1%),
    conic-gradient(from 45deg at 50% 50%, transparent 0 11%, rgba(84, 168, 163, .14) 12% 13%, transparent 14% 36%, rgba(84, 168, 163, .14) 37% 38%, transparent 39% 61%, rgba(84, 168, 163, .14) 62% 63%, transparent 64% 86%, rgba(84, 168, 163, .14) 87% 88%, transparent 89%),
    linear-gradient(145deg, #0d3d44, #081a28 54%, #32152f);
  box-shadow:
    inset 0 0 0 3px rgba(5, 15, 24, .85),
    inset 0 0 0 4px rgba(225, 192, 115, .38),
    inset 0 0 2rem rgba(0, 0, 0, .48),
    0 10px 22px rgba(0, 0, 0, .27);
}

.oapp-gv2-card-back::before,
.oapp-gv2-card-back::after,
.oapp-gv2-tile-back::before,
.oapp-gv2-tile-back::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.oapp-gv2-card-back::before,
.oapp-gv2-tile-back::before {
  width: 42%;
  aspect-ratio: 1;
  border: 1px solid rgba(232, 201, 128, .62);
  box-shadow: 0 0 0 .34rem rgba(8, 29, 36, .72), 0 0 0 .39rem rgba(127, 83, 111, .42);
}

.oapp-gv2-card-back::after,
.oapp-gv2-tile-back::after {
  width: 17%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #f2d793, #b98c3d 58%, #614018 100%);
  box-shadow: 0 0 .8rem rgba(231, 197, 117, .42);
}

.oapp-gv2-card-back i,
.oapp-gv2-tile-back i {
  position: absolute;
  inset: .7rem;
  border: 1px solid rgba(100, 190, 184, .24);
  border-radius: .42rem;
}

.oapp-gv2-card-back b {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 1.8rem;
  height: 1.8rem;
  transform: translate(-50%, -50%);
}

.oapp-gv2-card-back b::before,
.oapp-gv2-card-back b::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: #f2d793;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 .45rem rgba(240, 211, 143, .54);
}

.oapp-gv2-card-back b::before { width: .15rem; height: 1.8rem; }
.oapp-gv2-card-back b::after { width: 1.8rem; height: .15rem; }

.oapp-gv2-card-back em {
  position: absolute;
  right: .52rem;
  bottom: .4rem;
  z-index: 2;
  color: rgba(246, 225, 173, .55);
  font: 700 .65rem/1 system-ui, sans-serif;
  font-style: normal;
}

.oapp-gv2-hint {
  margin: .15rem auto 0;
  color: rgba(196, 215, 209, .61);
  font-size: .84rem;
  text-align: center;
}

.oapp-gv2-hint span { margin-right: .35rem; color: var(--gv2-gold); }

/* Ceremonia y tablero ------------------------------------------------------ */
.oapp-gv2-ceremony {
  min-height: 42rem;
}

.oapp-gv2-ceremony-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem;
  width: min(100%, 760px);
  margin: 0 auto 1rem;
}

.oapp-gv2-ceremony-head h2 {
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
}

.oapp-gv2-ceremony-head p:last-child {
  margin: .55rem 0 0;
  color: rgba(207, 223, 217, .7);
  font-size: .94rem;
}

.oapp-gv2-skip {
  flex: 0 0 auto;
  padding: .62rem .82rem;
  border: 1px solid rgba(223, 190, 116, .34);
  border-radius: 999px;
  color: rgba(246, 238, 219, .82);
  background: rgba(4, 15, 23, .52);
  cursor: pointer;
  font-size: .8rem !important;
  font-weight: 750 !important;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.oapp-gv2-skip:hover {
  color: #fff8e7;
  border-color: rgba(237, 208, 139, .7);
  background: rgba(58, 26, 52, .6);
}

.oapp-gv2-progress {
  width: min(100%, 760px);
  height: 2px;
  margin: 0 auto 1.3rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(230, 204, 147, .13);
}

.oapp-gv2-progress span {
  display: block;
  width: var(--gv2-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6db3ad, #e4bd67, #bd779d);
  box-shadow: 0 0 .9rem rgba(226, 191, 109, .55);
  transition: width .28s ease;
}

.oapp-gv2-board-stage {
  position: relative;
  width: min(100%, 650px);
  margin: 0 auto;
  padding: clamp(.45rem, 1.6vw, .75rem);
  border: 1px solid rgba(225, 192, 117, .27);
  border-radius: clamp(.85rem, 2vw, 1.2rem);
  background:
    linear-gradient(90deg, rgba(214, 181, 105, .055) 1px, transparent 1px),
    linear-gradient(rgba(214, 181, 105, .055) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, rgba(39, 113, 114, .17), transparent 66%),
    rgba(2, 9, 15, .58);
  background-size: 18px 18px, 18px 18px, auto, auto;
  box-shadow: inset 0 0 2.6rem rgba(0, 0, 0, .45), 0 18px 45px rgba(0, 0, 0, .22);
}

.oapp-gv2-board {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(3px, .75vw, 7px);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  perspective: 1100px;
}

.oapp-gv2-tile {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  border-radius: clamp(.25rem, .65vw, .46rem);
  transform-style: preserve-3d;
}

.oapp-gv2-tile-core {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  transform: translateY(0) rotateY(180deg) rotate(var(--gv2-turn, 0deg));
  transform-style: preserve-3d;
  transition: transform .54s cubic-bezier(.28, .78, .25, 1.08), filter .35s ease, opacity .35s ease;
}

.oapp-gv2-tile[data-state="waiting"] .oapp-gv2-tile-core {
  opacity: 0;
  transform: translate(120%, -120%) rotateY(0) rotate(14deg) scale(.78);
}

.oapp-gv2-tile[data-state="dealt"] .oapp-gv2-tile-core {
  opacity: 1;
  transform: translateY(0) rotateY(0) rotate(0deg);
  animation: gv2-deal .5s cubic-bezier(.19, .77, .22, 1) both;
  animation-delay: calc(var(--gv2-i) * 35ms);
}

.oapp-gv2-tile[data-state="revealed"] .oapp-gv2-tile-core,
.oapp-gv2-tile[data-state="turning"] .oapp-gv2-tile-core,
.oapp-gv2-tile[data-state="matched"] .oapp-gv2-tile-core,
.oapp-gv2-tile[data-state="muted"] .oapp-gv2-tile-core {
  transform: translateY(0) rotateY(180deg) rotate(var(--gv2-turn, 0deg));
}

.oapp-gv2-tile[data-state="turning"] .oapp-gv2-tile-core {
  filter: brightness(1.12) drop-shadow(0 0 .55rem rgba(225, 191, 111, .3));
}

.oapp-gv2-tile[data-state="matched"] .oapp-gv2-tile-core {
  filter: brightness(1.06) saturate(1.08) drop-shadow(0 0 .6rem rgba(225, 191, 111, .28));
}

.oapp-gv2-tile[data-state="muted"] .oapp-gv2-tile-core {
  opacity: .46;
  filter: saturate(.58) brightness(.72);
}

.oapp-gv2-tile-side {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.oapp-gv2-tile-front {
  border: 1px solid rgba(232, 206, 146, .58);
  background: #122a2e;
  box-shadow: inset 0 0 0 2px rgba(24, 9, 23, .45), inset 0 0 1.1rem rgba(0, 0, 0, .34);
  transform: rotateY(180deg);
}

.oapp-gv2-tile-art {
  position: absolute;
  inset: 3px;
  display: block;
  isolation: isolate;
  overflow: hidden;
  border-radius: calc(clamp(.25rem, .65vw, .46rem) - 3px);
  background-image:
    radial-gradient(circle at 65% 35%, rgba(218, 182, 100, .2), transparent 19%),
    repeating-linear-gradient(135deg, rgba(237, 207, 139, .035) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, #1d5255, #201328 72%);
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 1.2rem rgba(2, 5, 10, .5);
}

/* Cuatro medias figuras por carta. Cada segmento ocupa un triangulo cuyo
   lado exterior es la costura con la carta vecina. --gv2-image puede apuntar
   a la ilustracion completa; --gv2-half puede afinar su posicion desde JS.
   Las clases half-a/half-b ofrecen el recorte estandar sin estilos inline. */
.oapp-gv2-segment {
  --gv2-half: center;
  position: absolute;
  z-index: 1;
  display: block;
  overflow: hidden;
  border: 0;
  background-color: #16383d;
  background-image:
    linear-gradient(145deg, rgba(247, 222, 163, .11), transparent 38%, rgba(3, 10, 16, .24)),
    var(--gv2-image, repeating-linear-gradient(135deg, #163b3f 0 5px, #122d35 5px 10px, #28172b 10px 15px));
  background-repeat: no-repeat;
  background-position: center, var(--gv2-half);
  filter: saturate(.94) brightness(.93);
  transition: filter .25s ease, opacity .25s ease;
  transform: translateZ(0);
}

.oapp-gv2-segment-top,
.oapp-gv2-segment--top,
.oapp-gv2-segment.top,
.oapp-gv2-segment[data-edge="top"] {
  left: 0;
  top: 0;
  width: 100%;
  height: 50.4%;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background-size: 100% 100%, 100% 200%;
}

.oapp-gv2-segment-right,
.oapp-gv2-segment--right,
.oapp-gv2-segment.right,
.oapp-gv2-segment[data-edge="right"] {
  right: 0;
  top: 0;
  width: 50.4%;
  height: 100%;
  -webkit-clip-path: polygon(0 50%, 100% 0, 100% 100%);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  background-size: 100% 100%, 200% 100%;
}

.oapp-gv2-segment-bottom,
.oapp-gv2-segment--bottom,
.oapp-gv2-segment.bottom,
.oapp-gv2-segment[data-edge="bottom"] {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50.4%;
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background-size: 100% 100%, 100% 200%;
}

.oapp-gv2-segment-left,
.oapp-gv2-segment--left,
.oapp-gv2-segment.left,
.oapp-gv2-segment[data-edge="left"] {
  left: 0;
  top: 0;
  width: 50.4%;
  height: 100%;
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background-size: 100% 100%, 200% 100%;
}

/* Recorte de una unica ilustracion completa en dos mitades. El motor puede
   sustituir estas posiciones con --gv2-half cuando el arte ya venga cortado. */
.oapp-gv2-segment-top.half-a,
.oapp-gv2-segment-top.oapp-gv2-half-a,
.oapp-gv2-segment-top[data-half="a"],
.oapp-gv2-segment--top.half-a,
.oapp-gv2-segment--top[data-half="a"],
.oapp-gv2-segment-bottom.half-a,
.oapp-gv2-segment-bottom.oapp-gv2-half-a,
.oapp-gv2-segment-bottom[data-half="a"],
.oapp-gv2-segment--bottom.half-a,
.oapp-gv2-segment--bottom[data-half="a"] { --gv2-half: center top; }

.oapp-gv2-segment-top.half-b,
.oapp-gv2-segment-top.oapp-gv2-half-b,
.oapp-gv2-segment-top[data-half="b"],
.oapp-gv2-segment--top.half-b,
.oapp-gv2-segment--top[data-half="b"],
.oapp-gv2-segment-bottom.half-b,
.oapp-gv2-segment-bottom.oapp-gv2-half-b,
.oapp-gv2-segment-bottom[data-half="b"],
.oapp-gv2-segment--bottom.half-b,
.oapp-gv2-segment--bottom[data-half="b"] { --gv2-half: center bottom; }

.oapp-gv2-segment-left.half-a,
.oapp-gv2-segment-left.oapp-gv2-half-a,
.oapp-gv2-segment-left[data-half="a"],
.oapp-gv2-segment--left.half-a,
.oapp-gv2-segment--left[data-half="a"],
.oapp-gv2-segment-right.half-a,
.oapp-gv2-segment-right.oapp-gv2-half-a,
.oapp-gv2-segment-right[data-half="a"],
.oapp-gv2-segment--right.half-a,
.oapp-gv2-segment--right[data-half="a"] { --gv2-half: left center; }

.oapp-gv2-segment-left.half-b,
.oapp-gv2-segment-left.oapp-gv2-half-b,
.oapp-gv2-segment-left[data-half="b"],
.oapp-gv2-segment--left.half-b,
.oapp-gv2-segment--left[data-half="b"],
.oapp-gv2-segment-right.half-b,
.oapp-gv2-segment-right.oapp-gv2-half-b,
.oapp-gv2-segment-right[data-half="b"],
.oapp-gv2-segment--right.half-b,
.oapp-gv2-segment--right[data-half="b"] { --gv2-half: right center; }

/* Arte ya partido: el integrador puede marcar .has-half-image para mostrar
   cada fichero entero sin volver a recortarlo. */
.oapp-gv2-segment.has-half-image,
.oapp-gv2-segment[data-image-kind="half"] {
  background-position: center, center;
  background-size: 100% 100%, cover;
}

.oapp-gv2-segment.is-neutral,
.oapp-gv2-segment[data-illustrable="false"],
.oapp-gv2-segment:not([style*="--gv2-image"])[data-neutral="true"] {
  background-image:
    radial-gradient(circle at 50% 56%, rgba(232, 199, 124, .16) 0 2px, transparent 3px),
    repeating-linear-gradient(135deg, rgba(104, 178, 171, .12) 0 1px, transparent 1px 6px),
    linear-gradient(145deg, #153d40, #132a34 48%, #2b172c);
  background-position: center;
  background-size: cover;
  filter: saturate(.64) brightness(.73);
}

.oapp-gv2-segment > img,
.oapp-gv2-segment-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--gv2-half, center);
  pointer-events: none;
}

.oapp-gv2-segment-icon,
.oapp-gv2-segment-number {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.oapp-gv2-segment-icon {
  color: rgba(244, 218, 157, .7);
  font-size: clamp(.52rem, 1.45vw, .88rem);
  text-shadow: 0 1px 5px rgba(0, 0, 0, .7);
}

.oapp-gv2-segment-number {
  display: grid;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 .2rem;
  place-items: center;
  border: 1px solid rgba(235, 205, 136, .48);
  border-radius: 999px;
  color: #f7e3b0;
  background: rgba(5, 16, 22, .73);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .42);
  font: 800 clamp(.43rem, 1.1vw, .64rem)/1 system-ui, sans-serif;
}

.oapp-gv2-segment.is-match,
.oapp-gv2-segment.is-matched,
.oapp-gv2-segment[data-match="1"] {
  z-index: 4;
  filter: saturate(1.12) brightness(1.12) drop-shadow(0 0 .35rem rgba(244, 211, 132, .7));
}

.oapp-gv2-segment::after {
  content: '';
  position: absolute;
  z-index: 5;
  opacity: 0;
  border-radius: 999px;
  background: #f7db8c;
  box-shadow: 0 0 .25rem #fff0bb, 0 0 .7rem rgba(234, 193, 99, .95);
  transition: opacity .2s ease;
}

.oapp-gv2-segment.is-match::after,
.oapp-gv2-segment.is-matched::after,
.oapp-gv2-segment[data-match="1"]::after { opacity: 1; }

.oapp-gv2-segment-top::after,
.oapp-gv2-segment--top::after,
.oapp-gv2-segment.top::after,
.oapp-gv2-segment[data-edge="top"]::after { left: 8%; top: 0; width: 84%; height: 2px; }

.oapp-gv2-segment-right::after,
.oapp-gv2-segment--right::after,
.oapp-gv2-segment.right::after,
.oapp-gv2-segment[data-edge="right"]::after { right: 0; top: 8%; width: 2px; height: 84%; }

.oapp-gv2-segment-bottom::after,
.oapp-gv2-segment--bottom::after,
.oapp-gv2-segment.bottom::after,
.oapp-gv2-segment[data-edge="bottom"]::after { left: 8%; bottom: 0; width: 84%; height: 2px; }

.oapp-gv2-segment-left::after,
.oapp-gv2-segment--left::after,
.oapp-gv2-segment.left::after,
.oapp-gv2-segment[data-edge="left"]::after { left: 0; top: 8%; width: 2px; height: 84%; }

.oapp-gv2-tile-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: .28rem;
  height: .28rem;
  border: 1px solid rgba(247, 218, 151, .82);
  border-radius: 50%;
  background: #1a2e30;
  box-shadow: 0 0 .45rem rgba(239, 207, 135, .45);
  transform: translate(-50%, -50%);
  z-index: 6;
}

.oapp-gv2-edge {
  position: absolute;
  z-index: 3;
  display: block;
  opacity: 0;
  background: #f3d784;
  box-shadow: 0 0 .22rem #ffe8a1, 0 0 .7rem rgba(232, 188, 91, .9);
  transition: opacity .2s ease;
}

.oapp-gv2-edge[data-match="1"],
.oapp-gv2-edge.is-matched {
  opacity: 1;
  animation: gv2-seam 1.25s ease-in-out infinite alternate;
}

.oapp-gv2-edge-top,
.oapp-gv2-edge-bottom {
  left: 10%;
  width: 80%;
  height: 2px;
}

.oapp-gv2-edge-left,
.oapp-gv2-edge-right {
  top: 10%;
  width: 2px;
  height: 80%;
}

.oapp-gv2-edge-top { top: 0; }
.oapp-gv2-edge-right { right: 0; }
.oapp-gv2-edge-bottom { bottom: 0; }
.oapp-gv2-edge-left { left: 0; }

.oapp-gv2-links {
  position: absolute;
  inset: clamp(.45rem, 1.6vw, .75rem);
  z-index: 2;
  width: calc(100% - clamp(.9rem, 3.2vw, 1.5rem));
  height: calc(100% - clamp(.9rem, 3.2vw, 1.5rem));
  overflow: visible;
  pointer-events: none;
}

.oapp-gv2-links path,
.oapp-gv2-links line {
  fill: none;
  stroke: #f2d27e;
  stroke-width: .5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 1.2px #ffe4a0);
  stroke-dasharray: 3 2;
  animation: gv2-dash 2.4s linear infinite;
}

.oapp-gv2-live {
  min-height: 1.35rem;
  margin: .85rem auto 0;
  color: rgba(221, 232, 226, .68);
  font-size: .82rem;
  text-align: center;
}

/* Medallon de figura durante la resolucion ------------------------------- */
.oapp-gv2-medallion {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) minmax(10rem, 1fr);
  align-items: center;
  gap: 1rem;
  width: min(calc(100% - 2rem), 25rem);
  padding: .78rem;
  border: 1px solid rgba(241, 211, 139, .7);
  border-radius: 999px 1.1rem 1.1rem 999px;
  color: #fff9eb;
  background: linear-gradient(125deg, rgba(9, 46, 51, .97), rgba(45, 18, 42, .97));
  box-shadow: 0 24px 55px rgba(0, 0, 0, .62), inset 0 0 1.5rem rgba(236, 199, 113, .07);
  transform: translate(-50%, -50%);
  animation: gv2-medallion-in .55s cubic-bezier(.2, .85, .25, 1.15) both;
}

.oapp-gv2-medallion-halo {
  position: absolute;
  left: -1.2rem;
  top: 50%;
  z-index: -1;
  width: 11.4rem;
  height: 11.4rem;
  border: 1px solid rgba(239, 207, 135, .24);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 0 1.3rem rgba(117, 182, 174, .035), 0 0 2.5rem rgba(226, 190, 105, .18);
}

.oapp-gv2-medallion-art {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid #d8b867;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(237, 204, 127, .42), transparent 26%),
    linear-gradient(145deg, #256266, #33172f);
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 1.5rem rgba(0, 0, 0, .34), 0 0 1.2rem rgba(218, 181, 95, .23);
}

.oapp-gv2-medallion-copy {
  min-width: 0;
  padding-right: .7rem;
}

.oapp-gv2-medallion-copy small {
  display: block;
  margin-bottom: .28rem;
  color: #e7c97f;
  font: 800 .65rem/1.2 system-ui, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.oapp-gv2-medallion-copy strong {
  display: block;
  overflow: hidden;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.15rem, 3.4vw, 1.65rem);
  font-weight: 500;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oapp-gv2-medallion-copy b {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  margin-top: .48rem;
  padding: .23rem .58rem;
  border: 1px solid rgba(224, 191, 112, .33);
  border-radius: 999px;
  color: #f6dc9b;
  background: rgba(4, 14, 21, .45);
  font: 800 .88rem/1 system-ui, sans-serif;
}

/* Resultado --------------------------------------------------------------- */
.oapp-gv2-result {
  min-height: 42rem;
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
}

.oapp-gv2-result-sigil {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto .8rem;
  place-items: center;
  border: 1px solid rgba(228, 195, 119, .48);
  border-radius: 50%;
  color: #f1d590;
  background: radial-gradient(circle, rgba(24, 91, 92, .32), rgba(44, 18, 42, .32));
  box-shadow: 0 0 1.4rem rgba(89, 170, 164, .11);
}

.oapp-gv2-result-head h2 {
  font-size: clamp(1.75rem, 4.6vw, 2.7rem);
}

/* El titulo recibe el foco al terminar para orientar a lectores de pantalla;
   no es un control interactivo y no necesita el rectangulo nativo. */
.oapp-gv2-result-head h2:focus { outline: none; }

.oapp-gv2-section-heading {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .85rem;
}

.oapp-gv2-section-heading h3 {
  flex: 0 1 auto;
  margin: 0;
  color: #f8f0df;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.12rem, 2.5vw, 1.35rem);
  font-weight: 500;
}

.oapp-gv2-section-heading > span {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(224, 190, 111, .32), transparent);
}

.oapp-gv2-sequence {
  width: min(100%, 760px);
  margin: 1.75rem auto 0;
}

.oapp-gv2-sequence ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oapp-gv2-sequence li {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .52rem .72rem .52rem .58rem;
  border: 1px solid rgba(225, 192, 116, .3);
  border-radius: .75rem;
  background: linear-gradient(135deg, rgba(18, 73, 76, .49), rgba(68, 26, 59, .45));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.oapp-gv2-sequence li small {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  margin-right: .48rem;
  place-items: center;
  border-radius: 50%;
  color: rgba(7, 20, 25, .88);
  background: #d8ba70;
  font: 800 .65rem/1 system-ui, sans-serif;
}

.oapp-gv2-sequence li strong {
  color: #fff7e7;
  font: 800 1rem/1 system-ui, sans-serif;
}

.oapp-gv2-sequence li > span {
  margin-left: .08rem;
  color: #f0d28b;
  font: 800 1.08rem/1 system-ui, sans-serif;
}

.oapp-gv2-synthesis {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  width: min(100%, 760px);
  margin: 1rem auto 0;
  padding: clamp(1rem, 3vw, 1.35rem);
  overflow: hidden;
  border: 1px solid rgba(105, 182, 177, .25);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 5% 50%, rgba(66, 151, 148, .13), transparent 26%),
    linear-gradient(120deg, rgba(8, 36, 43, .74), rgba(36, 17, 37, .7));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 14px 34px rgba(0, 0, 0, .13);
}

.oapp-gv2-synthesis::after {
  content: '';
  position: absolute;
  right: -3rem;
  top: -4rem;
  width: 10rem;
  height: 10rem;
  border: 1px solid rgba(224, 190, 111, .1);
  border-radius: 50%;
  box-shadow: 0 0 0 1.5rem rgba(224, 190, 111, .02);
}

.oapp-gv2-synthesis-icon {
  position: relative;
  display: grid;
  width: 3.4rem;
  height: 3.4rem;
  place-items: center;
  border: 1px solid rgba(225, 192, 116, .42);
  border-radius: 50%;
  background: rgba(7, 23, 29, .58);
}

.oapp-gv2-synthesis-icon::before,
.oapp-gv2-synthesis-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: #e7c979;
  transform: translate(-50%, -50%);
}

.oapp-gv2-synthesis-icon::before { width: 1.75rem; height: 1px; }
.oapp-gv2-synthesis-icon::after { width: 1px; height: 1.75rem; }

.oapp-gv2-synthesis .oapp-gv2-eyebrow { margin: .05rem 0 .28rem; font-size: .62rem; }
.oapp-gv2-synthesis h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.oapp-gv2-synthesis p:last-child { margin: 0; color: rgba(235, 239, 229, .86); line-height: 1.65; }

.oapp-gv2-readings-wrap {
  width: min(100%, 760px);
  margin: 1.5rem auto 0;
}

.oapp-gv2-readings {
  display: grid;
  gap: .62rem;
}

.oapp-gv2-empty {
  margin: 0;
  padding: 1.2rem;
  border: 1px dashed rgba(225, 192, 116, .22);
  border-radius: .85rem;
  color: rgba(207, 220, 214, .58);
  text-align: center;
}

.oapp-gv2-reading {
  overflow: hidden;
  border: 1px solid rgba(218, 184, 107, .22);
  border-radius: .92rem;
  background: rgba(5, 17, 25, .52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .028);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.oapp-gv2-reading[open] {
  border-color: rgba(225, 192, 116, .43);
  background: rgba(8, 26, 33, .72);
  transform: translateY(-1px);
}

/* Miniatura de la figura reconstruida. Funciona como <img>, como contenedor
   con un <img> o como bloque con style="--gv2-image:url(...)". */
.oapp-gv2-reading-art {
  position: relative;
  display: block;
  width: 3.35rem;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(232, 202, 132, .58);
  border-radius: .68rem;
  background-image:
    linear-gradient(145deg, rgba(246, 220, 158, .1), rgba(4, 13, 19, .18)),
    var(--gv2-image, repeating-linear-gradient(135deg, #1c4b4d 0 6px, #182d37 6px 12px, #351a31 12px 18px));
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 1rem rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .24);
}

img.oapp-gv2-reading-art {
  object-fit: cover;
  object-position: center;
}

.oapp-gv2-reading-art > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.oapp-gv2-reading.has-art summary,
.oapp-gv2-reading:has(.oapp-gv2-reading-art) summary {
  grid-template-columns: auto 3.35rem minmax(0, 1fr) auto auto;
}

.oapp-gv2-reading summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .75rem;
  min-height: 4.25rem;
  padding: .65rem .85rem;
  color: #f8f0df;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.oapp-gv2-reading summary::-webkit-details-marker { display: none; }

.oapp-gv2-reading-number {
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  border: 1px solid rgba(232, 202, 132, .53);
  border-radius: 50%;
  color: #f6d991;
  background: radial-gradient(circle, rgba(93, 163, 158, .17), rgba(87, 33, 73, .18));
  font: 800 .9rem/1 system-ui, sans-serif;
}

.oapp-gv2-reading-title {
  min-width: 0;
}

.oapp-gv2-reading-title strong,
.oapp-gv2-reading-title small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oapp-gv2-reading-title strong {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  font-weight: 500;
}

.oapp-gv2-reading-title small {
  margin-top: .16rem;
  color: rgba(190, 211, 204, .62);
  font: 650 .72rem/1.3 system-ui, sans-serif;
}

.oapp-gv2-reading-arrow {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  color: #efd18b;
  background: rgba(213, 179, 101, .08);
  font: 800 1.2rem/1 system-ui, sans-serif;
}

.oapp-gv2-reading-toggle {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
}

.oapp-gv2-reading-toggle::before,
.oapp-gv2-reading-toggle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: .8rem;
  height: 1px;
  background: rgba(238, 216, 165, .74);
  transform: translate(-50%, -50%);
  transition: transform .2s ease;
}

.oapp-gv2-reading-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.oapp-gv2-reading[open] .oapp-gv2-reading-toggle::after { transform: translate(-50%, -50%) rotate(0); }

.oapp-gv2-reading-body {
  padding: 0 1rem 1.05rem 4.2rem;
  color: rgba(229, 236, 226, .82);
}

.oapp-gv2-reading-body dl {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .7rem;
  margin: 0 0 .75rem;
}

.oapp-gv2-reading-body dl > div {
  padding: .38rem .62rem;
  border: 1px solid rgba(213, 179, 101, .16);
  border-radius: .6rem;
  background: rgba(3, 13, 19, .35);
}

.oapp-gv2-reading-body dt,
.oapp-gv2-reading-body dd {
  display: inline;
  margin: 0;
  font-size: .72rem;
}

.oapp-gv2-reading-body dt {
  color: #d7b970;
  font-weight: 800;
}

.oapp-gv2-reading-body dt::after { content: ': '; }
.oapp-gv2-reading-body dd { color: rgba(226, 235, 226, .73); }
.oapp-gv2-reading-body > p { margin: 0; line-height: 1.68; }

/* Carta de cierre opcional. No se fuerza ningun significado: la vista solo
   la muestra cuando el motor haya generado el bloque correspondiente. */
.oapp-gv2-last,
.oapp-gv2-last-card {
  position: relative;
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  width: min(100%, 760px);
  min-height: 7rem;
  margin: 1rem auto 0;
  padding: .78rem 1rem .78rem .78rem;
  overflow: hidden;
  border: 1px solid rgba(222, 188, 109, .32);
  border-radius: 1rem;
  color: rgba(239, 239, 225, .86);
  background:
    radial-gradient(circle at 8% 50%, rgba(64, 146, 142, .18), transparent 25%),
    linear-gradient(120deg, rgba(9, 39, 44, .76), rgba(49, 21, 44, .72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 13px 32px rgba(0, 0, 0, .15);
}

.oapp-gv2-last[hidden],
.oapp-gv2-last-card[hidden] { display: none !important; }

.oapp-gv2-last:not(:has(.oapp-gv2-last-art))::before,
.oapp-gv2-last-card:not(:has(.oapp-gv2-last-art))::before {
  content: '✦';
  position: relative;
  z-index: 1;
  display: grid;
  width: 5.4rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(236, 205, 134, .62);
  border-radius: .75rem;
  color: #f1d28a;
  background:
    radial-gradient(circle, rgba(223, 187, 102, .14) 0 18%, transparent 19%),
    conic-gradient(from 45deg, #17494c, #28172d, #17494c);
  box-shadow: inset 0 0 1.2rem rgba(0, 0, 0, .38), 0 7px 18px rgba(0, 0, 0, .27);
  font-size: 1.35rem;
  text-shadow: 0 0 .65rem rgba(239, 203, 122, .52);
}

.oapp-gv2-last::after,
.oapp-gv2-last-card::after {
  content: '';
  position: absolute;
  right: -3.2rem;
  top: -3.7rem;
  width: 10rem;
  height: 10rem;
  border: 1px solid rgba(226, 192, 112, .1);
  border-radius: 50%;
  box-shadow: 0 0 0 1.5rem rgba(226, 192, 112, .025);
  pointer-events: none;
}

.oapp-gv2-last-art {
  position: relative;
  z-index: 1;
  display: block;
  width: 5.4rem;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(236, 205, 134, .62);
  border-radius: .75rem;
  background-image:
    linear-gradient(145deg, rgba(245, 220, 159, .08), rgba(3, 12, 18, .22)),
    var(--gv2-image, repeating-linear-gradient(135deg, #1a494b 0 7px, #162f38 7px 14px, #351a31 14px 21px));
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 1.2rem rgba(0, 0, 0, .38), 0 7px 18px rgba(0, 0, 0, .27);
}

img.oapp-gv2-last-art {
  object-fit: cover;
  object-position: center;
}

.oapp-gv2-last-art > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.oapp-gv2-last-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.oapp-gv2-last-copy small,
.oapp-gv2-last-label {
  display: block;
  margin-bottom: .28rem;
  color: var(--gv2-gold-bright);
  font: 800 .64rem/1.2 system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.oapp-gv2-last-copy strong,
.oapp-gv2-last-title {
  display: block;
  color: #fff5e2;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.08rem, 2.8vw, 1.35rem);
  font-weight: 500;
  line-height: 1.18;
}

.oapp-gv2-last-copy p,
.oapp-gv2-last-text {
  margin: .4rem 0 0;
  color: rgba(218, 229, 220, .72);
  font-size: .86rem;
  line-height: 1.55;
}

.oapp-gv2-last-number,
.oapp-gv2-last-direction {
  display: inline-grid;
  min-width: 1.7rem;
  height: 1.7rem;
  margin-top: .48rem;
  padding: 0 .38rem;
  place-items: center;
  border: 1px solid rgba(226, 191, 111, .33);
  border-radius: 999px;
  color: #f3d58b;
  background: rgba(3, 14, 20, .38);
  font: 800 .76rem/1 system-ui, sans-serif;
}

.oapp-gv2-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  width: min(100%, 760px);
  margin: 1.5rem auto 0;
}

.oapp-gv2-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .48rem;
  min-height: 3rem;
  padding: .75rem 1.15rem;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.oapp-gv2-button:hover { transform: translateY(-2px); }
.oapp-gv2-button:active { transform: translateY(0); }

.oapp-gv2-share {
  border: 1px solid #e3c67d;
  color: #152326;
  background: linear-gradient(135deg, #f0d894, #cfa753);
  box-shadow: 0 10px 26px rgba(202, 158, 67, .16), inset 0 1px 0 rgba(255, 255, 255, .55);
}

.oapp-gv2-share:hover { box-shadow: 0 14px 30px rgba(202, 158, 67, .24), inset 0 1px 0 rgba(255, 255, 255, .55); }

.oapp-gv2-again {
  border: 1px solid rgba(211, 183, 119, .29);
  color: rgba(248, 239, 219, .84);
  background: rgba(5, 19, 26, .48);
}

.oapp-gv2-again:hover {
  border-color: rgba(230, 201, 133, .57);
  background: rgba(52, 25, 49, .56);
}

.oapp-gv2-share-status {
  min-height: 1.25rem;
  margin: .55rem 0 0;
  color: rgba(188, 217, 206, .7);
  font-size: .78rem;
  text-align: center;
}

/* Animaciones ------------------------------------------------------------- */
@keyframes gv2-star {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.25); }
}

@keyframes gv2-orbit {
  to { transform: rotate(360deg); }
}

@keyframes gv2-deal {
  0% { opacity: 0; transform: translate(70%, -80%) rotateY(0) rotate(10deg) scale(.76); }
  68% { opacity: 1; transform: translate(-2%, 2%) rotateY(0) rotate(-1.5deg) scale(1.02); }
  100% { opacity: 1; transform: translate(0) rotateY(0) rotate(0) scale(1); }
}

@keyframes gv2-seam {
  from { filter: brightness(.9); box-shadow: 0 0 .2rem #ffe8a1, 0 0 .45rem rgba(232, 188, 91, .72); }
  to { filter: brightness(1.18); box-shadow: 0 0 .3rem #fff1be, 0 0 .9rem rgba(232, 188, 91, 1); }
}

@keyframes gv2-dash {
  to { stroke-dashoffset: -10; }
}

@keyframes gv2-medallion-in {
  0% { opacity: 0; transform: translate(-50%, -46%) scale(.78); filter: blur(4px); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}

/* Tablet y movil ---------------------------------------------------------- */
@media (max-width: 740px) {
  .oapp-gv2 {
    min-height: 36rem;
    border-radius: 1.2rem;
  }

  .oapp-gv2-choice,
  .oapp-gv2-ceremony,
  .oapp-gv2-result {
    min-height: 36rem;
  }

  .oapp-gv2-choice::before {
    background-position: center 28%;
  }

  .oapp-gv2-choices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 410px);
    gap: .7rem .8rem;
    padding-inline: clamp(.4rem, 4vw, 1.4rem);
  }

  .oapp-gv2-choice-card {
    transform: none;
    aspect-ratio: 1 / 1.12;
  }

  .oapp-gv2-choice-card:nth-child(2),
  .oapp-gv2-choice-card:nth-child(5) { transform: translateY(.35rem); }

  .oapp-gv2-choice-card:hover { transform: translateY(-.28rem) scale(1.025); }

  .oapp-gv2-ceremony-head {
    align-items: flex-start;
  }

  .oapp-gv2-reading-body {
    padding-left: 1rem;
  }

  .oapp-gv2-reading-art {
    width: 3rem;
  }

  .oapp-gv2-reading.has-art summary,
  .oapp-gv2-reading:has(.oapp-gv2-reading-art) summary {
    grid-template-columns: auto 3rem minmax(0, 1fr) auto auto;
  }
}

@media (max-width: 480px) {
  .oapp-gv2-step {
    padding: 1rem;
  }

  .oapp-gv2-choice {
    padding-top: 1.5rem;
    padding-bottom: 1.4rem;
  }

  .oapp-gv2-choice::before {
    background-position: center top;
    opacity: .72;
  }

  .oapp-gv2-emblem {
    width: 4.4rem;
    height: 4.4rem;
    margin-bottom: .78rem;
  }

  .oapp-gv2-emblem::before { inset: .5rem; }
  .oapp-gv2-emblem span::before { height: 2.2rem; }
  .oapp-gv2-emblem span::after { width: 2.2rem; }

  .oapp-gv2-lead,
  .oapp-gv2-result-head > p:last-child {
    line-height: 1.55;
  }

  .oapp-gv2-choices {
    margin-top: 1.15rem;
    gap: .55rem;
    padding: .5rem .55rem .8rem;
  }

  .oapp-gv2-card-back i { inset: .48rem; }
  .oapp-gv2-card-back em { right: .36rem; bottom: .3rem; font-size: .56rem; }
  .oapp-gv2-hint { max-width: 18rem; line-height: 1.45; }

  .oapp-gv2-ceremony-head {
    display: block;
  }

  .oapp-gv2-skip {
    margin-top: .8rem;
  }

  .oapp-gv2-board-stage {
    padding: 4px;
    border-radius: .7rem;
  }

  .oapp-gv2-board {
    gap: 3px;
  }

  .oapp-gv2-segment-number {
    min-width: .92rem;
    height: .92rem;
    padding: 0 .1rem;
    border-color: rgba(235, 205, 136, .36);
    font-size: .4rem;
  }

  .oapp-gv2-segment-icon {
    font-size: .5rem;
  }

  .oapp-gv2-links {
    inset: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
  }

  .oapp-gv2-medallion {
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: .65rem;
    width: calc(100% - 1rem);
    padding: .55rem;
  }

  .oapp-gv2-medallion-halo {
    left: -.75rem;
    width: 7rem;
    height: 7rem;
  }

  .oapp-gv2-medallion-copy small { font-size: .55rem; }

  .oapp-gv2-sequence ol {
    justify-content: flex-start;
  }

  .oapp-gv2-sequence li {
    min-height: 2.5rem;
    padding: .42rem .6rem .42rem .48rem;
  }

  .oapp-gv2-synthesis {
    grid-template-columns: 1fr;
    gap: .65rem;
  }

  .oapp-gv2-synthesis-icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  .oapp-gv2-reading summary {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: .5rem;
    padding: .58rem .65rem;
  }

  .oapp-gv2-reading-art {
    width: 2.55rem;
    border-radius: .55rem;
  }

  .oapp-gv2-reading.has-art summary,
  .oapp-gv2-reading:has(.oapp-gv2-reading-art) summary {
    grid-template-columns: auto 2.55rem minmax(0, 1fr) auto auto;
    gap: .38rem;
  }

  .oapp-gv2-reading-number {
    width: 2.2rem;
    height: 2.2rem;
  }

  .oapp-gv2-reading-arrow {
    width: 1.55rem;
    height: 1.55rem;
  }

  .oapp-gv2-reading-body {
    padding: 0 .78rem .9rem;
  }

  .oapp-gv2-reading-body dl {
    display: grid;
  }

  .oapp-gv2-last,
  .oapp-gv2-last-card {
    grid-template-columns: 4.25rem minmax(0, 1fr);
    gap: .72rem;
    min-height: 5.7rem;
    padding: .65rem;
  }

  .oapp-gv2-last-art {
    width: 4.25rem;
    border-radius: .62rem;
  }

  .oapp-gv2-last:not(:has(.oapp-gv2-last-art))::before,
  .oapp-gv2-last-card:not(:has(.oapp-gv2-last-art))::before {
    width: 4.25rem;
    border-radius: .62rem;
  }

  .oapp-gv2-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .oapp-gv2-button {
    width: 100%;
  }
}

@media (forced-colors: active) {
  .oapp-gv2-choice-card,
  .oapp-gv2-button,
  .oapp-gv2-skip,
  .oapp-gv2-reading summary {
    forced-color-adjust: auto;
  }

  .oapp-gv2-edge[data-match="1"],
  .oapp-gv2-edge.is-matched,
  .oapp-gv2-segment.is-match,
  .oapp-gv2-segment.is-matched,
  .oapp-gv2-segment[data-match="1"] {
    opacity: 1;
    background: Highlight;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oapp-gv2 *,
  .oapp-gv2 *::before,
  .oapp-gv2 *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }

  .oapp-gv2-choice-card,
  .oapp-gv2-choice-card:nth-child(2),
  .oapp-gv2-choice-card:nth-child(5) {
    transform: none;
  }

  .oapp-gv2-tile[data-state="waiting"] .oapp-gv2-tile-core {
    opacity: 0;
  }

  .oapp-gv2-tile[data-state="dealt"] .oapp-gv2-tile-core {
    opacity: 1;
    transform: translate(0) rotateY(0);
  }

  .oapp-gv2-choice::before {
    transform: none;
  }
}