/* Geolite v0.10 - retos, puntero y crupier (casino pixel art) */

/* ---------------------------------------------------------------- capas de retos sobre el mapa */
#chOv { position: absolute; inset: 0; pointer-events: none; --dr: 180px; --da: .95; }
#chOv > * { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .55s ease; }
#chOv > .on { opacity: 1; }
.ch-blur { -webkit-backdrop-filter: blur(var(--bl, 6px)); backdrop-filter: blur(var(--bl, 6px));
  -webkit-mask: radial-gradient(circle at var(--px, 50%) var(--py, 50%), transparent 0, transparent var(--lr, -60px), #000 calc(var(--lr, -60px) + 46px)); mask: radial-gradient(circle at var(--px, 50%) var(--py, 50%), transparent 0, transparent var(--lr, -60px), #000 calc(var(--lr, -60px) + 46px)); }
.ch-dark { background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(2, 6, 4, 0) 0, rgba(2, 6, 4, 0) calc(var(--dr) * .42), rgba(2, 6, 4, var(--da)) var(--dr)); }
.ch-halo { mix-blend-mode: screen; background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(255, 206, 110, .10), transparent calc(var(--dr) * 1.05)); }
.ch-halo.warm { background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(255, 214, 130, .24), rgba(255, 170, 60, .08) calc(var(--dr) * .6), transparent calc(var(--dr) * 1.15)); }
.ch-halo.warn { background: rgba(255, 70, 50, .22); opacity: 1; transition: none; }
.ch-clouds { image-rendering: pixelated; mix-blend-mode: normal; }
.ch-clouds.on { opacity: .9; }
.ch-flick { background: #030a06; transition: none !important; opacity: 0; }

/* ---------------------------------------------------------------- nombre del lugar con retos */
#askName .lt , #askSub .lt, .split-alt .sa-n .lt { display: inline-block; }
#askName.ch-shaky .lt[data-sh] , #askSub.ch-shaky .lt[data-sh], .split-alt .sa-n.ch-shaky .lt[data-sh] { animation: lt-shake var(--dur, .1s) steps(2, end) var(--del, 0s) infinite; }
@keyframes lt-shake { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(var(--ax), var(--ay)) rotate(var(--ar)); } 100% { transform: translate(calc(var(--ax) * -.7), calc(var(--ay) * .6)) rotate(calc(var(--ar) * -1)); } }
#askName .lt.gap , #askSub .lt.gap, .split-alt .sa-n .lt.gap { color: transparent; position: relative; }
#askName .lt.gap::after , #askSub .lt.gap::after, .split-alt .sa-n .lt.gap::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: .16em; height: .11em; background: #16241c; opacity: .85; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
#askName .lt.fix , #askSub .lt.fix, .split-alt .sa-n .lt.fix { animation: lt-fix .55s cubic-bezier(.2, 1.7, .4, 1) both; }
@keyframes lt-fix { 0% { transform: scale(1.7); color: #f8b449; } 100% { transform: none; } }
#askName.ch-mirror , #askSub.ch-mirror, .split-alt .sa-n.ch-mirror { display: block; transform: scaleX(-1); }
#askName.ch-fade , #askSub.ch-fade, .split-alt .sa-n.ch-fade { opacity: .05; filter: blur(3px); transition: opacity .9s ease, filter .9s ease; }
#askName.ch-dim , #askSub.ch-dim, .split-alt .sa-n.ch-dim { opacity: .5; transition: opacity .6s ease; }

/* ---------------------------------------------------------------- puntero */
#ptr { position: absolute; left: 0; top: 0; z-index: 40; pointer-events: none; display: none; will-change: transform; }
#ptr.on { display: block; }
.ptr-cv { position: absolute; left: -65px; top: -65px; width: 128px; height: 128px; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .45)) drop-shadow(0 0 12px rgba(248, 180, 73, .25)); }
.ptr-tag { position: absolute; left: 0; top: 44px; transform: translateX(-50%); white-space: pre; text-align: center; display: none; font-family: var(--mono); font-weight: 700; font-size: 15.5px; letter-spacing: .06em; color: #ffe08a; background: rgba(22, 36, 28, .92); padding: 5px 9px; border: 2px solid #f8b449; box-shadow: 0 4px 0 rgba(0, 0, 0, .4); line-height: 1.35; }
.ptr-tag.on { display: block; }
.ptr-ghost { position: absolute; left: 0; top: 0; width: 18px; height: 18px; display: none; border: 3px dashed #fe5f55; box-sizing: border-box; transform-origin: center; background: rgba(254, 95, 85, .18); }
.ptr-ghost.on { display: block; }
#ptrMag { position: absolute; left: 0; top: 0; z-index: 39; width: 168px; height: 168px; border-radius: 50%; border: 4px solid #f8b449; box-shadow: 0 0 0 3px #16241c, 0 14px 30px rgba(0, 0, 0, .55), inset 0 0 22px rgba(0, 0, 0, .35); display: none; pointer-events: none; }
#ptrMag.on { display: block; }
.ptr-gx, .ptr-gy { position: absolute; left: 0; top: 0; z-index: 38; pointer-events: none; display: none; }
.ptr-gx { width: 1px; height: 100%; background: repeating-linear-gradient(to bottom, rgba(248, 180, 73, .55) 0 6px, transparent 6px 12px); }
.ptr-gy { height: 1px; width: 100%; background: repeating-linear-gradient(to right, rgba(248, 180, 73, .55) 0 6px, transparent 6px 12px); }
.ptr-gx.on, .ptr-gy.on { display: block; }
body.ptr-on #map { cursor: none; }
/* cursor invertido: el raton de verdad puede caer sobre cualquier panel (perks, pista, pregunta, puntuacion...) mientras el reticulo esta en el mapa: TODO deja pasar el raton al mapa y las cartas de la mano se pulsan con el reticulo (pointer.js uiAt) */
body.ptr-thru *:not(canvas) { pointer-events: none !important; }

/* ---------------------------------------------------------------- fichas de reto */
.ch-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 6px; border-radius: 999px; background: rgba(22, 36, 28, .92); color: #fdf5fd; font-family: var(--mono); font-weight: 700; font-size: 15.5px; letter-spacing: .04em; box-shadow: inset 0 0 0 2px var(--cc, #b58cff), 0 3px 0 rgba(0, 0, 0, .35); white-space: nowrap; }
.ch-chip .ic { width: 24px; height: 24px; } .ch-chip b { font-weight: 700; } .ch-chip .ch-lv { font-style: normal; font-size: 13px; letter-spacing: 1px; color: var(--cc, #b58cff); }
.ch-chip.k-text { --cc: #c9a3ff; } .ch-chip.k-map { --cc: #5fd6b8; } .ch-chip.k-rule { --cc: #fe5f55; }
.ch-chip.sm { padding: 3px 9px 3px 5px; font-size: 14px; } .ch-chip.sm .ic { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- crupier */
.dealer { position: absolute; left: 16px; bottom: 112px; z-index: 100010; display: flex; align-items: flex-end; gap: 4px; pointer-events: none; transform: translateX(-140%); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.4, .4, 1), opacity .3s; }
.dealer.in { transform: none; opacity: 1; }
.dealer.hidden { display: none; }
/* v0.32: la cara es el sprite animado (js/crupier.js): un <canvas> a escala ENTERA de pixel centrado en su hueco. Nada de rotate/scale en CSS:
   las caras, la boca, los botes y las sacudidas estan dibujados fotograma a fotograma */
.dl-face { position: relative; width: 320px; height: 320px; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .4)); flex: none; }
.cr-cv { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); image-rendering: pixelated; pointer-events: none; }
.cr-cv.mini { transform: none; }
.dl-bubble { position: relative; max-width: min(440px, calc(52 * var(--vw))); margin-bottom: 44px; padding: 11px 18px 13px 16px; background: #fdf5fd; color: #16241c; font-family: var(--sans); font-weight: 400; font-size: calc(27px * var(--dll, 1)); line-height: 1.12; box-shadow: inset 0 0 0 3px #16241c, 0 6px 0 rgba(0, 0, 0, .4); opacity: 0; transform: translateY(8px); transform-origin: 0 100%; transition: opacity .2s, transform .3s cubic-bezier(.2, 1.6, .4, 1); clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% + 12px)); }
.dl-bubble.on { opacity: 1; transform: none; } .dl-bubble p { margin: 0; min-height: 1.12em; text-wrap: pretty; transition: height .2s cubic-bezier(.2, .9, .3, 1); }   /* crece renglon a renglon al escribir (js/dealer.js) */ .dl-rest { visibility: hidden; }
/* EN DIRECTO (js/vivo.js): el autor escribe por el crupier. Piloto de estudio de television: cuadrado rojo de pixel que parpadea a golpes y la etiqueta en Silkscreen a 16 px (su rejilla) */
.dl-live { display: none; align-items: center; gap: 7px; margin: 1px 0 6px; font-family: var(--mono); font-weight: 400; font-size: 16px; line-height: 1; letter-spacing: .02em; color: #c4152a; text-transform: uppercase; white-space: nowrap; }
.dl-bubble.live .dl-live { display: flex; } .dl-bubble.live p { text-wrap: balance; }   /* lo escrito a mano no tiene el reparto cuidado de sus frases: lineas parejas, nada de una palabra sola abajo */
.dl-live i { width: 8px; height: 8px; flex: none; background: #e8283a; box-shadow: 0 0 0 2px rgba(232, 40, 58, .22); animation: dlLive 1.2s steps(1) infinite; }
@keyframes dlLive { 0%, 64% { opacity: 1; } 65%, 100% { opacity: .18; } }
html.reduce-motion .dl-live i { animation: none; } html.reduce-motion .dl-bubble p { transition: none; }
/* el crupier habla con la letra de lectura del juego (Jersey 15, la de los titulos y nombres), no con la de etiquetas (Silkscreen, todo mayusculas):
   27 px = 1 pixel de la fuente por pixel de pantalla (su rejilla es de 27 px), nitida. El chino/japones/coreano (Fusion Pixel, rejilla de 12 px) va a 24 px
   (x2 exacto) y el cirilico (Pixelify, mas alta que Jersey) tambien, para que no abulte mas que el resto. --dll escala todas las variantes del globo */
html:lang(zh), html:lang(ja), html:lang(ko), html:lang(ru) { --dll: .889; }
.dealer.big { position: relative; left: 0; bottom: 0; transform: none; opacity: 1; flex-direction: column; align-items: center; gap: 8px; z-index: 100010; }
.dealer.big .dl-face { width: clamp(320px, calc(54 * var(--vh)), 540px); height: clamp(320px, calc(54 * var(--vh)), 540px); order: 2; }
.dealer.big .dl-bubble { margin: 0; max-width: min(520px, calc(80 * var(--vw))); font-size: calc(27px * var(--dll, 1)); order: 1; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(50% + 10px) calc(100% - 12px), 50% 100%, calc(50% - 10px) calc(100% - 12px), 0 calc(100% - 12px)); padding-bottom: 20px; }
@media (max-width: 720px) { .dl-face { width: 170px; height: 170px; } .dealer { bottom: 130px; } .dl-bubble { font-size: calc(22px * var(--dll, 1)); max-width: calc(62 * var(--vw)); margin-bottom: 20px; }
  .dealer.big .dl-face { width: calc(72 * var(--vw)); height: calc(72 * var(--vw)); } .dealer.big .dl-bubble { max-width: calc(72 * var(--vw)); font-size: calc(22px * var(--dll, 1)); } }   /* movil vertical: el de la intro, dentro de la pantalla */

/* crupier: retrato a la izquierda, globo a la derecha */
.dealer:not(.big) { flex-direction: row-reverse; }
.dealer:not(.big) .dl-bubble { transform-origin: 0 100%; margin: 0 0 74px 0; }

/* intro de ronda con retos */
.intro-art { position: relative; }
.intro-dealer { position: absolute; left: -6%; bottom: -22%; z-index: 3; transform: rotate(-1.5deg); }   /* la carta va girada 1,5deg (premium.css): el crupier se endereza, que el texto girado se ve borroso */
@media (max-width: 720px) { .intro-dealer { left: 0; } }
.adv-chal-h { margin: 14px 0 6px; font-family: var(--mono); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: #ffd98a; }
.boss-combo { margin: 2px 0 8px; font-family: var(--serif); font-variation-settings: var(--disp); font-weight: 900; font-size: clamp(20px, calc(3.4 * var(--vh)), 34px); color: #fe5f55; text-shadow: 0 3px 0 rgba(0, 0, 0, .5); }
.adv-debuff .ch-lv { font-style: normal; font-size: 13px; letter-spacing: 2px; color: #ffd98a; margin-left: 4px; }
.adv-debuff.k-text { box-shadow: inset 4px 0 0 #c9a3ff; } .adv-debuff.k-map { box-shadow: inset 4px 0 0 #5fd6b8; } .adv-debuff.k-rule { box-shadow: inset 4px 0 0 #fe5f55; }

/* barra de la aventura: retos activos */
.ab-chal { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 8px; }

/* campamento: proxima ronda y perks que ayudan */
/* la carta recorta su contenido (overflow: hidden en premium.css): si hace counter, deja que la etiqueta sobresalga por arriba */

/* sacudida de "glitch" cuando el crupier toca la mesa */
#app.ch-glitch #map, #app.ch-glitch #fx { animation: ch-glitch .55s steps(6, end); }
@keyframes ch-glitch { 0% { filter: none; transform: none; } 16% { filter: hue-rotate(80deg) saturate(2.2) contrast(1.3); transform: translate(-6px, 2px) skewX(2deg); } 33% { filter: brightness(1.6); transform: translate(7px, -3px); } 50% { filter: hue-rotate(-70deg) saturate(1.8); transform: translate(-3px, 4px) skewX(-2deg); } 75% { filter: contrast(1.4); transform: translate(2px, -1px); } 100% { filter: none; transform: none; } }

/* ---------------------------------------------------------------- v0.11: retos de texto y de mapa nuevos */
#askName .lt.gap , #askSub .lt.gap, .split-alt .sa-n .lt.gap { color: transparent; display: inline-block; width: .6em; height: .9em; margin: 0 1px; vertical-align: -.1em; border-radius: 2px; background: repeating-linear-gradient(135deg, #16241c 0 3px, #2f5c46 3px 6px); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .28); }
#askName .lt.gap::after , #askSub .lt.gap::after, .split-alt .sa-n .lt.gap::after { display: none; }
#askName .lt.dot , #askSub .lt.dot, .split-alt .sa-n .lt.dot { color: #6d5d92; } #askName .lt.faint , #askSub .lt.faint, .split-alt .sa-n .lt.faint { opacity: .32; filter: blur(.7px); }
#askName .lt.rune , #askSub .lt.rune, .split-alt .sa-n .lt.rune { color: #a56cff; text-shadow: 0 0 6px rgba(165, 108, 255, .65); }
#askName.ch-upside , #askSub.ch-upside, .split-alt .sa-n.ch-upside { display: block; transform: rotate(180deg); }
/* tanda 12b: Dividir, la alternativa bajo la placa */
.split-alt { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px auto 2px; padding: 3px 10px 2px; border: 2px dashed #b8741a; border-radius: 10px; background: rgba(248, 180, 73, .16); color: #16241c; font: 800 15px/1.2 var(--serif); cursor: pointer; max-width: 100%; transition: transform .15s var(--spring), background .15s; }
.split-alt:hover { transform: translateY(-1px); background: rgba(248, 180, 73, .3); }
.split-alt .sa-k { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #8a5a14; } .split-alt .sa-k .ic { width: 18px; height: 18px; }
.split-alt .sa-n { min-width: 0; overflow-wrap: anywhere; } .split-alt .sa-flag { height: 26px; width: auto; border: 2px solid #16241c; border-radius: 3px; vertical-align: middle; }
.split-alt .sa-key { font: 700 10px/1 var(--mono, monospace); padding: 2px 4px; border-radius: 4px; background: #16241c; color: #ffd98a; }
/* tanda 11: el lacre de la apuesta en la ficha de un reto sellado */
.ch-chip.ch-sealed { box-shadow: inset 0 0 0 2px rgba(214, 58, 47, .85); }
.ch-chip.ch-sealed::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff7b6b, #a8231b 70%); box-shadow: 0 0 0 1.5px #16241c; }
/* tanda 9: Sangre fria: las fichas de los retos que apaga, heladas */
.ch-chip.ch-calm { filter: saturate(.35) brightness(.92); box-shadow: inset 0 0 0 2px rgba(150, 230, 255, .85), 0 0 10px rgba(150, 230, 255, .35); }
.ch-chip.ch-calm::after { content: "\2744"; color: #9fe6ff; margin-left: 1px; font-size: .9em; }
/* tanda 9: lo que lleva dentro la Hucha y Barajar gratis con el Ojo en el cielo */
.ab-perk, .tr-relic { position: relative; }
.hc-n { position: absolute; right: -4px; bottom: -5px; min-width: 16px; padding: 1px 3px 0; border-radius: 8px; background: #f8b449; color: #16241c; font: 800 11px/1.2 var(--mono, monospace); text-align: center; box-shadow: 0 0 0 2px #16241c; pointer-events: none; }
.nr-shuffle .nr-free { color: #ffd76a; font-style: normal; display: inline-flex; align-items: center; gap: 3px; text-transform: uppercase; }
/* tanda 6b: la etiqueta NUEVO de un reto que nunca has visto */
.ch-new, .adv-debuff .ch-new { display: inline-block; width: auto; font-family: inherit; font-weight: 700; margin: 0 4px; padding: 1px 5px 0; border: 2px solid #e2483d; color: #e2483d; background: rgba(255, 244, 228, .92); font-style: normal; font-size: .72em; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; border-radius: 3px; }
.ch-chip .ch-new { font-size: .62em; padding: 0 4px; margin: 0 3px; }
/* tanda 6: Nombre girado a tope, cada palabra a su manera */
#askName .wd.w-m, #askSub .wd.w-m, .split-alt .sa-n .wd.w-m { transform: scaleX(-1); }
#askName .wd.w-u, #askSub .wd.w-u, .split-alt .sa-n .wd.w-u { transform: rotate(180deg); }
#askName .wd.w-v, #askSub .wd.w-v, .split-alt .sa-n .wd.w-v { transform: scaleY(-1); }
#askName.ch-dance .lt[data-dn] , #askSub.ch-dance .lt[data-dn], .split-alt .sa-n.ch-dance .lt[data-dn] { animation: lt-dance .9s ease-in-out infinite; animation-delay: calc(var(--di, 0) * -.11s); }
@keyframes lt-dance { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--dy, .2em) * -1); } }
/* tanda 8: temblor y baile a la vez (cada uno en su propiedad: transform y translate), y a tope las letras LOCAS: botan, se dispersan girando y vuelven */
#askName.ch-shaky.ch-dance .lt[data-sh][data-dn], #askSub.ch-shaky.ch-dance .lt[data-sh][data-dn], .split-alt .sa-n.ch-shaky.ch-dance .lt[data-sh][data-dn] { animation: lt-shake var(--dur, .1s) steps(2, end) var(--del, 0s) infinite, lt-dance .9s ease-in-out calc(var(--di, 0) * -.11s) infinite; }
#askName.ch-crazy .lt[data-cz], #askSub.ch-crazy .lt[data-cz], .split-alt .sa-n.ch-crazy .lt[data-cz] { animation: lt-shake var(--dur, .1s) steps(2, end) var(--del, 0s) infinite, lt-crazy 2.6s cubic-bezier(.5, 0, .3, 1) calc(var(--di, 0) * .015s) infinite; }
@keyframes lt-crazy { 0%, 8%, 16%, 24%, 32%, 40%, 48%, 56% { translate: 0 0; rotate: 0deg; } 4%, 12%, 20%, 28%, 36%, 44%, 52% { translate: 0 calc(var(--dy, .3em) * -1); } 66%, 74% { translate: var(--sx, 0) var(--sy, 0); rotate: var(--sr, 0deg); } 86%, 100% { translate: 0 0; rotate: 0deg; } }
html.reduce-motion #askName.ch-shaky.ch-dance .lt[data-sh][data-dn], html.reduce-motion #askSub.ch-shaky.ch-dance .lt[data-sh][data-dn], html.reduce-motion .split-alt .sa-n.ch-shaky.ch-dance .lt[data-sh][data-dn] { animation-duration: var(--dur, .1s), .9s !important; animation-delay: var(--del, 0s), calc(var(--di, 0) * -.11s) !important; animation-iteration-count: infinite !important; }
html.reduce-motion #askName.ch-crazy .lt[data-cz], html.reduce-motion #askSub.ch-crazy .lt[data-cz], html.reduce-motion .split-alt .sa-n.ch-crazy .lt[data-cz] { animation-duration: var(--dur, .1s), 2.6s !important; animation-delay: var(--del, 0s), calc(var(--di, 0) * .015s) !important; animation-iteration-count: infinite !important; }
/* tanda 8: la sacudida del terremoto hace temblar la pantalla entera */
#app.ch-quaking { animation: ch-quake .65s linear; }
@keyframes ch-quake { 10% { transform: translate(-7px, 4px); } 22% { transform: translate(6px, -5px); } 34% { transform: translate(-5px, -3px); } 46% { transform: translate(4px, 4px); } 60% { transform: translate(-3px, 2px); } 75% { transform: translate(2px, -1px); } 100% { transform: none; } }
html.no-shake #app.ch-quaking { animation: none; }
html.vivo-quake { animation: ch-quake .65s linear infinite; }   /* js/chfx.js: el terremoto de la mesa del autor sacude la pantalla entera (como la rabieta del crupier), hasta que la mesa lo apague */
html.no-shake.vivo-quake, html.reduce-motion.vivo-quake { animation: none; }
#askName.ch-scroll , #askSub.ch-scroll, .split-alt .sa-n.ch-scroll { overflow: hidden; white-space: nowrap; }
#askName .ch-marq , #askSub .ch-marq, .split-alt .sa-n .ch-marq { display: inline-block; padding-left: 100%; animation: ch-marq 3.4s linear infinite; }
@keyframes ch-marq { to { transform: translateX(-100%); } }
#askName.fixed , #askSub.fixed, .split-alt .sa-n.fixed { animation: lt-fix .5s cubic-bezier(.2, 1.6, .4, 1); }
.ch-myopia { -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); -webkit-mask: radial-gradient(circle at var(--px, 50%) var(--py, 50%), #000 0, #000 var(--mr, 120px), transparent calc(var(--mr, 120px) + 50px)); mask: radial-gradient(circle at var(--px, 50%) var(--py, 50%), #000 0, #000 var(--mr, 120px), transparent calc(var(--mr, 120px) + 50px)); }
.ch-spot { background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(2, 6, 4, .98) 0, rgba(2, 6, 4, .98) var(--sr, 80px), rgba(2, 6, 4, 0) calc(var(--sr, 80px) + 28px)); }
.ch-flash { background: #fff; transition: none !important; opacity: 0; }
#app.ch-negative #map, #app.ch-negative #fx { filter: invert(1) hue-rotate(180deg) saturate(1.25); }

/* ---------------------------------------------------------------- Campamento: sobornar retos y barajar */
.ch-buy { display: inline-flex; align-items: center; gap: 4px; padding: 0; background: none; border-radius: 999px; cursor: pointer; transition: transform .14s var(--spring); }
.ch-buy:hover { transform: translateY(-2px) scale(1.04); } .ch-buy:active { transform: scale(.97); }
.ch-buy .cb-p { display: inline-flex; align-items: center; gap: 3px; margin-left: -6px; padding: 3px 9px 3px 10px; border-radius: 0 999px 999px 0; background: #f8b449; color: #16241c; font-family: var(--mono); font-weight: 800; font-size: 15.5px; box-shadow: 0 3px 0 rgba(0, 0, 0, .35); } .ch-buy .cb-p .ic { width: 16px; height: 16px; }
.ch-chip.done { opacity: .5; text-decoration: line-through; box-shadow: inset 0 0 0 2px #6d5d92; }
.ch-reroll { margin-left: 6px; }

#askSub.ch-nocountry, .split-alt .sa-n.ch-nocountry { letter-spacing: .12em; opacity: .55; font-style: normal; }

/* ---------------------------------------------------------------- Campamento: proxima ronda / jefe (v0.18) */
.nx-card { display: grid; gap: 5px; padding: 6px 10px 7px; border-radius: 10px; background: rgba(10, 26, 18, .82); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14); }
.nx-card.boss { background: linear-gradient(180deg, rgba(86, 24, 40, .9), rgba(20, 8, 10, .9)); box-shadow: inset 0 0 0 3px #fe5f55, 0 0 26px rgba(254, 95, 85, .32); }
.nx-card.far { opacity: .75; padding: 4px 10px; }
.nx-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .nx-head .ic { width: 20px; height: 20px; }
.nx-t { font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: #ffd98a; }
.nx-name { font-family: var(--serif); font-size: 18px; font-weight: 800; line-height: 1; color: #fff; } .nx-card.boss .nx-t { color: #ff9d94; }
.nx-n { margin-left: auto; font-family: var(--mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: #16241c; box-shadow: inset 0 0 0 2px #ffd98a; color: #ffd98a; } .nx-card.boss .nx-n { box-shadow: inset 0 0 0 2px #fe5f55; color: #ff9d94; }
.nx-head .ch-reroll { margin-left: 0; }
.nx-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 5px; }
.nx-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 8px; background: rgba(255, 255, 255, .06); }
.nx-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: #17553a; box-shadow: inset 0 0 0 2px #16241c; } .nx-ic .ic { width: 22px; height: 22px; }
.nx-row.k-map .nx-ic { background: #27306b; } .nx-row.k-ptr .nx-ic { background: #6b2f4e; } .nx-row.k-rule .nx-ic { background: #6b5a1f; }
.nx-body { display: grid; gap: 1px; min-width: 0; } .nx-body b { font-family: var(--serif); font-size: 15.5px; color: #fff; font-weight: 800; } .nx-body p { margin: 0; font-size: 13px; line-height: 1.15; opacity: .85; }
.nx-body em { font-style: normal; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; } .nx-have { color: #5fd6b8; } .nx-hint { color: #ffd98a; } .nx-none { opacity: .6; }
.nx-row .ch-buy { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 7px; border: 0; cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #16241c; background: #ffd98a; box-shadow: 0 3px 0 rgba(0, 0, 0, .4); } .nx-row .ch-buy:hover { background: #fff0b8; transform: translateY(-1px); }
.nx-row .cb-p { display: inline-flex; align-items: center; gap: 3px; } .nx-row .cb-p .ic { width: 16px; height: 16px; }
.nx-row.done { opacity: .5; grid-template-columns: 40px 1fr; }
.nx-clean { margin: 0; font-family: var(--mono); font-size: 15.5px; opacity: .7; } .nx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 700px) { .nx-list { grid-template-columns: 1fr; } .nx-row { grid-template-columns: 34px 1fr; } .nx-row .ch-buy { grid-column: 1 / -1; justify-self: end; } .nx-name { font-size: 20px; } }

/* ---- Campamento compacto: cada truco es una ficha (nombre + Sobornar arriba; descripcion y reliquia que ayuda a todo el ancho).
   Antes Sobornar ocupaba una columna propia y el texto quedaba en columnas de ~80px: con 4-5 trucos todo bajaba y habia que desplazarse. */
.nx-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 172px), 1fr)); gap: 6px; }
.nx-row { min-width: 0; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 7px; row-gap: 3px; align-items: start; padding: 5px 7px 6px; }
.nx-body { display: contents; }
.nx-row > .nx-ic { grid-column: 1; grid-row: 1; width: 28px; height: 28px; } .nx-row > .nx-ic .ic { width: 20px; height: 20px; }
.nx-body > b { grid-column: 2; grid-row: 1; align-self: center; line-height: 1.05; }
.nx-body > p { grid-column: 1 / -1; grid-row: 2; line-height: 1.12; }
.nx-foot, .nx-row.done .nx-body > em { grid-column: 1 / -1; grid-row: 3; align-self: end; }
.nx-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 3px 8px; min-width: 0; }
.nx-foot > em { flex: 1 1 110px; min-width: 0; letter-spacing: .01em; line-height: 1.1; }
.nx-row .nx-foot .ch-buy { flex: none; margin-left: auto; padding: 3px 7px; letter-spacing: .03em; white-space: nowrap; }
.nx-row.done { grid-template-rows: auto auto; } .nx-row.done .nx-body > em { grid-row: 2; }
@media (max-width: 700px) { .nx-row { grid-template-columns: 28px minmax(0, 1fr); } }

/* Vendaval: flecha pegada al puntero, en la direccion en que el viento lo empuja */
.ptr-wind { position: absolute; left: 0; top: 0; width: 92px; height: 22px; margin: -11px 0 0 10px; transform-origin: -10px 50%; opacity: 0; pointer-events: none; transition: opacity .25s; }
.ptr-wind.on { opacity: .95; } .ptr-wind svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 0 rgba(22, 36, 28, .8)); }
.ptr-wind path { fill: none; stroke: #bfe9ff; stroke-width: 3; stroke-linecap: square; } .ptr-wind .w1 { stroke-dasharray: 6 5; animation: wind-dash .6s linear infinite; } @keyframes wind-dash { to { stroke-dashoffset: -22; } }

/* ================================================================ v0.33: retos PREMIUM (motor en js/chfx.js) */
/* lienzos del motor: el fundido lo lleva el propio motor */
#chOv > .chx-gl, #chOv > .chx-2d { transition: none; }
/* lluvia: el cristal mojado emborrona de verdad y cada gota hace de lente */
.chx-wet { -webkit-backdrop-filter: blur(var(--wb, 1px)) saturate(.82) brightness(.92); backdrop-filter: blur(var(--wb, 1px)) saturate(.82) brightness(.92); background: radial-gradient(ellipse at 50% 40%, rgba(40, 70, 110, .06), rgba(8, 20, 42, .32) 100%), linear-gradient(180deg, rgba(40, 70, 110, .12), rgba(14, 34, 64, .22)); }
.chx-drops > i { position: absolute; left: 0; top: 0; border-radius: 50% 50% 47% 53% / 58% 58% 42% 42%; will-change: transform;
  -webkit-backdrop-filter: blur(2.4px) brightness(1.14) saturate(1.15); backdrop-filter: blur(2.4px) brightness(1.14) saturate(1.15);
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .78) 0 7%, rgba(255, 255, 255, 0) 21%), radial-gradient(circle at 62% 80%, rgba(255, 255, 255, .2) 0 9%, rgba(255, 255, 255, 0) 22%), radial-gradient(circle at 50% 50%, rgba(160, 200, 240, 0) 55%, rgba(10, 30, 60, .3) 100%);
  box-shadow: inset -1.5px -2.5px 3px rgba(0, 20, 40, .35), inset 1.5px 1.5px 2px rgba(255, 255, 255, .35), 0 1.5px 1.5px rgba(0, 10, 20, .3); }
/* cristal roto: el nucleo del golpe queda lechoso y emborronado */
.chx-shards > i { position: absolute; -webkit-backdrop-filter: blur(var(--sb, 9px)) brightness(1.2) saturate(.45) contrast(.85); backdrop-filter: blur(var(--sb, 9px)) brightness(1.2) saturate(.45) contrast(.85); background: radial-gradient(circle, rgba(235, 245, 255, .3), rgba(235, 245, 255, .06) 70%); animation: chx-shard-in .18s ease-out both; }
@keyframes chx-shard-in { from { opacity: 0; transform: scale(.4); } }
#app.chx-punch { animation: chx-punch .24s cubic-bezier(.3, .7, .4, 1); }
@keyframes chx-punch { 15% { transform: translate(-9px, 6px) rotate(-.3deg); } 35% { transform: translate(7px, -5px) rotate(.25deg); } 60% { transform: translate(-4px, 3px); } 80% { transform: translate(2px, -1px); } 100% { transform: none; } }
/* pantalla sucia: bajo cada huella el mapa se emborrona (la huella se dibuja encima, en el lienzo 2D) */
.chx-prints > i { position: absolute; border-radius: 50%; -webkit-backdrop-filter: blur(var(--pb, 4px)) brightness(1.07) saturate(.85); backdrop-filter: blur(var(--pb, 4px)) brightness(1.07) saturate(.85); -webkit-mask: radial-gradient(closest-side, #000 55%, rgba(0, 0, 0, .6) 78%, transparent 100%); mask: radial-gradient(closest-side, #000 55%, rgba(0, 0, 0, .6) 78%, transparent 100%); }
/* No responde: ventana de sistema retro (fuera del estilo del juego a proposito: es TU ordenador) */
#chOv > .chx-wins { opacity: 1; }
.chx-win { position: absolute; pointer-events: auto; cursor: default; padding: 3px; user-select: none; -webkit-user-select: none; font: 13px/1.35 "Segoe UI", Tahoma, system-ui, -apple-system, Roboto, sans-serif; color: #111; background: #d4d0c8; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #404040, inset 2px 2px 0 #eaeaea, inset -2px -2px 0 #808080, 0 18px 40px rgba(0, 0, 0, .55); animation: cw-in .12s ease-out; }
.chx-win.bye { opacity: 0; transform: scale(.97); transition: opacity .12s, transform .12s; pointer-events: none; }
@keyframes cw-in { from { opacity: 0; transform: translateY(8px); } }
.cw-bar { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 3px 0 5px; color: #fff; background: linear-gradient(90deg, #2a0f5c, #7b3fc4 62%, #b980ff); cursor: move; touch-action: none; }
.cw-bar b { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; font-weight: 700; }
.cw-app { flex: none; width: 16px; height: 16px; background: url(../assets/icons/logo_mark_s.png) center / contain no-repeat; image-rendering: pixelated; }
.cw-x, .cw-b { color: #111; background: #d4d0c8; border: 0; border-radius: 0; cursor: pointer; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #404040, inset 2px 2px 0 #eaeaea, inset -2px -2px 0 #808080; }
.cw-x { flex: none; width: 20px; height: 18px; display: grid; place-items: center; padding: 0; font: 700 10px/1 system-ui, sans-serif; }
.cw-x:active, .cw-b:active { box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #fff, inset 2px 2px 0 #808080; }
.cw-body { display: flex; align-items: flex-start; gap: 14px; padding: 16px 14px 10px; }
.cw-sign { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font: 900 22px/1 system-ui, sans-serif; font-style: normal; color: #fff; background: radial-gradient(circle at 35% 30%, #ff8a7a, #d81e1e 60%, #8c0c0c); box-shadow: 0 2px 0 rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .35); }
.cw-body p { margin: 2px 0 0; font-size: 13px; }
.cw-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 4px 10px 10px; }
.cw-b { min-width: 76px; height: 24px; padding: 0 10px; font: 12.5px "Segoe UI", Tahoma, system-ui, sans-serif; }
.cw-b.cw-def { outline: 1px solid #111; outline-offset: -1px; } .cw-b:focus-visible { outline: 1px dotted #111; outline-offset: -4px; }
.cw-prog { display: none; height: 14px; margin: 0 10px 10px; padding: 2px; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff; }
.cw-prog > i { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, #2a0f5c 0 8px, transparent 8px 10px); }
.chx-win.waiting { cursor: progress; } .chx-win.waiting .cw-prog { display: block; } .chx-win.waiting .cw-prog > i { animation: cw-prog .9s steps(12, end) forwards; }
@keyframes cw-prog { to { width: 100%; } }
/* Bateria baja: TODA la pantalla se va apagando; el indicador del sistema queda por encima */
#chxDim { position: fixed; inset: 0; z-index: 99000; pointer-events: none; background: #000; opacity: 0; }
#chxBat { position: fixed; right: 18px; bottom: 18px; z-index: 99001; display: none; align-items: center; gap: 8px; pointer-events: none; font: 700 14px/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: #fff; }
#chxBat.on { display: flex; }
.cb-cell { position: relative; width: 44px; height: 20px; padding: 2px; border: 2px solid #fff; border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.cb-cell::after { content: ""; position: absolute; right: -6px; top: 5px; width: 3px; height: 7px; border-radius: 0 2px 2px 0; background: #fff; }
.cb-lvl { display: block; width: 80%; height: 100%; border-radius: 2px; background: #ffb020; transition: width .4s, background .3s; }
.cb-pct { min-width: 34px; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
#chxBat.crit .cb-lvl { background: #ff3b30; } #chxBat.crit .cb-cell { animation: cb-blink .8s steps(2, end) infinite; }
#chxBat.charge .cb-lvl { width: 100% !important; background: #34c759; transition: width .5s ease-out, background .2s; } #chxBat.charge .cb-pct { opacity: 0; }
.cb-toast { position: absolute; right: 0; bottom: 34px; display: grid; gap: 2px; width: max-content; max-width: 260px; padding: 10px 14px; border-radius: 12px; background: rgba(28, 28, 30, .92); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.cb-toast b { font-size: 14px; } .cb-toast span { font-size: 12.5px; font-weight: 500; opacity: .8; }
#chxBat.toast .cb-toast { opacity: 1; transform: none; }
@keyframes cb-blink { 50% { opacity: .35; } }
/* tanda 7: bateria como un movil: modo ahorro en amarillo y el apagon con la pila vacia */
#chxBat.save .cb-lvl { background: #ffd60a; }
#chxDead { position: fixed; inset: 0; z-index: 99002; display: grid; place-content: center; justify-items: center; gap: 18px; background: #000; opacity: 0; pointer-events: none; transition: opacity .07s; font: 600 15px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; color: rgba(255, 255, 255, .72); }
#chxDead.on { opacity: 1; }
#chxDead .cd-bat { position: relative; width: 120px; height: 56px; border: 5px solid #ff3b30; border-radius: 12px; animation: cb-blink .5s steps(2, end) infinite; }
#chxDead .cd-bat::after { content: ""; position: absolute; right: -14px; top: 15px; width: 8px; height: 16px; border-radius: 0 4px 4px 0; background: #ff3b30; }
#chxDead .cd-bat i { position: absolute; left: 5px; top: 5px; bottom: 5px; width: 9px; border-radius: 3px; background: #ff3b30; }
@media (max-width: 720px) { #chxBat { bottom: auto; top: 12px; right: 12px; } .cb-toast { bottom: auto; top: 30px; } }

/* vision: miopia en dos capas (el enfoque cae de verdad), mapa borroso con halo suave y ventana nitida pegada al bisel de la lupa */
.ch-blur { -webkit-backdrop-filter: blur(var(--bl, 6px)) saturate(1.1) brightness(1.03); backdrop-filter: blur(var(--bl, 6px)) saturate(1.1) brightness(1.03);
  -webkit-mask: radial-gradient(circle at var(--px, 50%) var(--py, 50%), transparent 0, transparent calc(var(--lr, -60px) + 2px), #000 calc(var(--lr, -60px) + 9px)); mask: radial-gradient(circle at var(--px, 50%) var(--py, 50%), transparent 0, transparent calc(var(--lr, -60px) + 2px), #000 calc(var(--lr, -60px) + 9px)); }
.ch-myopia { -webkit-backdrop-filter: blur(11px) brightness(1.05) saturate(.85); backdrop-filter: blur(11px) brightness(1.05) saturate(.85);
  -webkit-mask: radial-gradient(circle at var(--px, 50%) var(--py, 50%), #000 0, #000 calc(var(--mr, 120px) * .6), transparent calc(var(--mr, 120px) + 24px)); mask: radial-gradient(circle at var(--px, 50%) var(--py, 50%), #000 0, #000 calc(var(--mr, 120px) * .6), transparent calc(var(--mr, 120px) + 24px)); }
.ch-myopia2 { -webkit-backdrop-filter: blur(3.5px); backdrop-filter: blur(3.5px);
  -webkit-mask: radial-gradient(circle at var(--px, 50%) var(--py, 50%), #000 0, #000 var(--mr, 120px), transparent calc(var(--mr, 120px) + 70px)); mask: radial-gradient(circle at var(--px, 50%) var(--py, 50%), #000 0, #000 var(--mr, 120px), transparent calc(var(--mr, 120px) + 70px)); }
/* negativo de verdad: los colores se invierten (antes el giro de tono los devolvia y solo se invertia el brillo) */
#app.ch-negative #map, #app.ch-negative #fx { filter: invert(1) contrast(1.06) saturate(1.12); }

/* texto: tinta borrada con goma (no bloques), tinta desvaida, runas con reflejo, vocales que caen, memoria que se evapora */
#askName .lt.gap, #askSub .lt.gap, .split-alt .sa-n .lt.gap { position: relative; display: inline-block; width: auto; min-width: .4em; height: auto; margin: 0; vertical-align: baseline; border-radius: 0; box-shadow: none; background: none; color: transparent; -webkit-text-fill-color: transparent; }
#askName .lt.gap::after, #askSub .lt.gap::after, .split-alt .sa-n .lt.gap::after { display: block; content: ""; position: absolute; left: -.07em; right: -.07em; top: .16em; bottom: .1em; height: auto; width: auto; border-radius: 42% 55% 45% 50% / 55% 45% 60% 40%; box-shadow: none; opacity: .95; filter: blur(.5px);
  background: repeating-linear-gradient(170deg, rgba(92, 78, 60, 0) 0 .06em, rgba(92, 78, 60, .2) .06em .095em), radial-gradient(ellipse at 50% 56%, rgba(118, 102, 80, .46), rgba(118, 102, 80, .15) 62%, transparent 74%); }
#askName .lt.gap.sv1::after, #askSub .lt.gap.sv1::after, .split-alt .sa-n .lt.gap.sv1::after { transform: rotate(-8deg) scaleX(1.1); border-radius: 55% 45% 50% 45% / 45% 60% 40% 55%; }
#askName .lt.gap.sv2::after, #askSub .lt.gap.sv2::after, .split-alt .sa-n .lt.gap.sv2::after { transform: rotate(6deg) scaleY(.9); }
#askName .lt.faint, #askSub .lt.faint, .split-alt .sa-n .lt.faint { opacity: .62; filter: blur(.35px); color: #8a7d68;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  2.6 0 0 0 -.62'/></filter><rect width='48' height='48' filter='url(%23n)'/></svg>") 0 0 / 22px 22px;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  2.6 0 0 0 -.62'/></filter><rect width='48' height='48' filter='url(%23n)'/></svg>") 0 0 / 22px 22px; }
#askName .lt.dot, #askSub .lt.dot, .split-alt .sa-n .lt.dot { color: rgba(29, 36, 28, .42); }
#askName .lt.rune, #askSub .lt.rune, .split-alt .sa-n .lt.rune { color: inherit; text-shadow: none; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, currentColor 0 40%, #9b6cff 47%, #ffd98a 51%, currentColor 58% 100%); background-size: 330% 100%; background-position: 100% 0; animation: rune-sheen 3.8s ease-in-out infinite; }
#askName .lt.rune:nth-child(3n+1), #askSub .lt.rune:nth-child(3n+1), .split-alt .sa-n .lt.rune:nth-child(3n+1) { animation-delay: .45s; } #askName .lt.rune:nth-child(3n+2), #askSub .lt.rune:nth-child(3n+2), .split-alt .sa-n .lt.rune:nth-child(3n+2) { animation-delay: .9s; }
@keyframes rune-sheen { 0%, 55% { background-position: 100% 0; } 100% { background-position: 0 0; } }
#askName .lt.fix, #askSub .lt.fix, .split-alt .sa-n .lt.fix { animation: lt-ink .75s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes lt-ink { 0% { opacity: 0; filter: blur(5px); transform: scale(1.35); color: #f8b449; text-shadow: 0 0 12px rgba(248, 180, 73, .9); } 55% { opacity: 1; filter: blur(0); color: #f8b449; } 100% { transform: none; text-shadow: none; } }
#askName.ch-fade, #askSub.ch-fade, .split-alt .sa-n.ch-fade { opacity: 0; filter: blur(3px); transition: opacity .8s ease .75s, filter .8s ease .75s; }
#askName.ch-fade .lt, #askSub.ch-fade .lt, .split-alt .sa-n.ch-fade .lt { animation: lt-evap 1.1s cubic-bezier(.5, 0, .75, 0) var(--fd, 0s) forwards; }
@keyframes lt-evap { 60% { opacity: .5; filter: blur(1.5px); } 100% { opacity: 0; filter: blur(5px); transform: translateY(-.35em) scale(1.15); } }
/* marquesina: letrero LED de casino (los puntos quedan quietos y el texto pasa por debajo) */
#askName.ch-scroll, #askSub.ch-scroll, .split-alt .sa-n.ch-scroll { position: relative; overflow: hidden; white-space: nowrap; padding: .06em 0; border-radius: 6px; background: #140d07; box-shadow: inset 0 0 0 2px #3a2a14, inset 0 0 22px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 190, 90, .25); }
#askName.ch-scroll::after, #askSub.ch-scroll::after, .split-alt .sa-n.ch-scroll::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, transparent 48%, #140d07 64%) 0 0 / 3px 3px; }
#askName .ch-marq, #askSub .ch-marq, .split-alt .sa-n .ch-marq { color: #ffb347; -webkit-text-fill-color: #ffb347; text-shadow: 0 0 .16em rgba(255, 170, 60, .95), 0 0 .5em rgba(255, 120, 20, .5); }
/* adivinanza: tarjeta de pista legible; sin pais: tachon de rotulador negro */
/* Adivinanza: la pista va siempre a UN tamano legible (18 px con la ventana a 1280 de ancho, 24 px desde 1850; por el Tamano del texto de Accesibilidad)
   y no se encoge: si es larga, crece la placa a lo ancho (js/challenges.js, fitRiddle). html body delante: gana a las reglas del nombre de la placa */
html body #askName.ch-riddle { font-size: calc(clamp(18px, calc(1.3 * var(--vw)), 24px) * var(--ask-scale, 1)); }
#askName.ch-riddle, #askSub.ch-riddle, .split-alt .sa-n.ch-riddle { line-height: 1.22; text-align: left; letter-spacing: .005em; font-weight: 600; white-space: normal; padding: .3em .55em .35em .7em; border-left: 3px solid #f8b449; border-radius: 0 6px 6px 0; background: linear-gradient(90deg, rgba(248, 180, 73, .16), rgba(248, 180, 73, 0)); }
#askSub.ch-nocountry, .split-alt .sa-n.ch-nocountry { opacity: 1; letter-spacing: 0; }
.ch-redact { display: inline-block; padding: 0 .25em; border-radius: 2px; color: transparent; -webkit-text-fill-color: transparent; background: #1c211d; transform: rotate(-.8deg); box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .06), 0 1px 0 rgba(0, 0, 0, .2); }

/* fichas: color de la cuarta pared y estado "contrarrestado por un perk" */
.ch-chip.k-wall { --cc: #ff6bb5; } .adv-debuff.k-wall { box-shadow: inset 4px 0 0 #ff6bb5; } .nx-row.k-wall .nx-ic { background: #6b1f4f; }
.ch-chip.ctr { box-shadow: inset 0 0 0 2px #5fd6b8, 0 0 12px rgba(95, 214, 184, .45), 0 3px 0 rgba(0, 0, 0, .35); }
.ch-chip .ch-ctr { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 1px; border-radius: 50%; background: #0f3b2e; box-shadow: inset 0 0 0 1.5px #5fd6b8; } .ch-chip .ch-ctr .ic { width: 15px; height: 15px; }
.ch-chip.ctr-pop { animation: ctr-pop .75s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes ctr-pop { 30% { transform: scale(1.12); box-shadow: inset 0 0 0 2px #9ff3dc, 0 0 26px rgba(95, 214, 184, .9), 0 3px 0 rgba(0, 0, 0, .35); } 100% { transform: none; } }

/* banderas: neon del casino que va cambiando de color y penumbra que respira */
.ask-flag.fx-flaghue { animation: flag-neon 3.4s ease-in-out infinite alternate; }
@keyframes flag-neon { 0% { filter: hue-rotate(var(--fh0, 60deg)) saturate(1.6) brightness(1.08) drop-shadow(0 0 5px rgba(255, 70, 220, .85)); } 100% { filter: hue-rotate(var(--fh1, 180deg)) saturate(1.6) brightness(1.08) drop-shadow(0 0 7px rgba(60, 240, 255, .9)); } }
.ask-flag.fx-flagdark { animation: flag-dim 2.6s ease-in-out infinite; }
@keyframes flag-dim { 0%, 100% { filter: brightness(var(--fb, .35)) saturate(.7) contrast(1.1); } 50% { filter: brightness(calc(var(--fb, .35) * 1.12)) saturate(.7) contrast(1.1); } }

/* puntero: neon moribundo (Cursor parpadeante) */
.ptr-cv.neon { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .45)) drop-shadow(0 0 5px rgba(255, 80, 200, .95)) drop-shadow(0 0 14px rgba(255, 80, 200, .5)); }
html.reduce-motion .ch-chip.ctr-pop, html.reduce-motion #app.chx-punch { animation: none; }
/* etiqueta "Ayuda contra X": si no cabe en la carta, A.squeeze (uikit.js) quita "Ayuda contra" y deja icono + nombre del reto; nunca "..." */
.sq-short .sq-pre { display: none; }
/* "vender N" de las reliquias del Campamento: encima de la reliquia (debajo se salia de la pantalla y quedaba cortado) */
/* fichas de "Despues" (Ojo en el cielo): un nombre largo parte linea en vez de salirse de la pantalla */
.nx-chips .ch-chip { max-width: 100%; min-width: 0; } .nx-chips .ch-chip > b { white-space: normal; overflow-wrap: anywhere; min-width: 0; }

/* v0.35 economia: botin en vivo en el marcador (al superar el objetivo: lo que cobrarias ya y el siguiente escalon) */
.lg-loot { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-family: var(--mono); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.lg-loot.hidden { display: none; }
.lg-loot b { display: inline-flex; align-items: center; gap: 3px; color: var(--ink); font-weight: 700; } .lg-loot b .ic { width: 16px; height: 16px; }
.lg-loot i { margin-left: auto; font-style: normal; }
@media (max-width: 900px) { .ledger .lg-loot { display: none; } }
@media (max-height: 520px) and (orientation: landscape) { .ledger .lg-loot { display: none; } }
/* revancha: la carta que frena los trucos de la ronda que repites, a mitad de precio (precio de antes tachado) */
.offer .buy .of-was { margin: 0 5px 0 1px; opacity: .6; font-size: .86em; text-decoration-thickness: 2px; }
/* cofre del jefe: dejarlo sin abrir tambien paga */
.go-next .gn-coins { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font-style: normal; font-family: var(--mono); font-size: .82em; letter-spacing: .04em; color: #ffe7a8; } .go-next .gn-coins .ic { width: 15px; height: 15px; }
/* reducir movimiento (Movimiento: Minimo; html.reduce-motion en boot.css) deja las animaciones en .01ms
   y una sola vuelta. Los trucos que SON movimiento (letras que tiemblan o bailan, marquesina) siguen a su ritmo y en bucle, porque son el reto (sin esto,
   la marquesina dejaba el nombre fuera de la caja y las letras quietas). Los brillos de adorno (runas, neon y penumbra de la bandera, bateria en rojo)
   se quedan quietos: el truco sigue puesto (el filtro de la bandera va en linea) pero sin parpadeos */
html.reduce-motion #askName.ch-shaky .lt[data-sh], html.reduce-motion #askSub.ch-shaky .lt[data-sh], html.reduce-motion .split-alt .sa-n.ch-shaky .lt[data-sh] { animation-duration: var(--dur, .1s) !important; animation-delay: var(--del, 0s) !important; animation-iteration-count: infinite !important; }
html.reduce-motion #askName.ch-dance .lt[data-dn], html.reduce-motion #askSub.ch-dance .lt[data-dn], html.reduce-motion .split-alt .sa-n.ch-dance .lt[data-dn] { animation-duration: .9s !important; animation-delay: calc(var(--di, 0) * -.11s) !important; animation-iteration-count: infinite !important; }
html.reduce-motion #askName .ch-marq, html.reduce-motion #askSub .ch-marq, html.reduce-motion .split-alt .sa-n .ch-marq { animation-duration: 3.4s !important; animation-iteration-count: infinite !important; }
html.reduce-motion #askName .lt.rune, html.reduce-motion #askSub .lt.rune, html.reduce-motion .ask-flag.fx-flaghue, html.reduce-motion .ask-flag.fx-flagdark, html.reduce-motion #chxBat.crit .cb-cell, html.reduce-motion .split-alt .sa-n .lt.rune { animation: none !important; }
/* Destellos suaves (v0.52, Ajustes > Imagen; tambien con "reducir movimiento"): sin WebGL, el Rayo y el corte de luz de las capas CSS son un fundido
   (con WebGL lo hace js/chfx.js), y el chispazo de "ch-glitch" al empezar una pregunta con reto de mapa se queda en el meneo, sin fogonazos de color */
#chOv .ch-flash.soft { transition: opacity .5s ease-in !important; } #chOv .ch-flash.soft.up { transition: opacity .17s ease-out !important; }
#chOv .ch-flick.soft { transition: opacity .2s ease !important; }
html.soft-flash #app.ch-glitch #map, html.soft-flash #app.ch-glitch #fx { animation-name: ch-glitch-soft; animation-timing-function: ease-in-out; }
html.soft-flash.no-shake #app.ch-glitch #map, html.soft-flash.no-shake #app.ch-glitch #fx { animation: none; }
@keyframes ch-glitch-soft { 0%, 100% { transform: none; } 25% { transform: translate(-4px, 1px) skewX(1deg); } 60% { transform: translate(3px, -2px); } }
/* la Torre de Babel no pudo con este nombre: su ficha ensena el reto que sale en su lugar (se da la vuelta como una carta, en pasos de pixel) */
.ch-chip.ch-sub { animation: ch-sub-in .42s steps(4, end) both; box-shadow: inset 0 0 0 2px var(--cc), 0 3px 0 rgba(0, 0, 0, .35); }
@keyframes ch-sub-in { 0% { transform: scaleY(.15); } 50% { transform: scaleY(1.12); } 100% { transform: none; } }
html.reduce-motion .ch-chip.ch-sub { animation: none; }

/* ====================================================================== tanda 14: retos nuevos de bandera y de placa */
/* envoltorio de la bandera (los trozos, las tiras y el giro cuelgan de el) */
.fl-wrap { position: relative; display: inline-block; line-height: 0; }
.fl-stage { display: inline-block; transform-origin: 50% 50%; }
.fl-stage .ask-flag { display: block; }

/* Bandera de espaldas: el sello del giro, siempre a la vista (espejo, boca abajo o 90 grados) */
.fb-seal { position: absolute; right: -17px; bottom: -17px; z-index: 4; width: 38px; height: 38px; display: grid; place-items: center; line-height: 1; border-radius: 50%; color: #2a1860; background: #f6e8c4; transform: rotate(-12deg); box-shadow: 0 0 0 2px #2a1860, inset 0 0 0 3px #f6e8c4, inset 0 0 0 4px #7d4fe0, 0 3px 0 rgba(0, 0, 0, .35); animation: fb-pop .42s steps(5, end) both; }
.fb-seal svg { display: block; } .fb-seal b { font: 700 11px/1 var(--mono); letter-spacing: -.02em; }
@keyframes fb-pop { 0% { transform: rotate(-32deg) scale(2.4); opacity: 0; } 55% { opacity: 1; } 100% { transform: rotate(-12deg) scale(1); } }
.sa-flag { transition: transform .2s; }

/* Bandera a trozos */
.fz-board { position: relative; display: block; box-sizing: content-box; border: 2px solid var(--ink); border-radius: 4px; box-shadow: 0 3px 0 var(--ink); background: #1b1030; }
.fz-p { position: absolute; left: 0; top: 0; background-repeat: no-repeat; transition: transform .34s cubic-bezier(.3, 1.45, .5, 1); box-shadow: inset 0 0 0 1px rgba(20, 8, 40, .6); will-change: transform; }
.fz-p.gr { filter: grayscale(1) brightness(.78) contrast(.92); }
.fz-board.deal .fz-p { animation: fz-in .38s steps(6, end) var(--d, 0ms) both; }
@keyframes fz-in { from { opacity: 0; scale: .35; } to { opacity: 1; scale: 1; } }
.fz-board.gold .fz-p { box-shadow: inset 0 0 0 1px #ffd95a, 0 0 0 1px rgba(255, 217, 90, .3); }
.fz-board.whole .fz-p, .fz-board.end .fz-p { box-shadow: none; }

/* Bandera al viento: 8 tiras con su desfase (transform en pasos enteros, solo compositor) y pliegues que oscurecen */
.fw-wrap::before { content: ""; position: absolute; left: -10px; top: -9px; bottom: -12px; width: 5px; border-radius: 2px; background: linear-gradient(90deg, #f2c46a, #c98f4a 60%, #8a5a3a); box-shadow: 0 0 0 1.5px var(--ink); }
.fw-wrap::after { content: ""; position: absolute; left: -12px; top: -17px; width: 9px; height: 9px; border-radius: 50%; background: #ffd95a; box-shadow: 0 0 0 1.5px var(--ink), inset -2px -2px 0 #e0a21f; }
.fw-board { position: relative; display: block; }
.fw-s { position: absolute; top: 0; will-change: transform; animation: fw-wave var(--T, 1.8s) steps(var(--sn, 3)) calc(var(--i) * var(--ph, .25s) * -1) infinite; }
.fw-s b { position: absolute; inset: 0; background-repeat: no-repeat; transform-origin: 0 50%; }
.fw-s b { box-shadow: inset 0 2px 0 #1d0a3d, inset 0 -2px 0 #1d0a3d; } .fw-s:nth-child(1) b { box-shadow: inset 0 2px 0 #1d0a3d, inset 0 -2px 0 #1d0a3d, inset 2px 0 0 #1d0a3d; } .fw-s:nth-child(8) b { box-shadow: inset 0 2px 0 #1d0a3d, inset 0 -2px 0 #1d0a3d, inset -2px 0 0 #1d0a3d; }
.fw-s::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(25, 8, 50, var(--sh, .2)), rgba(25, 8, 50, 0) 90%); animation: fw-shade var(--T, 1.8s) steps(4) calc(var(--i) * var(--ph, .25s) * -1) infinite; }
@keyframes fw-wave { 0% { transform: translateY(0); } 25% { transform: translateY(calc(var(--a) * -1)); } 50% { transform: translateY(0); } 75% { transform: translateY(var(--a)); } 100% { transform: translateY(0); } }
@keyframes fw-shade { 0%, 50%, 100% { opacity: .2; } 25% { opacity: 0; } 75% { opacity: 1; } }
.fw-board.gust .fw-s:nth-child(n+5) b { animation: fw-furl 1.3s steps(7) calc((var(--i) - 4) * .07s) both; }
@keyframes fw-furl { 0% { transform: scaleX(1); } 28%, 72% { transform: scaleX(.04); } 100% { transform: scaleX(1); } }
.fw-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.fw-ln { position: absolute; left: -90px; top: var(--y, 30%); width: var(--w, 90px); height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75)); animation: fw-streak var(--t, 1.6s) steps(16) infinite; }
@keyframes fw-streak { from { transform: translateX(0); } to { transform: translateX(380px); } }
.fw-board.still .fw-s, .fw-board.still .fw-s::after, .fw-board.still .fw-s b, .fw-board.still .fw-ln { animation: none !important; }
html.reduce-motion .fw-s, html.reduce-motion .fw-s::after, html.reduce-motion .fw-s b, html.reduce-motion .fw-ln, html.reduce-motion .fz-p, html.reduce-motion .fb-seal { animation: none !important; transition: none !important; }

/* Pasaporte falso: el pais de debajo se estampa como en un pasaporte; al responder, el FALSO en rojo y el de verdad */
#askSub.ch-pass { margin-top: 9px; }
.ch-pass .fp-stamp, .fp-fake { display: inline-block; font-family: var(--mono); font-style: normal; font-weight: 700; font-size: .86em; letter-spacing: .1em; text-transform: uppercase; color: #2d3fa8; padding: .2em .8em .16em; border: 2px solid currentColor; border-radius: 4px; box-shadow: inset 0 0 0 2px #f7efd8, inset 0 0 0 3px currentColor; transform: rotate(-2.2deg); text-shadow: .5px 0 0 currentColor; }
.ch-pass .fp-stamp { opacity: .94; animation: fp-slam .4s steps(5, end) both; }
@keyframes fp-slam { 0% { transform: rotate(-10deg) scale(2.1); opacity: 0; } 55% { opacity: .95; } 100% { transform: rotate(-2.2deg) scale(1); } }
.fp-fake { position: relative; opacity: .8; font-size: .74em; } .fp-fake s { text-decoration: none; }
.fp-sello { position: absolute; left: -9%; right: -9%; top: 50%; margin-top: -.72em; padding: .08em .2em; text-align: center; font-size: 1.12em; letter-spacing: .16em; color: #d8283f; border: 2.5px solid #d8283f; border-radius: 4px; background: rgba(247, 239, 216, .72); transform: rotate(-7deg); box-shadow: 0 0 0 1.5px rgba(247, 239, 216, .8); animation: fp-slam2 .46s steps(6, end) both; text-shadow: none; }
@keyframes fp-slam2 { 0% { transform: rotate(-24deg) scale(2.6); opacity: 0; } 50% { opacity: 1; } 100% { transform: rotate(-7deg) scale(1); } }
.fp-arr { display: inline-block; width: .5em; height: .5em; margin: 0 .85em 0 .4em; border-top: 2.5px solid var(--ink-2); border-right: 2.5px solid var(--ink-2); transform: rotate(45deg); vertical-align: .08em; }
.fp-real, .fp-ok { font-style: normal; font-weight: 700; color: #16793f; }
html.reduce-motion .ch-pass .fp-stamp, html.reduce-motion .fp-sello { animation: none !important; }

/* Panel de salidas: fichas de aeropuerto (mitad de arriba, mitad de abajo y las dos hojas que caen) */
#askName.ch-board { display: flex; justify-content: center; }
.sf-board { display: inline-flex; align-items: center; gap: calc(var(--sf) * .3); max-width: 100%; padding: calc(var(--sf) * .22) calc(var(--sf) * .34); border-radius: 7px; background: #120c22; box-shadow: inset 0 0 0 2px #3a2b66, inset 0 0 0 4px #0c0718, 0 3px 0 rgba(0, 0, 0, .4); }
.sf-led { flex: none; width: calc(var(--sf) * .22); height: calc(var(--sf) * .22); border-radius: 50%; background: #ffb347; box-shadow: 0 0 0 1.5px #0c0718, 0 0 7px 1px rgba(255, 179, 71, .75); animation: sf-blink .5s steps(2, end) infinite; }
.sf-led.ok { background: #5cf08c; box-shadow: 0 0 0 1.5px #0c0718, 0 0 8px 2px rgba(92, 240, 140, .8); animation: none; }
@keyframes sf-blink { 50% { opacity: .25; } }
.sf-in { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--sf) * .18) calc(var(--sf) * .55); }
.sf-w { display: inline-flex; white-space: nowrap; }
.sf-t { position: relative; display: block; flex: none; width: calc(var(--sf) * .64); height: calc(var(--sf) * .98); margin: 0 1px; perspective: calc(var(--sf) * 6); font-family: var(--mono); font-weight: 700; font-style: normal; font-size: var(--sf); line-height: 1; }
.sf-t > i { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; font-style: normal; backface-visibility: hidden; }
.sf-t u { position: absolute; left: 0; right: 0; height: calc(var(--sf) * .98); line-height: calc(var(--sf) * .98); text-align: center; text-decoration: none; color: #fff1c2; font-size: calc(var(--sf) * .86); text-shadow: 0 0 .25em rgba(255, 241, 194, .25); }
.sf-u, .sf-fu { top: 0; border-radius: 4px 4px 0 0; background: linear-gradient(#3b2d68, #2a1f4e); transform-origin: 50% 100%; }
.sf-l, .sf-fl { bottom: 0; border-radius: 0 0 4px 4px; background: linear-gradient(#1f1640, #281d4a); transform-origin: 50% 0; }
.sf-u u, .sf-fu u { top: 0; } .sf-l u, .sf-fl u { bottom: 0; }
.sf-fl { transform: rotateX(90deg); } .sf-fu { z-index: 2; } .sf-fl { z-index: 3; }
.sf-t::after { content: ""; position: absolute; left: -1px; right: -1px; top: calc(50% - 1px); height: 2px; background: #0c0718; z-index: 5; box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.sf-x { flex: none; align-self: center; margin: 0 2px; font: 700 calc(var(--sf) * .8)/1 var(--mono); color: #fff1c2; }
.ch-covered .ch-redact { opacity: .9; }
#askSub.sf-pop { animation: sf-pop .4s steps(5, end); }
@keyframes sf-pop { 0% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
html.reduce-motion .sf-led { animation: none; }

/* ====================================================================== tanda 15: retos nuevos II */
/* Ctrl+Z: el teclado que pulsa el crupier (las teclas se hunden y se van) y una barrida de lineas al rebobinar el mapa */
#zzFx { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
#zzFx .zz-scan { position: absolute; inset: -20% 0; background: repeating-linear-gradient(0deg, rgba(170, 225, 255, 0) 0 5px, rgba(170, 225, 255, .2) 5px 7px); mix-blend-mode: screen; animation: zz-scan .34s steps(7, end) both; }
@keyframes zz-scan { 0% { opacity: 0; transform: translateY(28%); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-28%); } }
#zzFx .zz-cap { position: absolute; left: 50%; top: 48%; display: flex; align-items: center; gap: 9px; transform: translate(calc(-50% + var(--zx, 0px)), calc(-50% + var(--zy, 0px))) rotate(var(--zr, 0deg)); animation: zz-cap .95s steps(12, end) both; }
#zzFx .zz-cap u { text-decoration: none; font: 700 22px var(--mono); color: #fff1c2; text-shadow: 0 2px 0 #130a2e; }
#zzFx .zz-k { display: block; min-width: 54px; padding: 13px 16px 11px; text-align: center; border-radius: 7px; font: 700 22px/1 var(--mono); letter-spacing: .02em; font-style: normal; color: #fff1c2; background: linear-gradient(#3d2f6f, #2b2150); box-shadow: 0 0 0 2px #130a2e, 0 6px 0 #130a2e, inset 0 2px 0 #6a58b3, inset 0 -3px 0 #1c1440; animation: zz-press .95s steps(12, end) both; }
#zzFx .zz-z { color: #1d0a3d; background: linear-gradient(#fff7da, #f1dba3); box-shadow: 0 0 0 2px #130a2e, 0 6px 0 #130a2e, inset 0 2px 0 #fff, inset 0 -3px 0 #c9aa5e; animation-delay: .06s; }
@keyframes zz-cap { 0% { opacity: 0; scale: 1.5; } 12% { opacity: 1; scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes zz-press { 0%, 14% { translate: 0 -6px; } 26%, 62% { translate: 0 5px; box-shadow: 0 0 0 2px #130a2e, 0 1px 0 #130a2e, inset 0 2px 0 #6a58b3, inset 0 -3px 0 #1c1440; } 100% { translate: 0 0; } }
html.reduce-motion #zzFx .zz-scan, html.reduce-motion #zzFx .zz-cap, html.reduce-motion #zzFx .zz-k { animation: none !important; }
html.reduce-motion #zzFx .zz-scan { display: none; }

/* Noche de tormenta sin WebGL: una capa oscura que se apaga con cada rayo */
#chOv > .ch-night { background: radial-gradient(ellipse at 50% 40%, rgba(5, 9, 24, .86), rgba(2, 4, 12, .94)); transition: opacity .12s ease-out; }
#chOv > .ch-night.on { opacity: 1; transition: opacity .55s ease-in; } #chOv > .ch-night.soft { transition: opacity .3s ease; }

/* Pregunta trampa: la esquina roja y el sello TRAMPA sobre la placa */
#plate.trap { --edge: #9c1a3f; }
.trap-mark { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.trap-corner { position: absolute; right: 0; top: 0; width: 46px; height: 46px; background: linear-gradient(225deg, #e23a52 0 52%, #9c1a3f 52% 58%, transparent 58%); animation: trap-fold .35s steps(5, end) both; }
.trap-stamp { position: absolute; right: 14px; top: 6px; padding: .12em .5em .08em; font: 700 12px/1.2 var(--mono); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: #fff5ef; background: #d8283f; border: 2px solid #5e1238; border-radius: 3px; box-shadow: 0 2px 0 #5e1238; transform: rotate(5deg); animation: trap-slam .42s steps(6, end) both; }
@keyframes trap-fold { from { scale: 0; transform-origin: 100% 0; } to { scale: 1; transform-origin: 100% 0; } }
@keyframes trap-slam { 0% { transform: rotate(-16deg) scale(2.6); opacity: 0; } 55% { opacity: 1; } 100% { transform: rotate(5deg) scale(1); } }
html.reduce-motion .trap-corner, html.reduce-motion .trap-stamp { animation: none !important; }

/* ================================================================ tanda 16: JEFES CON IDENTIDAD (js/jefes.js) */
.boss-d { margin: -2px 0 8px; max-width: 34em; font-family: var(--mono); font-weight: 700; font-size: clamp(13px, calc(2 * var(--vh)), 16px); line-height: 1.25; color: #f4e9d6; opacity: .92; }
.ab-rise { display: flex; gap: 4px; align-items: center; margin-top: 6px; padding: 4px 7px; width: max-content; border-radius: 999px; background: rgba(22, 36, 28, .92); box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.ab-rise i { position: relative; width: 20px; height: 9px; border-radius: 3px; background: #2a3a30; box-shadow: inset 0 0 0 1.5px #0d1812; }
.ab-rise i.on, .ab-rise i.cur { box-shadow: inset 0 0 0 1.5px #3a0f12; }
.ab-rise i:nth-child(1).on, .ab-rise i:nth-child(1).cur { background: #f8b449; } .ab-rise i:nth-child(2).on, .ab-rise i:nth-child(2).cur { background: #f59a3a; } .ab-rise i:nth-child(3).on, .ab-rise i:nth-child(3).cur { background: #ec7332; }
.ab-rise i:nth-child(4).on, .ab-rise i:nth-child(4).cur { background: #e0432f; } .ab-rise i:nth-child(5).on, .ab-rise i:nth-child(5).cur { background: #c4182f; }
.ab-rise i.cur { animation: rise-cur .8s steps(2, end) infinite alternate; } .ab-rise i.cur.pop { animation: rise-pop .55s cubic-bezier(.2, 1.8, .4, 1), rise-cur .8s steps(2, end) .55s infinite alternate; }
@keyframes rise-cur { from { filter: brightness(1); } to { filter: brightness(1.45); } } @keyframes rise-pop { 0% { transform: scale(2.4, 2.2); } 100% { transform: none; } }
.ab-noise { display: flex; align-items: center; gap: 7px; margin-top: 5px; font: 700 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #fdf5fd; }
.ab-noise span { position: relative; width: 120px; height: 9px; border-radius: 4px; background: #0d1812; box-shadow: inset 0 0 0 1.5px #16241c; overflow: hidden; } .ab-noise i { display: block; height: 100%; background: linear-gradient(90deg, #4ee3c1, #f8b449 60%, #fe5f55); transition: width .12s linear; } .ab-noise.woke i { width: 100% !important; background: #fe5f55; }
@media (min-width: 901px) and (min-height: 561px) { .ab-noise { display: none; } }
#bossPulse { position: fixed; inset: 0; z-index: 99010; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 52%, rgba(255, 50, 40, calc(.14 + var(--q, 1) * .06)) 100%); }
#bossPulse.on { animation: boss-pulse .75s ease-out; } @keyframes boss-pulse { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 0; } }
.ch-chip.tw { box-shadow: inset 0 0 0 2px #ffd95a, 0 0 12px rgba(255, 217, 90, .5), 0 3px 0 rgba(0, 0, 0, .35); } .ch-chip.tw.tw-in { animation: tw-in .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes tw-in { 0% { transform: scale(1.5) rotate(-4deg); opacity: .2; } 100% { transform: none; opacity: 1; } }
.ch-chip.ch-hid { opacity: .88; filter: saturate(.65); } .ch-chip.ch-hid b { letter-spacing: .3em; }
/* La siesta: el crupier duerme en su esquina; el ruido llena su barra y cambia su cara */
.dealer.nap .dl-bubble { display: none; }
.dealer.nap .dl-face::before { content: ""; position: absolute; left: 20%; right: 20%; bottom: -8px; height: 9px; border-radius: 4px; background: #0d1812; box-shadow: 0 0 0 2px #16241c; }
.dealer.nap .dl-face::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -8px; height: 9px; border-radius: 4px; background: linear-gradient(90deg, #4ee3c1, #f8b449 62%, #fe5f55); clip-path: inset(0 calc((1 - var(--nz, 0)) * 100%) 0 0 round 4px); z-index: 1; }
.dealer.nap1 .dl-face { filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .4)) drop-shadow(0 0 7px rgba(248, 180, 73, .6)); }
.dealer.nap2 .dl-face { filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .4)) drop-shadow(0 0 10px rgba(254, 95, 85, .85)); animation: nap-shiver .16s steps(2, end) infinite alternate; } @keyframes nap-shiver { from { translate: -1px 0; } to { translate: 1px 0; } }
html.reduce-motion .dealer.nap2 .dl-face { animation: none; }
/* Rompe la cuarta pared: salvapantallas y pantallazo azul */
#ssFx { position: fixed; inset: 0; z-index: 99100; background: #02040c; cursor: none; animation: ss-in .35s ease both; } #ssFx.half { background: rgba(2, 4, 12, .62); } #ssFx.bye { opacity: 0; transition: opacity .2s; }
#ssFx canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; } #ssFx .ss-logo { position: absolute; left: 0; top: 0; width: 96px; height: 96px; image-rendering: pixelated; will-change: transform; filter: drop-shadow(0 0 10px rgba(180, 120, 255, .7)); }
#ssFx .ss-hint { position: absolute; left: 0; right: 0; bottom: 9%; margin: 0; text-align: center; font: 700 16px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); animation: ss-blink 1.6s steps(2, end) infinite; }
@keyframes ss-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ss-blink { 50% { opacity: .35; } }
#bsodFx { position: fixed; inset: 0; z-index: 99200; background: #0a6cc4; color: #fff; font-family: var(--mono); cursor: none; } #bsodFx.bye { opacity: 0; transition: opacity .12s; }
#bsodFx .bs-in { position: absolute; left: 8vw; top: 13vh; max-width: 74vw; } #bsodFx .bs-sad { display: block; font: 700 clamp(70px, 16vh, 170px)/1 var(--mono); margin-bottom: 3vh; } #bsodFx p { margin: 0 0 2.2vh; font-weight: 700; font-size: clamp(16px, 3.2vh, 30px); line-height: 1.25; }
#bsodFx .bs-c { font-size: clamp(14px, 2.4vh, 22px); } #bsodFx .bs-row { display: flex; align-items: center; gap: 16px; margin-top: 4vh; font-size: clamp(12px, 2vh, 18px); font-weight: 700; } #bsodFx .bs-qr { flex: none; width: clamp(56px, 11vh, 100px); aspect-ratio: 1; background: conic-gradient(#fff 25%, #0a6cc4 0 50%, #fff 0 75%, #0a6cc4 0) 0 0 / 22% 22%; box-shadow: 0 0 0 4px #fff; image-rendering: pixelated; }
/* El coleccionista: el album */
#albumFx { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 99020; padding: 8px 14px 10px; background: #fdf5fd; color: #16241c; box-shadow: inset 0 0 0 3px #16241c, 0 6px 0 rgba(0, 0, 0, .4); text-align: center; pointer-events: none; animation: al-in .5s cubic-bezier(.2, 1.4, .4, 1) both; }
#albumFx h4 { margin: 0 0 5px; font: 700 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; } #albumFx .al-row { display: flex; gap: 6px; justify-content: center; }
#albumFx .al-s { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 6px; background: #16241c; box-shadow: inset 0 0 0 2px #3b5547; } #albumFx .al-s .ic { width: 32px; height: 32px; } #albumFx .al-s.done { opacity: .75; } #albumFx .al-s.back { opacity: .55; }
#albumFx .al-s.cur { background: #3b1f6b; box-shadow: inset 0 0 0 2px #ffd95a; animation: al-stamp .5s cubic-bezier(.2, 1.7, .4, 1) .15s both; } #albumFx .al-s.cur .ic { width: 38px; height: 38px; }
#albumFx .al-n { margin: 6px 0 0; font: 700 15px var(--mono); }
#albumFx.bye { opacity: 0; transition: opacity .22s; }
@keyframes al-in { from { transform: translate(-50%, -140%); } to { transform: translate(-50%, 0); } } @keyframes al-stamp { 0% { transform: scale(2.6) rotate(-14deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* Rueda de la fortuna */
#wheelFx { position: fixed; inset: 0; z-index: 99050; display: grid; place-items: center; background: radial-gradient(circle, rgba(6, 13, 9, .55), rgba(6, 13, 9, .2) 70%); animation: ss-in .15s ease both; } #wheelFx.bye { opacity: 0; transition: opacity .22s; }
#wheelFx .wh-wrap { position: relative; width: 264px; text-align: center; } #wheelFx .wh-pt { position: absolute; left: 50%; top: -14px; width: 0; height: 0; margin-left: -12px; border: 12px solid transparent; border-top: 22px solid #fe5f55; filter: drop-shadow(0 2px 0 #16241c); z-index: 2; }
#wheelFx .wh-disc { position: relative; width: 264px; height: 264px; border-radius: 50%; box-shadow: 0 0 0 6px #16241c, 0 8px 0 6px rgba(0, 0, 0, .4); will-change: transform; } #wheelFx .wh-i { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; image-rendering: pixelated; }
#wheelFx .wh-hub { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; background: #fdf5fd; box-shadow: 0 0 0 4px #16241c; }
#wheelFx .wh-t { margin: 18px 0 0; font: 400 34px/1 var(--sans); color: #fdf5fd; text-shadow: 0 3px 0 #16241c; } #wheelFx.land .wh-t { color: #ffd95a; animation: al-stamp .4s cubic-bezier(.2, 1.7, .4, 1); }
html.reduce-motion #ssFx, html.reduce-motion #albumFx, html.reduce-motion #wheelFx, html.reduce-motion .ch-chip.tw.tw-in, html.reduce-motion .ab-rise i.pop, html.reduce-motion #bossPulse.on { animation: none !important; }

/* 0.2.5: el sello del amuleto que frena el reto (ya comprado: se luce). Cae con un golpe al empezar la ronda (A.adv.amuSlam) */
.ch-chip { position: relative; }
.ch-chip .ch-amu { position: absolute; right: -8px; top: -10px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #1d3326; box-shadow: inset 0 0 0 2px #ffd95a, inset 0 -3px 0 2px #c46a1b, 0 0 0 2px #16241c, 0 2px 0 rgba(0, 0, 0, .45); pointer-events: none; z-index: 1; }
.ch-chip .ch-amu .ic { width: 16px; height: 16px; image-rendering: pixelated; }
.ch-chip .ch-amu.wait { opacity: 0; }
.ch-chip .ch-amu.slam { animation: chAmuSlam .46s steps(8, end) both; }
@keyframes chAmuSlam { 0% { opacity: 0; transform: scale(2.6) rotate(-24deg); } 50% { opacity: 1; transform: scale(.82) rotate(8deg); } 72% { transform: scale(1.14) rotate(-3deg); } 100% { opacity: 1; transform: none; } }
html.reduce-motion .ch-chip .ch-amu.slam { animation: none; }

/* LOS EFECTOS DE LA MESA (js/chfx.js, el motor de la mesa; el humo, js/humo.js): una capa propia, colgada de <body>, por encima de TODO el juego (partida,
   Campamento, menus, casino, Ajustes, creditos). Por delante solo quedan el crupier cuando habla en directo (.dealer.lvpos), el cursor del mando, el piloto y la mano */
#vivoFx { position: fixed; inset: 0; z-index: 2147482500; pointer-events: none; overflow: hidden; }
#vivoFx > * { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .55s ease; }
#vivoFx > .on { opacity: 1; }
#vivoFx > .chx-gl, #vivoFx > .chx-2d { transition: none; }
#vivoFx > .chx-wins { opacity: 1; }
#vivoFx > .hm-cv { transition: opacity .8s ease; }
/* los retos de la mesa que cambian COMO SE VE todo el juego (js/chfx.js, X.mesaSet): capas con backdrop-filter al fondo de #vivoFx, sobre cualquier pantalla */
#vivoFx > .mx-blur { -webkit-backdrop-filter: blur(var(--mxb, 0px)); backdrop-filter: blur(var(--mxb, 0px)); }
#vivoFx > .mx-myo { --mxb: 6px; -webkit-backdrop-filter: blur(var(--mxb)); backdrop-filter: blur(var(--mxb));
  -webkit-mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), transparent calc(var(--mr, 150px) - 14px), #000 calc(var(--mr, 150px) + 46px));
  mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), transparent calc(var(--mr, 150px) - 14px), #000 calc(var(--mr, 150px) + 46px)); }
#vivoFx > .mx-tone { -webkit-backdrop-filter: var(--mxf, grayscale(0)); backdrop-filter: var(--mxf, grayscale(0)); }
#vivoFx > .mx-tone.hue { animation: mx-hue 3.4s ease-in-out infinite alternate; }
@keyframes mx-hue { from { -webkit-backdrop-filter: var(--mxf, grayscale(0)) hue-rotate(0deg); backdrop-filter: var(--mxf, grayscale(0)) hue-rotate(0deg); } to { -webkit-backdrop-filter: var(--mxf, grayscale(0)) hue-rotate(var(--hd, 90deg)); backdrop-filter: var(--mxf, grayscale(0)) hue-rotate(var(--hd, 90deg)); } }
html.reduce-motion #vivoFx > .mx-tone.hue { animation: none; }
/* controles invertidos de la mesa fuera de la pregunta (js/vivo.js): el raton de verdad se esconde y se dibuja uno espejado */
html.vivo-inv, html.vivo-inv * { cursor: none !important; }
#vivoCur { position: fixed; left: 0; top: 0; z-index: 2147482580; width: 24px; height: 32px; pointer-events: none; image-rendering: pixelated; background: center / 100% 100% no-repeat; opacity: 0; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); }
#vivoCur.on { opacity: 1; }

/* LA CAMARA DEL CRUPIER (js/vivo.js): el piloto de arriba mientras la mesa del autor ve la ventana del juego, y su mano (25x37 de su sprite, escala entera) */
#vivoEye { position: fixed; left: 50%; top: 10px; z-index: 2147483100; display: flex; align-items: center; gap: 8px; padding: 2px 12px 2px 2px; background: rgba(10, 14, 12, .88); box-shadow: inset 0 0 0 2px rgba(232, 40, 58, .65), 0 4px 0 rgba(0, 0, 0, .4); font-family: var(--mono); font-size: 16px; line-height: 1; color: #ff8a93; text-transform: uppercase; white-space: nowrap; pointer-events: none; transform: translate(-50%, -70px); transition: transform .45s cubic-bezier(.2, 1.4, .4, 1); }
#vivoEye.on { transform: translate(-50%, 0); }
#vivoEye img { width: 52px; height: 52px; image-rendering: pixelated; }
#vivoEye i { width: 8px; height: 8px; background: #e8283a; box-shadow: 0 0 0 2px rgba(232, 40, 58, .22); animation: dlLive 1.2s steps(1) infinite; }
#vivoGlove { position: fixed; left: 0; top: 0; z-index: 2147483200; pointer-events: none; opacity: 0; transition: opacity .2s, transform .1s linear; }
#vivoGlove.on { opacity: 1; }
#vivoGlove img { display: block; width: var(--gw); height: var(--gh); margin-left: calc(-1 * var(--gx)); margin-top: calc(-1 * var(--gy, 0px)); image-rendering: pixelated; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .35)); transform-origin: 20% 0; }
.vg-ring { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 6px rgba(22, 36, 28, .35); opacity: 0; transform: translate(-50%, -50%); }
#vivoGlove.tap .vg-ring { animation: vgRing .6s ease-out .06s; }
@keyframes vgRing { from { width: 4px; height: 4px; opacity: 1; } to { width: 64px; height: 64px; opacity: 0; } }
html.reduce-motion #vivoGlove.tap .vg-ring, html.reduce-motion #vivoEye i { animation: none; }

/* estilos del bocadillo que elige la mesa en directo (api/mesa.js STY, js/dealer.js): gritando, tembloroso, susurro, pensando, siniestro, cantando, glitch y gran anuncio */
#dealer .dl-bubble.st-shout { font-size: calc(38px * var(--dll, 1)); color: #c4152a; text-transform: uppercase; padding: 16px 22px 18px; background: #fff3c4; animation: dlShout .09s steps(2) infinite;
  clip-path: polygon(0 6%, 4% 0, 10% 6%, 17% 0, 24% 6%, 31% 0, 38% 6%, 45% 0, 52% 6%, 59% 0, 66% 6%, 73% 0, 80% 6%, 87% 0, 94% 6%, 100% 0, 98% 30%, 100% 50%, 98% 70%, 100% 100%, 12px 100%, 0 calc(100% + 12px), 2% 70%, 0 50%, 2% 30%); }
@keyframes dlShout { 0% { transform: translate(2px, -1px) rotate(-.6deg); } 50% { transform: translate(-2px, 1px) rotate(.6deg); } }
#dealer .dl-bubble.st-tremble { font-size: calc(24px * var(--dll, 1)); } .dl-bubble.st-tremble p { animation: dlTremble .12s steps(2) infinite; }
@keyframes dlTremble { 0% { transform: translate(1px, 0); } 50% { transform: translate(-1px, 1px); } }
#dealer .dl-bubble.st-whisper { font-size: calc(20px * var(--dll, 1)); font-style: italic; letter-spacing: .06em; color: rgba(22, 36, 28, .62); background: #e9e2cc; box-shadow: inset 0 0 0 3px rgba(22, 36, 28, .45), 0 6px 0 rgba(0, 0, 0, .3); }
#dealer .dl-bubble.st-think { font-style: italic; border-radius: 30px; clip-path: none; padding: 13px 22px 15px; }
.dl-bubble.st-think::after { content: ""; position: absolute; left: 14px; bottom: -22px; width: 12px; height: 12px; border-radius: 50%; background: #fdf5fd; box-shadow: -8px 12px 0 -2px #fdf5fd, 0 0 0 3px #16241c; }
#dealer .dl-bubble.st-dark { background: #1a0a10; color: #ff4a5a; text-shadow: 0 0 8px rgba(255, 40, 60, .7); box-shadow: inset 0 0 0 3px #7a0c1a, 0 6px 0 rgba(0, 0, 0, .55); letter-spacing: .04em; }
#dealer .dl-bubble.st-sing { background: #fff1b0; color: #7a4b00; animation: dlSway 1.1s ease-in-out infinite; }
@keyframes dlSway { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg) translateY(-3px); } }
#dealer .dl-bubble.st-glitch { background: #0c1a1a; color: #aef; text-shadow: 2px 0 #ff2e63, -2px 0 #08f9ff; animation: dlGlitch 1.3s steps(1) infinite; box-shadow: inset 0 0 0 3px #08f9ff, 0 6px 0 rgba(0, 0, 0, .5); }
@keyframes dlGlitch { 0%, 88%, 100% { transform: none; } 90% { transform: translateX(5px) skewX(-6deg); } 94% { transform: translateX(-4px); } }
#dealer .dl-bubble.st-gold { font-size: calc(32px * var(--dll, 1)); background: linear-gradient(100deg, #f1d79a 0 40%, #fff6d0 50%, #f1d79a 60% 100%) 0 0 / 250% 100%; animation: dlShine 2.2s linear infinite; padding: 14px 22px 16px; }
@keyframes dlShine { to { background-position: -150% 0; } }
@media (max-width: 720px) { #dealer .dl-bubble.st-shout { font-size: calc(28px * var(--dll, 1)); } #dealer .dl-bubble.st-gold { font-size: calc(24px * var(--dll, 1)); } #dealer .dl-bubble.st-whisper { font-size: calc(17px * var(--dll, 1)); } #dealer .dl-bubble.st-tremble { font-size: calc(20px * var(--dll, 1)); } }
html.reduce-motion .dl-bubble[class*="st-"], html.reduce-motion .dl-bubble[class*="st-"] p { animation: none !important; }

/* donde sale el crupier cuando habla la mesa (js/dealer.js, o.pos): esquinas o centro grande, por encima de todo */
.dealer.lvpos { position: fixed; left: auto; right: auto; top: auto; bottom: auto; z-index: 2147483000; flex-direction: column; gap: 4px; transform: none; --hf: 224px; --tail: calc(var(--hf) / 2); }
.dealer.lvpos.lv-tl { left: 24px; top: 24px; align-items: flex-start; } .dealer.lvpos.lv-bl { left: 24px; bottom: 24px; align-items: flex-start; }
.dealer.lvpos.lv-tr { right: 24px; top: 24px; align-items: flex-end; --tail: calc(100% - var(--hf) / 2); } .dealer.lvpos.lv-br { right: 24px; bottom: 24px; align-items: flex-end; --tail: calc(100% - var(--hf) / 2); }
.dealer.lvpos.lv-c { left: 50%; top: 50%; transform: translate(-50%, -50%); align-items: center; --hf: clamp(300px, 54vh, 520px); --tail: 50%; }
.dealer.lvpos .dl-face { order: 2; width: var(--hf); height: var(--hf); }
.dealer.lvpos .dl-bubble { order: 1; margin: 0; min-width: min(var(--hf), 420px); max-width: min(460px, 80vw); padding-bottom: 22px; transform-origin: var(--tail) 100%;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(var(--tail) + 10px) calc(100% - 12px), var(--tail) 100%, calc(var(--tail) - 10px) calc(100% - 12px), 0 calc(100% - 12px)); }
.dealer.lvpos.lv-c .dl-bubble { max-width: min(640px, 86vw); font-size: calc(32px * var(--dll, 1)); }

/* ==== v0.3.101: los retos de la ronda, arriba del todo y solo con su icono (#chalBar, js/adventure.js renderBars) ====
   Antes eran una lista de fichas con nombre dentro de la barra del acto: con 5 retos tapaba medio mapa y, con "Controles invertidos", cruzarla
   se comia los clics. Ahora es una tira de iconos que NUNCA capta el raton (pointer-events: none: el clic llega siempre al mapa); el nombre y
   la descripcion salen al pasar el cursor por encima (js/uikit.js, ghostAt, que los busca por posicion). Los puntos de abajo son el nivel. */
#chalBar { position: absolute; z-index: 6; left: 50%; top: var(--hy, 14px); transform: translateX(-50%); zoom: var(--k, 1); --vw: calc(1vw / var(--k, 1)); --vh: calc(1vh / var(--k, 1));
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 6px; max-width: calc(34 * var(--vw)); pointer-events: none; }
#chalBar.hidden { display: none; }
#chalBar .ch-chip { position: relative; flex-direction: column; justify-content: center; gap: 3px; width: 42px; padding: 6px 0 5px; border-radius: 0; background: #0b1d15; filter: drop-shadow(0 4px 0 rgba(2, 6, 4, .72)); pointer-events: none; }
#chalBar .ch-chip .ic { width: 24px; height: 24px; }
#chalBar .ch-chip > b { display: none; }
:root body #chalBar .ch-chip .ch-lv { display: block; font-size: 9px; line-height: 9px; letter-spacing: 1px; margin-right: -1px; }
:root body #chalBar .ch-chip .ch-new { position: absolute; left: -4px; top: -4px; width: 9px; height: 9px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #e2483d; box-shadow: 0 0 0 2px #0b1d15; font-size: 0; }
#chalBar .ch-chip.ch-sealed::before { position: absolute; left: -4px; bottom: -4px; width: 9px; height: 9px; }
#chalBar .ch-chip.ch-calm::after { position: absolute; right: 2px; top: 0; margin: 0; font-size: 11px; }
#chalBar .ch-chip .ch-amu { right: -7px; top: -9px; width: 18px; height: 18px; } #chalBar .ch-chip .ch-amu .ic { width: 13px; height: 13px; }
#chalBar .ch-chip.ch-hid { opacity: 1; }
#chalBar .ch-chip.ch-hid b { display: block; letter-spacing: 0; font-size: 16px; line-height: 1; }
@media (max-width: 900px), (max-height: 520px) { #chalBar { top: 6px; zoom: 1; max-width: 40vw; gap: 4px; } #chalBar .ch-chip { width: 32px; padding: 4px 0 3px; } #chalBar .ch-chip .ic { width: 18px; height: 18px; } }

/* ==== v0.3.103: acto, monedas y vidas JUNTO a los retos, arriba del todo (#topHud) ====
   El bloque del acto colgaba bajo la pregunta: ahi tapaba el monton de la Enciclopedia y tenia poco protagonismo. Ahora es una sola pieza centrada
   (la barra del acto con todo su contenido centrado y, debajo, la tira de iconos de los retos). Nunca capta el raton (salvo las reliquias, para su texto). */
#topHud { position: absolute; z-index: 6; left: 50%; top: var(--hy, 14px); transform: translateX(-50%); zoom: var(--k, 1); --vw: calc(1vw / var(--k, 1)); --vh: calc(1vh / var(--k, 1));
  display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: calc(30 * var(--vw)); pointer-events: none; }
#topHud > .adv-bar { position: relative; left: auto; top: auto; width: max-content; min-width: 0; max-width: 100%; justify-items: center; text-align: center; margin: 0; }
#topHud > .adv-bar .ab-top, #topHud > .adv-bar .ab-perks, #topHud > .adv-bar .ab-wind { justify-content: center; }
#topHud > .adv-bar .ab-perks { max-width: 100%; }
#topHud > #chalBar { position: relative; left: auto; top: auto; transform: none; zoom: 1; max-width: 100%; --vw: inherit; --vh: inherit; }
@media (max-width: 900px), (max-height: 520px) { #topHud { top: 6px; zoom: 1; max-width: 46vw; } #topHud > .adv-bar { padding: 5px 8px 6px; gap: 3px; } #topHud > .adv-bar .ab-perks { display: none; } }
#topHud > .adv-bar { max-width: min(300px, 100%); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; }
#topHud > .adv-bar .ab-top { flex: 0 0 100%; }
#topHud > .adv-bar .ab-perks, #topHud > .adv-bar .ab-wind { flex: 0 1 auto; }