/* Geolite - Enciclopedia: un atlas que es un APARATO (el localizador). Indice a la izquierda (Resumen, 7 continentes, Por afinar) y a la derecha la pagina:
   Resumen (mapa del mundo coloreado), continente (familias de paises), pais (sus lugares por secciones) y la carta (ficha, historia, dato clave).
   v0.3.50 (mesa de diseno, Enciclopedia A): Naipe de gala. El cristal turquesa del aparato es una superficie mas del sistema, solo de la Enciclopedia
   (esquina de pixel, contorno, filete de fosforo y lineas de pantalla), con escuadras de laton en las esquinas, como un visor. Botones, letra
   (Jersey; mayusculas espaciadas solo en encabezados de seccion), cifras y reticula de 12 columnas (indice 3, pagina 6, mapa 3) como el resto.
   Las tarjetas son naipes de gala; las que no tienes, boca abajo con el dorso del aparato. Se enciende al abrirla y se apaga al cerrarla.
   Todo en px del lienzo de 1280x720: la escala la pone --k (como el resto de menus). Turquesa = el aparato; bronce/plata/oro = medallas. */
#codex { --cx1: #4ee3c1; --cx2: #1fb3a3; --cx3: #16787f; --cx4: #164a5c; --cxt: #9fe9d6;
  --b1: #f3b07a; --b2: #d07f45; --b3: #a45530; --b4: #73352a; --s1: #f2f4fa; --s2: #c8cbd8; --s3: #9095ab; --s4: #5f6480; --g1: #fff1b8; --g2: #ffd95a; --g3: #f5a623; --g4: #b87a1c;
  --glass: repeating-linear-gradient(0deg, rgba(159, 233, 214, .035) 0 2px, transparent 2px 4px), linear-gradient(180deg, rgba(10, 34, 31, .95), rgba(5, 18, 16, .95));
  --glass-rim: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px rgba(78, 227, 193, .55), inset 0 0 0 6px var(--gx-o), inset 0 34px 46px -34px rgba(78, 227, 193, .2);
  --well: rgba(0, 0, 0, .28); --well-rim: inset 0 0 0 2px rgba(78, 227, 193, .25);
  position: absolute; inset: 0; z-index: 12; display: flex; color: var(--gx-txt); font-family: var(--sans); outline: none; overflow: hidden; pointer-events: none; }
/* encima de la mesa: el mapa del juego se ve (y se toca) donde no hay paneles. Por afinar y Buscar (y las ventanas estrechas) lo tapan con la pantalla apagada del aparato */
#codex.dim { pointer-events: auto; background: radial-gradient(ellipse at 30% 0%, #0d2a26, #04100d 78%), #04100d; }
#codex.hidden { display: none; }
#codex.dim::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, rgba(159, 214, 200, .035) 0 2px, transparent 2px 48px), repeating-linear-gradient(90deg, rgba(159, 214, 200, .035) 0 2px, transparent 2px 48px); }
#codex .cx-head > *, #codex .cx-nav, #codex .cx-main, #codex .cx-light, #codex .cx-zoom, #codex .cx-leg { pointer-events: auto; }
/* con la Enciclopedia abierta no se ve nada de lo que hay entre ella y el mapa (portada, HUD de la partida, regla del zoom) */
body.cx-on #layer, body.cx-on #leftCol, body.cx-on #hud, body.cx-on #railSh, body.cx-on #dockSh, body.cx-on #noteSh { visibility: hidden; }
body.cx-on .cx-toast { display: none !important; }                     /* su carrete pone visibility: visible en la tarjeta actual: con hidden se colaba */
.cx-shell { zoom: var(--k); --vh: calc(1vh / var(--k)); --vw: calc(1vw / var(--k)); position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr);
  width: min(1480px, calc(100 * var(--vw))); height: calc(100 * var(--vh)); margin: 0 auto; padding: 0 40px; }
/* el visor: escuadras de laton en las cuatro esquinas de la pantalla */
.cx-brk { position: absolute; inset: 10px; z-index: 4; pointer-events: none; zoom: var(--k); --e: 40px; --w: 4px;
  background: linear-gradient(var(--gx-rim), var(--gx-rim)) 0 0 / var(--e) var(--w) no-repeat, linear-gradient(var(--gx-rim), var(--gx-rim)) 0 0 / var(--w) var(--e) no-repeat,
    linear-gradient(var(--gx-rim), var(--gx-rim)) 100% 0 / var(--e) var(--w) no-repeat, linear-gradient(var(--gx-rim), var(--gx-rim)) 100% 0 / var(--w) var(--e) no-repeat,
    linear-gradient(var(--gx-rim), var(--gx-rim)) 0 100% / var(--e) var(--w) no-repeat, linear-gradient(var(--gx-rim), var(--gx-rim)) 0 100% / var(--w) var(--e) no-repeat,
    linear-gradient(var(--gx-rim), var(--gx-rim)) 100% 100% / var(--e) var(--w) no-repeat, linear-gradient(var(--gx-rim), var(--gx-rim)) 100% 100% / var(--w) var(--e) no-repeat;
  filter: drop-shadow(0 2px 0 rgba(2, 6, 4, .8)); }

/* ---------- el aparato se enciende y se apaga (js/codex.js: power). Dos mitades de pantalla negra y la linea de fosforo; solo transform y opacidad ---------- */
.cx-pw { position: absolute; inset: 0; z-index: 20; pointer-events: none; display: none; }
.cx-pw > i { position: absolute; left: 0; right: 0; height: 50.5%; background: #020605; }
.cx-pw > i:first-child { top: 0; } .cx-pw > i:nth-child(2) { bottom: 0; }
.cx-pw > b { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: #dffff5; box-shadow: 0 0 18px 6px rgba(78, 227, 193, .75); }
#codex.pw-on .cx-pw, #codex.pw-off .cx-pw { display: block; }
#codex.pw-off * { pointer-events: none !important; }   /* apagandose: no se puede pulsar nada */
#codex.pw-on .cx-pw > i:first-child { animation: cx-pw-top .34s cubic-bezier(.5, 0, .2, 1) .1s both; } #codex.pw-on .cx-pw > i:nth-child(2) { animation: cx-pw-bot .34s cubic-bezier(.5, 0, .2, 1) .1s both; }
#codex.pw-on .cx-pw > b { animation: cx-pw-line .44s ease-out both; }
@keyframes cx-pw-top { to { transform: translateY(-101%); } } @keyframes cx-pw-bot { to { transform: translateY(101%); } }
@keyframes cx-pw-line { 0% { transform: scaleX(0); opacity: 1; } 22% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1) scaleY(30); opacity: 0; } }
#codex.pw-off .cx-pw > i:first-child { animation: cx-pw-top-in .17s cubic-bezier(.6, 0, 1, 1) both; } #codex.pw-off .cx-pw > i:nth-child(2) { animation: cx-pw-bot-in .17s cubic-bezier(.6, 0, 1, 1) both; }
#codex.pw-off .cx-pw > b { animation: cx-pw-dot .3s linear both; }
@keyframes cx-pw-top-in { from { transform: translateY(-101%); } } @keyframes cx-pw-bot-in { from { transform: translateY(101%); } }
@keyframes cx-pw-dot { 0%, 50% { transform: scaleX(1); opacity: 1; } 85% { transform: scaleX(.004) scaleY(2); opacity: 1; } 100% { transform: scaleX(0); opacity: 0; } }

/* ---------- cabecera: Cerrar o Volver (con su tecla), titulo con migas y buscador ---------- */
.cx-head { display: grid; grid-template-columns: auto minmax(0, 1fr) 288px; align-items: center; gap: 24px; padding: 20px 0 14px; }
.cx-back .ic { width: 22px; height: 22px; margin: 0; } .cx-back b { font-weight: 400; }
.cx-ttl { min-width: 0; display: grid; gap: 8px; }
.cx-ttl h2 { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.cx-tic .ic { display: block; width: 48px; height: 48px; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(2, 6, 4, .7)); }
.cx-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 22px; font-size: 20px; line-height: 1.1; color: var(--gx-txt-2); }
.cx-crumb a { color: var(--cx1); cursor: pointer; } .cx-crumb a:hover { color: var(--gx-acc); } .cx-crumb b { font-weight: 400; color: var(--gx-txt); } .cx-crumb i { font-style: normal; opacity: .5; }
.cx-search { position: relative; display: block; } .cx-search .ic.sm { position: absolute; left: 13px; top: 50%; z-index: 1; transform: translateY(-50%); width: 22px; height: 22px; margin: 0; opacity: .85; pointer-events: none; }
.cx-search input { width: 100%; height: 44px; font: 400 20px var(--sans); color: var(--gx-txt); border: 0; border-radius: 0; padding: 0 14px 2px 44px; outline: none; clip-path: var(--gx-notch);
  background: rgba(5, 18, 16, .92); box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px rgba(78, 227, 193, .45); }
.cx-search input:focus { box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px var(--cx1); } .cx-search input::placeholder { color: var(--gx-txt-2); opacity: .7; }

.cx-body { display: grid; grid-template-columns: 288px minmax(0, 1fr); grid-template-areas: "nav main"; gap: 16px; min-height: 0; }
.cx-nav { grid-area: nav; } .cx-main { grid-area: main; } .cx-stage { grid-area: stage; display: none; position: relative; min-height: 0; pointer-events: none; }
/* con la mesa a la vista: indice (3 columnas) | pagina (6) | mapa (3); en el Resumen, el mapa encima de la franja de progreso */
.cx-shell.stage .cx-stage { display: block; }
.cx-shell.stage .cx-body { grid-template-columns: 288px 592px minmax(0, 1fr); grid-template-areas: "nav main stage"; }
.cx-shell.stage[data-v="home"] .cx-body { grid-template-columns: 288px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "nav stage" "nav main"; row-gap: 12px; }
.cx-shell.stage:not([data-v="home"]) .cx-main { margin-bottom: 20px; padding: 18px 18px 60px; clip-path: var(--gx-notch); background: var(--glass); box-shadow: var(--glass-rim); }
.cx-shell.stage[data-v="home"] .cx-main { overflow: visible; padding: 0 0 20px; }
/* las ruedas del zoom: botones del aparato (metal con anillo de laton) */
.cx-zoom { position: absolute; right: 0; bottom: 20px; display: grid; gap: 8px; filter: drop-shadow(0 3px 0 rgba(2, 6, 4, .8)); }
.cx-zoom button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; cursor: pointer; clip-path: var(--gx-notch);
  background: linear-gradient(#2a3631 0 3px, #1b2521 3px calc(100% - 5px), #0c1310 calc(100% - 5px)); box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px rgba(212, 160, 74, .45); transition: transform .12s steps(2, end), filter .12s; }
.cx-zoom button:hover { transform: translateY(-2px); filter: brightness(1.2); } .cx-zoom button:active { transform: translateY(1px); } .cx-zoom .ic { width: 28px; height: 28px; image-rendering: pixelated; }

/* ---------- indice del atlas: un panel de cristal; la pagina abierta, en laton ---------- */
.cx-nav { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; align-self: start; max-height: 100%; padding: 12px 12px 14px; scrollbar-width: none; clip-path: var(--gx-notch); background: var(--glass); box-shadow: var(--glass-rim); }
.cx-nav hr { border: 0; height: 2px; margin: 4px 6px; background: rgba(78, 227, 193, .2); flex: none; }
.cx-nv { position: relative; flex: none; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; min-height: 44px; padding: 5px 10px 10px 8px; border: 0; border-radius: 0; cursor: pointer;
  text-align: left; color: var(--gx-txt); background: none; transition: background .15s; }
.cx-nvi { position: relative; width: 32px; height: 32px; } .cx-nvi .ic { width: 32px; height: 32px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); }
.cx-nv b { font-family: var(--sans); font-weight: 400; font-size: 20px; line-height: 1; overflow-wrap: break-word; hyphens: auto; }
.cx-nv i { font-style: normal; font-size: 18px; color: var(--cxt); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-nv .cx-mb { position: absolute; left: 50px; right: 10px; bottom: 4px; height: 4px; }
.cx-nvi em { position: absolute; left: -6px; top: -5px; z-index: 1; font-style: normal; font-size: 16px; line-height: 1; color: #fff; background: var(--gx-red); padding: 1px 4px 2px; box-shadow: inset 0 0 0 2px var(--gx-o); }   /* novedades: etiqueta roja, como "Nueva" */
.cx-nv:hover { background: rgba(78, 227, 193, .1); }
.cx-nv.on { color: var(--gx-ink); background: linear-gradient(var(--gx-rim-hi) 0 2px, var(--gx-rim) 2px calc(100% - 3px), var(--gx-rim-lo) calc(100% - 3px)); box-shadow: inset 0 0 0 2px var(--gx-o); }
.cx-nv.on i { color: var(--gx-ink); } .cx-nv.on .cx-mb { background: rgba(22, 36, 28, .35); }
.cx-nv.full:not(.on) i { color: var(--g2); }
.cx-nv:focus { outline: none; } .cx-nv:focus-visible, html[data-input="pad"] .cx-nv:focus { box-shadow: inset 0 0 0 2px #fff; }

/* ---------- pagina ---------- */
.cx-main { position: relative; z-index: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 8px 70px 4px; outline: none; scrollbar-width: thin; scrollbar-color: var(--cx2) transparent; }
.cx-main.v-home { display: flex; flex-direction: column; gap: 14px; padding-bottom: 14px; }
.cx-main h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: .95; color: var(--gx-ttl); text-shadow: 0 4px 0 #050b08; overflow-wrap: break-word; }
.cx-kic { flex: none; width: 56px; height: 56px; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .5)); }
.cx-pct { font-style: normal; font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; color: var(--cx1); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* barra de medallas: oro, plata y bronce sobre lo que falta (como la gx-bar: contorno y esquina recta) */
.cx-mb { display: flex; height: 8px; background: #0b2118; box-shadow: inset 0 0 0 2px var(--gx-o); overflow: hidden; }
.cx-mb s { display: block; height: 100%; text-decoration: none; } .cx-mb .g { background: var(--g2); } .cx-mb .s { background: var(--s2); } .cx-mb .b { background: var(--b2); }
/* medallas (icono pixel art) y su recuento */
.cx-md { display: inline-grid; place-items: center; flex: none; } .cx-md .ic { width: 100%; height: 100%; image-rendering: pixelated; }
.cx-md:not(.on) .ic { filter: grayscale(1) brightness(.42) contrast(1.1); opacity: .75; }
.cx-mc { display: inline-flex; gap: 14px; align-items: center; } .cx-mc > span { display: inline-flex; align-items: center; gap: 4px; }
.cx-mc .ic { width: 28px; height: 28px; image-rendering: pixelated; } .cx-mc b { font-family: var(--sans); font-weight: 400; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.cx-mc .bronze b { color: var(--b1); } .cx-mc .silver b { color: var(--s1); } .cx-mc .gold b { color: var(--g2); }
/* pepitas de la carta: las 3 medallas en pequeno (cuadradas, como las casillas del Clasico) */
.cx-pips { display: inline-flex; gap: 4px; align-items: center; }
.cx-pips i { width: 12px; height: 12px; background: #ded2b4; box-shadow: inset 0 0 0 2px var(--gx-o); }
.cx-pips i.bronze.on { background: var(--b2); } .cx-pips i.silver.on { background: var(--s2); } .cx-pips i.gold.on { background: var(--g2); }

/* ---------- Resumen ---------- */
.cx-sum { flex: none; display: grid; grid-template-columns: minmax(200px, 1fr) auto; gap: 12px 22px; align-items: center; padding: 16px 20px 16px; clip-path: var(--gx-notch); background: var(--glass); box-shadow: var(--glass-rim); }
.cx-sum-l { display: grid; gap: 6px; min-width: 0; }
.cx-k { font-family: var(--mono); font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--cx1); }
.cx-sum-l > b { font-family: var(--serif); font-weight: 400; font-size: 60px; line-height: .86; color: var(--gx-ttl); text-shadow: 0 4px 0 #050b08; white-space: nowrap; font-variant-numeric: tabular-nums; } .cx-sum-l > b i { font-style: normal; font-size: 40px; margin-left: 2px; color: var(--cxt); }
.cx-sum-l > em { font-style: normal; font-size: 18px; color: var(--gx-txt-2); }
.cx-bar { display: block; height: 12px; background: #0b2118; box-shadow: inset 0 0 0 2px var(--gx-o); overflow: hidden; }
.cx-bar s { display: block; height: 100%; text-decoration: none; background: linear-gradient(var(--cxt) 0 2px, var(--cx1) 2px calc(100% - 3px), var(--cx3) calc(100% - 3px)); box-shadow: inset 0 0 0 2px var(--gx-o); }
.cx-sum-m { display: grid; grid-template-columns: repeat(3, 196px); gap: 10px; }
.cx-medal { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 10px; align-items: center; padding: 8px 10px 8px 8px; background: var(--well); box-shadow: var(--well-rim); }
.cx-medal .cx-md { grid-row: 1 / 4; width: 44px; height: 44px; }
.cx-medal > b { font-family: var(--sans); font-weight: 400; font-size: 26px; line-height: .95; white-space: nowrap; font-variant-numeric: tabular-nums; } .cx-medal > b i { font-style: normal; font-size: 18px; color: var(--gx-txt-2); }
.cx-medal.bronze > b { color: var(--b1); } .cx-medal.silver > b { color: var(--s1); } .cx-medal.gold > b { color: var(--g2); }
.cx-medal > span { font-size: 18px; line-height: 1.05; color: var(--gx-txt); overflow-wrap: break-word; } .cx-medal > em { font-style: normal; font-size: 18px; color: var(--gx-txt-2); }
.cx-sum-c { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 18px; }
/* los cuatro tipos, en columna como en caja: icono, nombre ..... cifra */
.cx-chip2 { display: grid; grid-template-columns: 26px minmax(0, max-content) minmax(6px, 1fr) auto; min-width: 0; align-items: baseline; gap: 8px; padding: 0; background: none; box-shadow: none; }
.cx-chip2::after { content: ""; grid-column: 3; grid-row: 1; border-bottom: 2px dotted currentColor; opacity: .32; transform: translateY(-5px); }
.cx-chip2 .ic { width: 26px; height: 26px; align-self: center; } .cx-chip2 b { min-width: 0; font-family: var(--sans); font-weight: 400; font-size: 18px; line-height: 1; overflow-wrap: break-word; }
.cx-chip2 em { grid-column: 4; font-style: normal; font-size: 20px; color: var(--cx1); white-space: nowrap; font-variant-numeric: tabular-nums; } .cx-chip2 em i { font-style: normal; font-size: 18px; color: var(--gx-txt-2); }
.cx-mtip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 6px 8px; pointer-events: none; white-space: nowrap; clip-path: var(--gx-notch);
  background: rgba(5, 18, 16, .95); box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px rgba(78, 227, 193, .55); } .cx-mtip.hidden { display: none; } .cx-mtip.flip { transform: translateX(calc(-100% - 28px)); }
.cx-mtip img { flex: none; box-shadow: 0 0 0 2px var(--gx-o); }   /* la medida, en linea: 20 px de alto y el ancho de su forma (js/codex.js, flagCss) */ .cx-mtip b { font-family: var(--sans); font-weight: 400; font-size: 20px; line-height: 1; } .cx-mtip em { font-style: normal; font-size: 18px; color: var(--cx1); }
.cx-leg { position: absolute; left: 0; bottom: 20px; right: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; width: max-content; max-width: calc(100% - 64px); padding: 8px 14px 9px; clip-path: var(--gx-notch);
  background: rgba(5, 18, 16, .92); box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px rgba(78, 227, 193, .4); font-size: 18px; color: var(--gx-txt-2); }
.cx-leg:empty { display: none; }
.cx-leg span { display: inline-flex; align-items: center; gap: 4px; } .cx-leg i { width: 14px; height: 14px; box-shadow: inset 0 0 0 2px var(--gx-o); }
.cx-leg .l0 { background: #5f6b5f; } .cx-leg .l1 { background: #9fcfba; } .cx-leg .l2 { background: #6fc7b2; } .cx-leg .l3 { background: #3fb7a3; } .cx-leg .l4 { background: #f2b24a; }
.cx-leg em { font-style: normal; color: var(--cxt); }

/* ---------- continente ---------- */
.cx-ch { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: stretch; margin-bottom: 6px; }
.cx-ch-l { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cx-ch-t { display: flex; align-items: center; gap: 16px; } .cx-ch-t > div { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.cx-ch-t p, .cx-ph-h p { margin: 0; font-size: 18px; line-height: 1.15; color: var(--gx-txt-2); }
.cx-ch-l > .cx-mb { height: 10px; }
.cx-jumps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 8px; margin-top: 2px; }
.cx-jump { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; padding: 6px 12px 8px; border: 0; border-radius: 0; cursor: pointer; text-align: left; color: var(--gx-txt);
  background: var(--well); box-shadow: var(--well-rim); transition: background .15s, box-shadow .15s; }
.cx-jump b { flex: 1 1 0; min-width: 0; font-family: var(--sans); font-weight: 400; font-size: 18px; line-height: 1.05; overflow-wrap: break-word; } .cx-jump em { font-style: normal; font-size: 18px; color: var(--cx1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-jump:hover { background: rgba(78, 227, 193, .12); box-shadow: inset 0 0 0 2px var(--cx1); } .cx-jump.full { box-shadow: inset 0 0 0 2px var(--g3); }
.cx-reg { margin-top: 26px; scroll-margin-top: 8px; content-visibility: auto; contain-intrinsic-size: auto 420px; }
.cx-rh { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; padding: 0 4px 10px; margin-bottom: 14px; border-bottom: 2px solid rgba(78, 227, 193, .25); }
.cx-rh > div { display: grid; gap: 4px; min-width: 0; } .cx-rh b { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1; color: var(--gx-ttl); text-shadow: 0 3px 0 #050b08; }
.cx-rh i { font-style: normal; font-size: 18px; color: var(--gx-txt-2); }
.cx-rh-r { display: grid; justify-items: end; gap: 8px; } .cx-rh-r em { font-style: normal; font-size: 26px; line-height: 1; color: var(--cx1); font-variant-numeric: tabular-nums; } .cx-rh-r .cx-mb { width: 160px; }
.cx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; padding: 8px 6px 0 0; }   /* sitio para la etiqueta de novedades de la ultima columna */
.cx-ct { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 8px; align-items: center; padding: 10px 12px 10px 10px;
  border: 0; border-radius: 0; cursor: pointer; text-align: left; color: var(--gx-txt); background: var(--well); box-shadow: var(--well-rim); transition: transform .15s steps(2, end), box-shadow .15s, background .15s; }
.cx-ct:hover { transform: translateY(-2px); background: rgba(78, 227, 193, .1); box-shadow: inset 0 0 0 2px var(--cx1); }
.cx-ct:focus { outline: none; } .cx-ct:focus-visible, html[data-input="pad"] .cx-ct:focus { box-shadow: inset 0 0 0 2px #fff; }
.cx-ct-f { position: relative; width: 72px; height: 48px; display: grid; place-items: center; overflow: hidden; background: #0d2219; box-shadow: 0 0 0 2px var(--gx-o); }
.cx-ct-f .cx-flag { box-shadow: 0 0 0 2px var(--gx-o); } .cx-ct-f:has(> .cx-flag) { background: none; box-shadow: none; overflow: visible; } .cx-ct.teased .cx-sil { visibility: hidden; }   /* la bandera entera y a su forma en el hueco de 72x48: el filete la abraza a ella, no al hueco */ .cx-ct-f > .ic { width: 40px; height: 40px; } .cx-ct-f > b { font-family: var(--serif); font-size: 34px; color: rgba(78, 227, 193, .55); }
.cx-sil { width: 72px; height: 48px; image-rendering: pixelated; } .cx-ct-f.q .cx-sil { display: none; }
.cx-ct-f.q::after, .cx-gh-f.q::after { content: "?"; font-family: var(--serif); font-size: 34px; line-height: 1; color: rgba(78, 227, 193, .55); }
.cx-ct-t { grid-column: 2 / -1; display: grid; gap: 3px; min-width: 0; } .cx-ct-t b { font-family: var(--sans); font-weight: 400; font-size: 21px; line-height: 1; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cx-ct-t i { font-style: normal; font-size: 18px; color: var(--gx-txt-2); }
.cx-ct-p { grid-row: 2; grid-column: 3; font-style: normal; font-size: 18px; line-height: 1; color: var(--cx1); align-self: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-ct > .cx-mb { grid-row: 2; grid-column: 1 / 3; height: 6px; }
.cx-ct > u, .cx-card .cx-new { position: absolute; top: -6px; right: -4px; z-index: 4; text-decoration: none; font-size: 16px; line-height: 1.1; color: #fff; background: var(--gx-red); padding: 1px 6px 3px; box-shadow: inset 0 0 0 2px var(--gx-o); }
.cx-ct.unk .cx-ct-t b { letter-spacing: .18em; color: var(--gx-txt-2); } .cx-ct.unk .cx-ct-p { color: rgba(78, 227, 193, .45); }
.cx-ct.full { background: rgba(96, 62, 12, .45); box-shadow: inset 0 0 0 2px var(--g3); } .cx-ct.full .cx-ct-p { color: var(--g2); }

/* ---------- pais ---------- */
.cx-gh { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 22px; align-items: start; margin-bottom: 4px; }
/* la bandera, en su naipe de papel */
.cx-gh-f { position: relative; display: grid; place-items: center; width: 216px; aspect-ratio: 3 / 2; padding: 8px; border: 0; border-radius: 0; cursor: pointer; background: var(--gx-card);
  box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 -4px 0 2px var(--gx-paper-lo); transition: transform .15s steps(2, end); box-sizing: content-box; }
.cx-gh-f:hover { transform: translateY(-2px); } .cx-gh-f.nofile { cursor: default; } .cx-gh-f.nofile:hover { transform: none; }
.cx-gh-f .cx-flag { position: absolute; inset: 8px; margin: auto; max-width: calc(100% - 16px); max-height: calc(100% - 16px); box-shadow: 0 0 0 2px var(--gx-o); }   /* entera y a su forma dentro del hueco 3:2, mida 216 o 168 px (la imagen, de 168 px de alto, siempre se reduce) */ .cx-gh-f > .ic { width: 96px; height: 96px; image-rendering: pixelated; }
.cx-gh-f.unk { background: repeating-linear-gradient(45deg, rgba(78, 227, 193, .1) 0 2px, transparent 2px 9px), #0d2e30; box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px rgba(78, 227, 193, .35); }
.cx-sil.big { width: 192px; height: 128px; } .cx-gh-f.q .cx-sil { display: none; } .cx-gh-f.q::after { font-size: 81px; }
.cx-gh-f .cx-pips { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); padding: 4px 6px; background: var(--gx-card); box-shadow: inset 0 0 0 2px var(--gx-o); }
.cx-gh-t { display: grid; gap: 10px; min-width: 0; }
/* lo que dice de donde es: una linea de texto (antes, pastillas en mayusculas) */
.cx-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0; font-size: 18px; color: var(--cxt); }
.cx-tags span { display: inline-flex; align-items: center; gap: 6px; } .cx-tags span + span::before { content: "·"; margin: 0 8px; opacity: .55; }
.cx-tags .ic.sm { width: 20px; height: 20px; margin: 0; } .cx-tflag { flex: none; box-shadow: 0 0 0 2px var(--gx-o); }
.cx-gh-s { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; } .cx-gh-s > span { font-size: 18px; color: var(--gx-txt-2); }
.cx-gh-t > .cx-mb { height: 10px; max-width: 560px; }
.cx-gh-d { margin: 0; max-width: 64ch; font-size: 19px; line-height: 1.35; color: var(--gx-txt-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cx-gh-d:empty { display: none; }
/* "Leer la ficha": un boton del sistema (naipe), con las pepitas de su carta */
.cx-readc { justify-self: start; } .cx-readc .ic.sm { width: 22px; height: 22px; margin: 0; }
.cx-sec2 { margin-top: 26px; content-visibility: auto; contain-intrinsic-size: auto 360px; }
.cx-sh { display: flex; align-items: center; gap: 12px; padding: 0 4px 9px; margin-bottom: 14px; border-bottom: 2px solid rgba(78, 227, 193, .22); }
.cx-sh .ic { width: 32px; height: 32px; } .cx-sh b { flex: 1; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1; color: var(--gx-ttl); text-shadow: 0 3px 0 #050b08; }
.cx-sh em { font-style: normal; font-size: 24px; color: var(--cx1); font-variant-numeric: tabular-nums; } .cx-sh em i { font-style: normal; font-size: 18px; color: var(--gx-txt-2); }
.cx-note { margin: -6px 4px 14px; font-size: 18px; color: var(--gx-txt-2); }
.cx-main.cx-rst :is(.cx-reg, .cx-sec2, .cx-sub2) { content-visibility: visible; }   /* al volver a una pagina: alturas reales para dejarte donde estabas */
.cx-sec3 { margin-top: 26px; } .cx-sub2 { margin: 4px 0 18px; content-visibility: auto; contain-intrinsic-size: auto 240px; }
.cx-sub2 h4 { display: flex; align-items: center; gap: 8px; margin: 0 4px 6px; font-weight: 400; } .cx-sub2 h4 .ic { width: 28px; height: 28px; image-rendering: pixelated; }
.cx-sub2 h4 b { font-family: var(--sans); font-weight: 400; font-size: 21px; } .cx-sub2 h4 em { font-style: normal; font-size: 18px; color: var(--cxt); }
.cx-ph-h { display: flex; align-items: center; gap: 16px; } .cx-ph-h > div { display: grid; gap: 6px; } .cx-ph-h p { max-width: 70ch; }

/* ---------- cartas: naipes de gala (papel con filete y esquina recta); boca abajo, el dorso del aparato ---------- */
.cx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px 12px; padding: 6px 2px 2px; perspective: 1100px; }   /* la perspectiva, en el padre directo de las cartas: si no, la inclinacion no se ve */
/* sin transformacion ni will-change en reposo: cada carta seria una capa de GPU (cientos en EE. UU.); la inclinacion solo con el raton encima */
.cx-card, .cx-big { --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%; --fr: transparent; position: relative; display: flex; flex-direction: column; text-align: left; color: var(--gx-ink); cursor: pointer; border: 0; border-radius: 0;
  background: var(--gx-card); transition: transform .25s ease-out, box-shadow .25s;
  box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px var(--fr), inset 0 -4px 0 4px var(--gx-paper-lo), 0 4px 0 rgba(2, 6, 4, .6); }
.cx-big:hover { transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.cx-card { padding: 8px 8px 10px; }
.cx-card:hover { transform: translateY(-5px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.03); z-index: 2; }
.cx-card:focus { outline: none; } .cx-card:focus-visible, html[data-input="pad"] .cx-card:focus { box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px #fff, 0 4px 0 rgba(2, 6, 4, .6); }
/* el filete de dentro dice la mejor medalla: bronce, plata u oro (el oro, ademas, con su brillo) */
.cx-card.m1, .cx-big.m1 { --fr: var(--b2); } .cx-card.m2, .cx-big.m2 { --fr: var(--s3); } .cx-card.m3, .cx-big.m3 { --fr: var(--g3); } .cx-card.mx, .cx-big.mx { --fr: var(--cx2); }
.cx-card.m3 { box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px var(--g3), inset 0 0 0 6px var(--g1), inset 0 -4px 0 6px var(--gx-paper-lo), 0 4px 0 rgba(2, 6, 4, .6), 0 0 14px rgba(248, 180, 73, .3); }
.cx-card .cx-art, .cx-big .cx-art { position: relative; display: grid; place-items: center; overflow: hidden; background: linear-gradient(160deg, #1a4533, #0b2118); color: rgba(242, 233, 214, .35); box-shadow: 0 0 0 2px var(--gx-o); }
.cx-card .cx-art { aspect-ratio: 4 / 3; }
.cx-art .cx-ic { position: relative; width: 46%; height: auto; image-rendering: pixelated; z-index: 0; }
.cx-art > img.cx-th, .cx-art > img#cxHero { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; animation: cx-fade .5s both; } .cx-art > img#cxHero { animation: none; }   /* la foto grande sale ya puesta: sin velo ni fundido */ @keyframes cx-fade { from { opacity: 0; } }
.cx-art.flag > img.cx-th, .cx-art.flag > img#cxHero { object-fit: contain; background: var(--gx-ink); }   /* banderas enteras, sin recortar el centro */
.cx-art > img.cx-photo, #cxLight > img.cx-photo { image-rendering: auto; }   /* fotos de Wikipedia/Commons: se reducen suavizadas (gana a ".cx-art img" de uikit.css); ilustraciones e iconos siguen en pixel nitido */
.cx-pn { display: block; font-family: var(--sans); font-weight: 400; font-size: 18px; line-height: 1.02; overflow-wrap: break-word; hyphens: auto; }
.cx-card .cx-pn { margin-top: 8px; min-height: 36.7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-sub { display: block; margin-top: 2px; font-size: 16px; line-height: 1.1; color: var(--gx-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-card .cx-pips, .cx-card .cx-kind { margin-top: auto; padding-top: 7px; }
.cx-kind { display: block; font-size: 16px; line-height: 1.1; color: var(--gx-ink-2); }
.cx-card .cx-new { top: 12px; right: 12px; }   /* dentro de la carta: en la ultima columna el borde de la pagina la cortaba */
/* boca abajo: el dorso del aparato, la rejilla de fosforo y la silueta del tipo */
.cx-card.locked, .cx-big.locked { color: rgba(159, 233, 214, .6);
  background: repeating-linear-gradient(45deg, rgba(78, 227, 193, .1) 0 2px, transparent 2px 10px), linear-gradient(160deg, #134a52, #0b2d33);
  box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px rgba(78, 227, 193, .35), 0 4px 0 rgba(2, 6, 4, .6); }
.cx-card.locked .cx-art, .cx-big.locked .cx-art { background: transparent; box-shadow: none; }
.cx-bk { position: relative; display: grid; place-items: center; width: 58%; aspect-ratio: 1; background: rgba(6, 30, 36, .65); box-shadow: inset 0 0 0 2px rgba(78, 227, 193, .35); }
.cx-bk .cx-ic { width: 70%; filter: brightness(0) invert(.85) sepia(1) hue-rotate(120deg) saturate(2); opacity: .3; }
.cx-card.locked .cx-pn { letter-spacing: .2em; color: rgba(159, 233, 214, .55); }
.cx-card.locked .cx-pips i { background: transparent; box-shadow: inset 0 0 0 2px rgba(78, 227, 193, .35); } .cx-card.locked .cx-kind, .cx-card.locked .cx-sub { color: rgba(159, 233, 214, .55); }
.cx-card.locked:hover { box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px rgba(78, 227, 193, .7), 0 6px 0 rgba(2, 6, 4, .6); }
.cx-card .cx-tease { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; image-rendering: auto; }
/* brillo del oro: la carta clavada en sus tres medallas */
.cx-card.open.m3:hover::after, .cx-big.open.m3 .cx-foil { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: .8;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .7), transparent 45%), conic-gradient(from 210deg at var(--gx) var(--gy), #ffd86b, #fff3c4, #f8b449, #ffe08a, #ffd86b); }
.cx-card.fresh { animation: cx-pop .7s var(--spring) both; } @keyframes cx-pop { from { transform: translateY(10px) rotate(-6deg); } }

/* ---------- la carta abierta ---------- */
.cx-d1 { display: grid; gap: 14px; max-width: 900px; animation: cx-up .45s var(--spring) both; } @keyframes cx-up { from { opacity: 0; transform: translateY(18px); } }
.cx-dtop { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 22px; align-items: start; }
.cx-dinfo { display: grid; gap: 10px; min-width: 0; align-content: start; }
.cx-d-card { perspective: 1000px; display: grid; gap: 10px; justify-items: start; }
.cx-big { width: 236px; padding: 12px 12px 14px; cursor: default; }
.cx-big.m3 { box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px var(--g3), inset 0 0 0 6px var(--g1), inset 0 -4px 0 6px var(--gx-paper-lo), 0 4px 0 rgba(2, 6, 4, .6), 0 0 22px rgba(248, 180, 73, .3); }
.cx-big .cx-art { aspect-ratio: 1; } .cx-big .cx-art .cx-ic { width: 34%; } .cx-big .cx-art img#cxHero { cursor: zoom-in; }
.cx-big.locked .cx-bk { width: 52%; } .cx-big .cx-art .ic.q { width: 22%; right: 6%; bottom: 6%; }
.cx-cap { padding-top: 12px; display: grid; gap: 6px; } .cx-big .cx-pn { font-size: 26px; } .cx-mt { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 18px; }
.cx-mt em { font-style: normal; color: var(--gx-ink-2); } .cx-big.locked .cx-mt em { color: rgba(159, 233, 214, .6); }
.cx-dmeds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 236px; }
.cx-dmeds > span { display: grid; justify-items: center; gap: 2px; padding: 6px 4px 6px; background: var(--well); box-shadow: var(--well-rim); }
.cx-dmeds .cx-md { width: 40px; height: 40px; } .cx-dmeds em { font-style: normal; font-size: 18px; white-space: nowrap; color: var(--gx-txt-2); }
.cx-credit { margin: 0; font-size: 18px; line-height: 1.3; color: var(--gx-txt-2); opacity: .8; overflow-wrap: break-word; } .cx-credit a { color: inherit; }
/* la lupa de la foto en HD: un boton del aparato */
.cx-hd { position: absolute; z-index: 2; right: 8px; bottom: 8px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; cursor: zoom-in; clip-path: var(--gx-notch);
  background: linear-gradient(#2a3631 0 3px, #1b2521 3px calc(100% - 5px), #0c1310 calc(100% - 5px)); box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px rgba(212, 160, 74, .55); transition: transform .12s steps(2, end); }
.cx-hd:hover { transform: translateY(-2px); } .cx-hd .ic { width: 26px; height: 26px; image-rendering: pixelated; }
.cx-d-body { min-width: 0; display: grid; gap: 12px; align-content: start; }
.cx-coord .ic.sm { width: 18px; height: 18px; margin: 0 6px 0 0; vertical-align: -3px; }
.cx-d-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cx-steps { display: inline-flex; align-items: center; gap: 8px; } .cx-steps em { font-style: normal; font-size: 18px; color: var(--gx-txt-2); font-variant-numeric: tabular-nums; }
.cx-step.gx-btn { min-height: 36px; width: 40px; padding: 0 0 4px; font-size: 28px; justify-content: center; }
.cx-desc { margin: -4px 0 0; font-size: 20px; line-height: 1.15; color: var(--gx-acc); }
.cx-fact { margin: 0; padding: 4px 0 4px 16px; border-left: 4px solid var(--gx-red); font-family: var(--sans); font-style: normal; font-size: 21px; line-height: 1.25; }
/* capitulos: pozos dentro del cristal, con el filete de su medalla */
.cx-chap { padding: 12px 18px 8px; background: var(--well); box-shadow: var(--well-rim); scroll-margin-top: 10px; }
.cx-chap.on.bronze { box-shadow: inset 0 0 0 2px rgba(208, 127, 69, .7); } .cx-chap.on.silver { box-shadow: inset 0 0 0 2px rgba(200, 203, 216, .65); }
.cx-chap.on.gold { box-shadow: inset 0 0 0 2px rgba(245, 166, 35, .8); } .cx-chap.on.single { box-shadow: inset 0 0 0 2px rgba(78, 227, 193, .55); }
.cx-chap:not(.on) { background: rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .07); }
.cx-chap h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; } .cx-chap h3 .cx-md { width: 40px; height: 40px; } .cx-chap h3 > .cx-ic { width: 36px; height: 36px; }
.cx-chap h3 b { flex: 1; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1; color: var(--gx-ttl); } .cx-chap:not(.on) h3 b { color: var(--gx-txt-2); }
.cx-chap h3 em { font-style: normal; font-size: 18px; color: var(--gx-txt-2); white-space: nowrap; }
.cx-chb p, .cx-chb h4 { margin: 0 0 10px; max-width: 70ch; font-size: 19px; line-height: 1.45; color: var(--gx-txt); }
.cx-chb h4 { margin-top: 14px; font-family: var(--mono); font-weight: 400; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--cx1); }
/* foto propia de la Historia y del Dato clave: a la derecha, el texto la rodea; clic = HD */
.cx-chb::after { content: ""; display: block; clear: both; }
.cx-fig { float: right; width: min(46%, 520px); margin: 4px 0 12px 22px; }
.cx-figb { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; overflow: hidden; cursor: zoom-in; background: var(--gx-o); box-shadow: 0 0 0 2px var(--gx-o), 0 4px 0 rgba(2, 6, 4, .5); }
.cx-figb img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; animation: cx-fade .3s both; transition: transform .6s var(--spring); }
.cx-figb:hover img { transform: scale(1.04); } .cx-figb .cx-hd { pointer-events: none; }
.cx-fig figcaption { margin-top: 8px; font-size: 16px; line-height: 1.3; color: var(--gx-txt-2); opacity: .8; overflow-wrap: break-word; } .cx-fig figcaption a { color: inherit; }
.cx-lockl { display: flex; align-items: flex-start; gap: 8px; color: var(--gx-txt-2) !important; } .cx-lockl .ic.sm { flex: none; width: 20px; height: 20px; margin: 2px 0 0; opacity: .7; }
.cx-load { font-size: 18px !important; color: var(--gx-txt-2) !important; animation: blink 1.4s ease-in-out infinite; } .cx-load.err { animation: none; }
.cx-src { margin: 0; font-size: 18px; color: var(--gx-txt-2); opacity: .8; } .cx-src a { color: var(--gx-acc); } .cx-src:empty { display: none; }
.cx-sec { margin-top: 10px; } .cx-sec h3 { margin: 0 0 10px; font-family: var(--mono); font-weight: 400; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--cx1); display: flex; align-items: center; gap: 10px; }
.cx-sec h3::after { content: ""; flex: 1; height: 2px; background: rgba(78, 227, 193, .2); }
.cx-rels { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-rel { display: inline-flex; align-items: center; gap: 8px; font: 400 18px var(--sans); color: var(--gx-txt); background: var(--well); border: 0; border-radius: 0; box-shadow: var(--well-rim); padding: 5px 12px 7px 8px; cursor: pointer; transition: transform .12s steps(2, end), box-shadow .15s, background .15s; }
.cx-rel:hover { background: rgba(78, 227, 193, .12); box-shadow: inset 0 0 0 2px var(--cx1); transform: translateY(-2px); } .cx-rel .cx-ic { width: 22px; height: 22px; } .cx-rel.lk { color: var(--gx-txt-2); letter-spacing: .1em; }
.cx-rel .cx-pips i { width: 9px; height: 9px; } .cx-rel .cx-pips i:not(.on) { background: transparent; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.cx-mini { width: 100%; max-width: 480px; height: 210px; display: block; box-shadow: 0 0 0 2px var(--gx-o), inset 0 0 0 2px rgba(78, 227, 193, .3); }
.cx-coord { margin: 6px 0 0; font-size: 18px; color: var(--gx-txt-2); font-variant-numeric: tabular-nums; }
/* visor HD: toda la ventana (tambien los lados del lienzo en pantallas anchas) y la foto entera, encogida para caber sin scroll. La celda de la rejilla
   tiene alto fijo (minmax(0, 1fr)): con una fila "auto" el max-height en % no limitaba nada y las fotos altas se salian por abajo */
.cx-light { --lx: calc((min(1480px, 100 * var(--vw)) - 100 * var(--vw)) / 2); position: absolute; inset: 0 var(--lx); z-index: 3; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;
  padding: 58px 64px 50px; background: rgba(2, 8, 7, .95); cursor: zoom-out; } .cx-light.hidden { display: none; }
.cx-light img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; animation: cx-fade .3s both; box-shadow: 0 0 0 2px var(--gx-o), 0 0 0 4px rgba(78, 227, 193, .3), 0 20px 80px #000; }
.cx-light p { position: absolute; bottom: 14px; left: 0; right: 0; margin: 0; text-align: center; font-size: 18px; color: var(--gx-txt-2); } .cx-lx { position: absolute; top: 14px; right: 16px; font-size: 22px; color: var(--gx-txt); background: none; border: 0; cursor: pointer; }

/* ---------- aviso de tarjeta nueva ---------- */
.cx-toast { position: absolute; z-index: 11; right: 16px; bottom: 16px; display: flex; gap: 12px; align-items: center; text-align: left; max-width: min(420px, calc(calc(100 * var(--vw)) - 32px)); padding: 10px 16px 14px 10px; cursor: pointer; color: var(--ink); background: var(--paper); background-image: var(--paper-grain); border: 0; box-shadow: inset 0 0 0 2px var(--ink), 0 10px 0 -2px rgba(0,0,0,.35); }
.cx-toast.hidden { display: none; } .cx-toast.in { animation: cx-toast .7s var(--spring) both; } @keyframes cx-toast { from { transform: translateX(120%) rotate(6deg); opacity: 0; } }
/* v0.3.20: el aviso es un monton de polaroids. Cada tarjeta cae desde un lado al azar, con su giro y su sitio en el monton al azar
   (js/codex.js, toastShow), y su foto hace el zoom lento de una diapositiva. Ancho --pw: lo ajusta el JS al alto libre de la ventana */
.cx-toast.pile { display: block; padding: 12px 0 12px; background: none; box-shadow: none; border-radius: 0; }
#leftCol .cx-toast.pile.in { animation: none; }   /* entra la primera polaroid cayendo, no el aviso entero */
#leftCol .cx-toast.pile { width: auto; align-self: flex-start; } .cx-toast.pile .cx-ri { max-width: none; }   /* mide lo que la polaroid: el contador queda en su esquina */
.cx-toast.pile.slim .cx-tcard { aspect-ratio: 16 / 10; } .cx-toast.pile.slim .cx-tt b { font-size: 24px; } .cx-toast.pile.slim .cx-tt i { -webkit-line-clamp: 3; }   /* ventanas bajas (960 x 600) */
/* v0.3.172: el monton no cabe sobre la nota (ventana minima): la tapa entera y la nota se aparta mientras dura (js/codex.js) */
body:has(#cxToast.on-note:not(.hidden):not(.out)) #note { opacity: 0; }   /* con el fundido que ya tiene la nota (css/uikit.css) */
.cx-reel { position: relative; display: grid; justify-items: center; overflow: visible; }
.cx-ri { grid-area: 1 / 1; position: relative; width: var(--pw, 90%); max-width: 100%; display: grid; gap: 8px; padding: 10px 10px 12px; text-align: left; color: var(--ink); background: var(--paper); background-image: var(--paper-grain); box-shadow: inset 0 0 0 2px var(--ink), 0 12px 18px rgba(0, 0, 0, .42); visibility: hidden; transform-origin: 50% 85%; }
.cx-ri.on, .cx-ri.under { visibility: visible; }
.cx-ri.under { filter: brightness(.84); } .cx-ri.under .cx-tmed { visibility: hidden; }   /* la medalla solo en la de arriba: abajo asomaban todas en la esquina */
.cx-tcard { --rc: var(--ink); position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; box-shadow: 0 0 0 2px var(--rc); }
.cx-tcard.m1 { --rc: #a45530; } .cx-tcard.m2 { --rc: #9095ab; } .cx-tcard.m3 { --rc: #f5a623; }
.cx-tcard .cx-art { position: relative; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; background: var(--ink); color: rgba(242,233,214,.5); } .cx-tcard .cx-ic { width: 34%; }
.cx-tcard .cx-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transform-origin: var(--ko, 50% 50%); } .cx-tcard .cx-art.flag > img { object-fit: contain; transform: none; }
.cx-ri.kb .cx-art:not(.flag) > img { animation: cx-kb 9s ease-out both; } @keyframes cx-kb { to { transform: scale(1.15); } }   /* el zoom lento de documental */
.cx-tmed { position: absolute; z-index: 2; left: -10px; top: -11px; width: 44px; height: 44px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); } .cx-tmed .ic { width: 100%; height: 100%; image-rendering: pixelated; }
.cx-cnt { position: absolute; z-index: 99; right: 2px; bottom: 0; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--paper); background: var(--ink); padding: 5px 8px 4px; pointer-events: none; font-variant-numeric: tabular-nums; }
html.reduce-motion .cx-ri.kb .cx-art > img { animation: none; }
.cx-toast.out { animation: cx-toast-out .34s ease-in both; } @keyframes cx-toast-out { to { transform: translateX(120%); opacity: 0; } }
.cx-tt { display: grid; gap: 3px; min-width: 0; padding: 0 4px; } .cx-tt em { font-style: normal; font-family: var(--mono); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: var(--red-deep); } .cx-tt b { font-family: var(--serif); font-variation-settings: var(--disp); font-weight: 800; font-size: 30px; line-height: .95; } .cx-tt s { text-decoration: none; font-family: var(--mono); font-size: 14px; letter-spacing: .04em; color: var(--muted, #5b6a5f); } .cx-tt i { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-style: normal; font-family: var(--mono); font-size: 14px; line-height: 1.3; color: var(--ink-2); margin-top: 2px; }

/* ---------- por aspecto ---------- */
html[data-skin="casino"] .cx-toast { border-radius: 14px; }

/* ---------- pagina estrecha (ventanas de 960-1280 px, donde --k ya no baja de 1): se decide por el ancho real de la pagina ---------- */
.cx-main { container-type: inline-size; container-name: cxm; }
@container cxm (max-width: 760px) {
  .cx-sum, .cx-shell.stage[data-v="home"] .cx-sum { grid-template-columns: minmax(0, 1fr); gap: 12px; } .cx-sum-m { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cx-sum-l > b { font-size: 44px; }
  .cx-medal > b { font-size: 22px; }
  .cx-sum-c, .cx-shell.stage[data-v="home"] .cx-sum-c { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container cxm (max-width: 1000px) {
  .cx-gh { grid-template-columns: 168px minmax(0, 1fr); gap: 18px; } .cx-gh-f { width: 168px; } .cx-sil.big { width: 144px; height: 96px; }
  .cx-dtop { grid-template-columns: 208px minmax(0, 1fr); gap: 18px; } .cx-big, .cx-dmeds { width: 208px; }
  .cx-main h2 { font-size: 36px; }
}
@container cxm (max-width: 500px) { .cx-gh, .cx-dtop { grid-template-columns: minmax(0, 1fr); } .cx-sum-c { grid-template-columns: minmax(0, 1fr); } }
/* ventanas bajas: el indice entero sin desplazarse */
@media (max-height: 680px) and (min-width: 900px) {
  .cx-head { padding: 12px 0 10px; } .cx-ttl h2 { font-size: 48px; } .cx-tic .ic { width: 40px; height: 40px; }
  .cx-nav { padding: 8px 10px 10px; } .cx-nav hr { margin: 2px 6px; } .cx-nv { min-height: 40px; padding: 4px 8px 9px 6px; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 8px; }
  .cx-nvi, .cx-nvi .ic { width: 28px; height: 28px; } .cx-nv .cx-mb { left: 42px; bottom: 3px; height: 3px; }
}

/* ---------- ventanas pequenas y moviles (alli si se desplaza todo) ---------- */
@media (max-width: 899px), (max-height: 519px) {
  .cx-shell { padding: 0 12px; } .cx-head { grid-template-columns: auto minmax(0, 1fr); gap: 10px; } .cx-search { grid-column: 1 / -1; } .cx-back b { display: none; } .cx-ttl h2 { font-size: 36px; }
  .cx-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
  .cx-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 8px; } .cx-nav hr { display: none; } .cx-nv { min-width: 170px; }
  .cx-sum { grid-template-columns: minmax(0, 1fr); } .cx-sum-m { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cx-medal { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .cx-medal .cx-md { grid-row: auto; }
  .cx-sum-c { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cx-main.v-home { display: block; }
  .cx-gh, .cx-dtop { grid-template-columns: minmax(0, 1fr); } .cx-gh-f { width: min(216px, 100%); } .cx-d-card { justify-items: center; }
  .cx-main h2 { font-size: 36px; } .cx-cards { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
  .cx-toast { bottom: auto; top: 64px; right: 8px; } .cx-brk { display: none; }
}
html.reduce-motion .cx-d1, html.reduce-motion .cx-card.fresh { animation: none !important; } html.reduce-motion .cx-card, html.reduce-motion .cx-big, html.reduce-motion .cx-ct, html.reduce-motion .cx-nv { transition: none; }
html.reduce-motion .cx-card.fresh, html.reduce-motion .cx-d1 { animation: none !important; }
/* coreano: el hangul se corta por palabras (con break-word partia "정확도 올리/기"); japones: por frases donde hay sitio */
html:lang(ko) #codex :is(.cx-nv b, .cx-jump b, .cx-ct-t b, .cx-pn, .cx-rh b, .cx-main h2, .cx-sh b) { word-break: keep-all; overflow-wrap: anywhere; }
html:lang(ja) #codex :is(.cx-nv b, .cx-ct-t b, .cx-pn) { word-break: auto-phrase; }
/* el crupier ensena 3 s un pais sin descubrir: su bandera sobre la silueta */
.cx-ct-f .cx-tease { position: absolute; inset: 0; margin: auto; z-index: 2; }

/* banderas pixel art de cada pais en las tarjetas relacionadas (assets/flags/p, tools/flags_pixel.py) */
.cx-pxf { image-rendering: pixelated; object-fit: contain; }
.cx-rel .cx-ic.cx-pxf { width: 26px; height: 26px; margin: -2px 0; }


/* encuadre de las fotos (js/codex.js, fitPhoto): los retratos no pierden la frente y lo que no cabe se ve entero */
.cx-art > img.cx-photo.fit-top, .cx-figb img.cx-photo.fit-top { object-position: 50% 18%; }
.cx-art > img.cx-photo.fit-all, .cx-figb img.cx-photo.fit-all { object-fit: contain; object-position: 50% 50%; }