/* Geolite · uikit: tooltips propios y destello del puntero (los tooltips van por encima de todo, tambien del crupier: z-index 100030) */
.tt { position: fixed; left: 0; top: 0; z-index: 100030; max-width: min(300px, calc(86 * var(--vw))); padding: 8px 12px 9px; pointer-events: none; opacity: 0; transition: opacity .12s ease;
  background: linear-gradient(#123424, #0c2018); color: #e9f5ec; font-family: var(--mono); font-size: 15.5px; line-height: 1.4; letter-spacing: .01em;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .45)); will-change: transform; }
.tt::before { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px #f8b449, inset 0 0 0 4px #1f5c40; }
.tt.on { opacity: 1; }
.tt b { display: block; font-weight: 800; color: #ffd87a; letter-spacing: .05em; text-transform: uppercase; font-size: 14px; margin: 0 0 1px; }
.tt span { display: block; white-space: pre-line; color: #cfe8da; }
.tt b:only-child { text-transform: none; letter-spacing: .01em; font-size: 15.5px; color: #f7e9c4; font-weight: 700; }
.tt .tt-k { display: inline-block; margin-left: 6px; padding: 0 6px; background: #1f5c40; color: #ffd87a; border-radius: 3px; }
.tt em { font-style: normal; color: #7be04a; } .tt em.bad { color: #ff7d6e; } .tt em.gold { color: #ffd87a; }
.gc-burst { position: fixed; z-index: 100001; width: 0; height: 0; pointer-events: none; }
.gc-burst i { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; background: #fff3cf; box-shadow: 0 0 0 1px #16241c; animation: gcb .5s ease-out forwards; }
.gc-burst i.g { background: #f8b449; }
@keyframes gcb { to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
html.reduce-motion .gc-burst { display: none; } html.reduce-motion .tt { transition: none; }
.kt { display: inline-flex; }

/* ---------------------------------------------------------------- ajustes: pestanas y filas */
.row-sw.off { opacity: .45; }
.rs-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* ---------------------------------------------------------------- navegador de canciones (aviso + ajustes) */
.np { position: relative; display: flex; align-items: center; gap: 4px; padding: 5px; background: linear-gradient(#123424, #0c2018); color: #f8e2a6; font-family: var(--mono);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px); }
.np::before { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px #f8b449, inset 0 0 0 4px #1f5c40; }
#np { position: fixed; right: 16px; bottom: 16px; z-index: 9000; transform: translate(0, 34px); opacity: 0; pointer-events: none; transition: opacity .35s ease, transform .4s var(--spring); filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .4)); }
#np.show { opacity: 1; transform: translate(0, 0); pointer-events: auto; }
.np-t { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 0 12px; min-width: 190px; max-width: calc(52 * var(--vw)); }
.np-t b { font-size: 15.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-t em { font-style: normal; font-size: 14px; opacity: .55; }
.np-note { font-style: normal; color: #f8b449; }
.np-b { position: relative; width: 30px; height: 30px; display: grid; place-items: center; background: #1f5c40; transition: background .15s, transform .12s; }
.np-b:hover:not(:disabled) { background: #f8b449; } .np-b:active:not(:disabled) { transform: scale(.92); } .np-b:disabled { opacity: .4; }
.np-tri { width: 0; height: 0; border: 6px solid transparent; border-width: 6px 0 6px 9px; border-left-color: #ffd87a; } .np-tri.l { border-width: 6px 9px 6px 0; border-left-color: transparent; border-right-color: #ffd87a; }
.np-b:hover:not(:disabled) .np-tri.r { border-left-color: #16241c; } .np-b:hover:not(:disabled) .np-tri.l { border-right-color: #16241c; }
.np-set { width: 100%; margin: 10px 0 4px; justify-content: space-between; } .np-set .np-t { flex: 1; min-width: 0; } .np-set.off { opacity: .45; }
html.reduce-motion #np { transition: opacity .2s; transform: translate(0, 0); }

/* ==================================================================== revision v0.12: maquetacion y pulido */
/* ticket: puntos x racha (antes salia sin estilo: "Fichas819 × Mult · Racha 21.2") */
.tk-mult { display: flex; justify-content: center; gap: 8px; margin: 8px 0 4px; }
.tk-mult > div { display: grid; justify-items: center; gap: 2px; min-width: 104px; padding: 6px 14px 7px; border-radius: 10px; color: #fff; box-shadow: inset 0 0 0 2px #16241c, 0 4px 0 rgba(0, 0, 0, .35); }
.tk-mult .c { background: #2f7bf5; } .tk-mult .m { background: #fe5f55; }
.tk-mult span { font-family: var(--mono); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; opacity: .9; }
.tk-mult b { font-family: var(--serif); font-weight: 900; font-size: 24px; line-height: 1; color: #fff; }
/* sacudida suave al encadenar racha (la clase existia pero no tenia estilo) */
#app.shake { animation: app-shake .38s ease; }
@keyframes app-shake { 20% { transform: translate(-3px, 1px); } 40% { transform: translate(3px, -1px); } 60% { transform: translate(-2px, 0); } 80% { transform: translate(1px, 1px); } }
/* rabieta del crupier: temblor de toda la pantalla (juego + dialogo, via el truco de transform en html) y apagon total con luz de vuelta */
html.dl-tantrum { animation: dl-tantrum .7s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes dl-tantrum { 10%, 90% { transform: translate3d(-2px, 0, 0); } 20%, 80% { transform: translate3d(4px, -3px, 0); } 30%, 50%, 70% { transform: translate3d(-8px, 4px, 0); } 40%, 60% { transform: translate3d(8px, -4px, 0); } }
/* Ajustes > Vibracion = no (html.no-shake, js/game.js applyShake): fuera todos los temblores de pantalla. La racha y la rabieta no se mueven,
   el puñetazo de Cristal roto tampoco, y el glitch del crupier al tocar el mapa se queda solo en color. Los retos que tiemblan (Terremoto...) siguen */
html.no-shake.dl-tantrum, html.no-shake #app.shake, html.no-shake #app.chx-punch { animation: none; }
html.reduce-motion.dl-tantrum { animation: none; }   /* "reducir movimiento" (html.reduce-motion *) no alcanza al propio <html>, que es quien tiembla en la rabieta */
html.no-shake #app.ch-glitch #map, html.no-shake #app.ch-glitch #fx { animation-name: ch-glitch-still; }
@keyframes ch-glitch-still { 16% { filter: hue-rotate(80deg) saturate(2.2) contrast(1.3); } 33% { filter: brightness(1.6); } 50% { filter: hue-rotate(-70deg) saturate(1.8); } 75% { filter: contrast(1.4); } }
#dlBlackout { position: fixed; inset: 0; z-index: 9000; background: #000; opacity: 0; pointer-events: none; }
#dlBlackout.go { animation: dl-blackout 1.3s ease both; }
@keyframes dl-blackout { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
/* las cartas de herramienta siempre por encima del pie de pagina (su altura cambia con las pistas) */
#toolBar.tool-bar { bottom: calc(var(--note-top, 88px) + 12px); }
/* veredicto: cabe en pantallas de 768 px de alto y el crupier habla en su hueco, sin tapar botones */
.dealer.inline { position: relative; left: auto; bottom: auto; z-index: 100010; transform: translateX(-24px); }
.dealer.inline.in { transform: none; }
.dealer.inline .dl-face { width: 224px; height: 224px; }
.dealer.inline .dl-bubble { margin: 0 0 42px 0; max-width: min(440px, calc(62 * var(--vw))); }
body.vd-on .cx-toast { display: none; }
/* la marca del HUD sobra en el menu principal (ya esta el logo grande) */
body.title-on .brand-sh { opacity: 0; pointer-events: none; }
/* ticket de resultado: por debajo del marcador (antes lo tapaba en pantallas de 720-800 px de alto) y compacto si falta altura */
@media (min-width: 901px) {
  #dlg.side { place-self: start end; margin: 148px 24px 0 0; max-height: calc(calc(100 * var(--vh)) - 160px); overflow-y: auto; scrollbar-width: none; }
  #dlg.side::-webkit-scrollbar { display: none; }
}
@media (min-width: 901px) and (max-height: 820px) {
  #dlg.side { margin-top: 142px; }
  .tk-title { font-size: 26px; margin-top: 10px; } .tk-km { font-size: 48px; margin-top: 4px; } .tk-perf { margin: 8px -26px 8px; }
  .tk-total { margin: 6px 0 10px; } .tk-total .odo { font-size: 36px; } .tk-mult { margin: 4px 0 2px; } .tk-mult > div { padding: 4px 12px 5px; } .tk-mult b { font-size: 20px; }
  .ticket .btn-ink { padding-top: 10px; padding-bottom: 10px; }
}
@media (min-width: 901px) and (max-width: 1320px) { #dlg.side { margin-top: 190px; max-height: calc(calc(100 * var(--vh)) - 200px); } }
/* portada con partida guardada: el banner resta altura, las cartas y el logo se encogen para que todo quepa sin desplazarse */
.hh:has(.hh-resume) .hh-logo { height: min(calc(17 * var(--vh)), 190px); }
.hh:has(.hh-resume) .mcard { width: min(calc(20.5 * var(--vw)), calc(26 * var(--vh)) * .7 * 1.36, 300px); } .hh:has(.hh-resume) .mcard.hero { width: min(calc(24 * var(--vw)), calc(30 * var(--vh)) * .7 * 1.36, 340px); }
.hh:has(.hh-resume) .hh-cards { padding: clamp(12px, calc(2.6 * var(--vh)), 32px) 0 clamp(4px, calc(1.2 * var(--vh)), 16px); }
@media (min-width: 901px) and (max-width: 1100px) { #dlg.side { max-height: calc(calc(100 * var(--vh)) - 198px - var(--note-top, 90px)); } }   /* el pie ocupa todo el ancho: el ticket termina encima */
/* notas de campo: como mucho 3 lineas (2 en pantallas medianas) para no empujar el ticket ni las cartas */
#factText:not(:empty) { max-height: calc(30 * var(--vh)); overflow-y: auto; scrollbar-width: thin; }   /* el texto entero, sin puntos suspensivos: si es muy largo, se desplaza */
@media (max-width: 1100px) { #factText:not(:empty) { font-size: 17px; max-height: calc(26 * var(--vh)); } }
/* Campamento: red de seguridad siempre activa (no solo en pantallas bajas) - si el contenido
 * no cabe (p. ej. reto + las 3 cartas de tienda a la vez), se desplaza en vez de cortarse. */
#dlg.tablewrap { overflow-y: auto; overflow-x: hidden; }
.table { height: auto; min-height: 100%; }
/* Comun a movil y a ventanas de escritorio bajas (<=760px de alto, p. ej. 720p/768p):
 * NO se apila la bandeja aqui (eso multiplicaria su alto x3, que es justo lo que
 * se queria evitar) - solo texto/tarjetas mas compactos. */
/* Solo en movil de verdad (ancho estrecho): aqui si hace falta apilar la bandeja
 * en 2 filas porque 4 columnas no caben de ancho, aunque sea mas alta. */
/* movil y tablet: el ticket es una hoja inferior sobre el pie de pagina; mientras se ve, el resto del HUD de partida se aparta */
@media (max-width: 900px) {
  body.tk-on #advBar, body.tk-on #toolBar, body.tk-on .rail-sh { display: none; }
  #dlg.side { place-self: end center; margin: 0 0 calc(var(--note-top, 90px) + 8px); max-height: calc(calc(100 * var(--vh)) - 226px - var(--note-top, 90px)); overflow-y: auto; scrollbar-width: none; }
  #dlg.side::-webkit-scrollbar { display: none; }
}
@media (max-width: 700px) {
  /* ticket compacto: deja ver el mapa (donde cayo tu pin y donde estaba el lugar) */
  #dlg.side .tk-band, #dlg.side .tk-perf, #dlg.side .tk-cx { display: none; }
  #dlg.side .tk-title { font-size: 20px; margin-top: 10px; } #dlg.side .tk-km { font-size: 34px; margin-top: 0; } #dlg.side .tk-total { margin: 4px 0 6px; } #dlg.side .tk-total .odo { font-size: 30px; }
  body.tk-on #lvlText { display: none; }
}
/* el pais bajo el nombre: bien visible en todas las preguntas (antes era una linea diminuta) */
#askSub, html[data-skin="casino"] #askSub { font-family: var(--serif); font-style: normal; font-weight: 800; font-size: clamp(19px, calc(2.1 * var(--vw)), 28px); letter-spacing: .01em; color: #1d6b42; margin-top: 3px; line-height: 1.1; }
html[data-skin="casino"] #askSub { font-family: inherit; }
#askSub::before { content: "◈"; font-size: .6em; margin-right: .5em; vertical-align: .18em; opacity: .7; }
#askSub:empty::before { content: none; }
@media (max-width: 900px) { #askSub, html[data-skin="casino"] #askSub { font-size: clamp(17px, calc(4.6 * var(--vw)), 22px); } }

/* huecos de respuesta: una casilla por letra, palabras separadas */
.blk, .lt.blk { display: inline-block; width: .4em; height: .78em; margin: 0 .17em; vertical-align: -.04em; border-bottom: .14em solid currentColor; -webkit-text-fill-color: transparent; overflow: hidden; }
.wg { display: inline-block; width: .55em; }
.wd { display: inline-block; white-space: nowrap; }
#askSub .blk { opacity: .85; }

/* movil en horizontal (poca altura): HUD compacto para que el mapa mande */
@media (max-height: 520px) and (orientation: landscape) {
  .brand-sh { display: none; }
  #hud { top: 6px; left: 8px; right: 8px; gap: 8px; grid-template-columns: 1fr auto; }
  .plate-sh { grid-column: 1; grid-row: 1; justify-self: center; width: min(calc(42 * var(--vw)), 440px); }
  .ledger-sh { grid-column: 2; grid-row: 1; } .ledger { min-width: 0; padding: 5px 12px 6px; } .lg-num { font-size: 24px; margin: 0; } .ledger .gauge, .ledger .lg-row, .lg-label { display: none; }
  #plate { min-width: 0; max-width: none; padding: 6px 14px 7px; }
  .plate-top, #pips { display: none; }
  #askName, html[data-skin="casino"] #askName { font-size: clamp(17px, calc(5 * var(--vh)), 26px); margin-top: 0; }
  #askSub, html[data-skin="casino"] #askSub { font-size: clamp(13px, calc(3.8 * var(--vh)), 18px); margin-top: 1px; }
  #plate .clock { margin-top: 4px; }
  .adv-bar { top: 6px; left: 8px; max-width: 200px; padding: 5px 8px 6px; gap: 3px; } .ab-perks { display: none; } .ab-top { gap: 8px; font-size: 15.5px; }
  .rail-sh { left: auto; right: 8px; top: 58%; transform: translateY(-50%) scale(.72); transform-origin: right center; }
  .dock-sh { left: 8px; bottom: 8px; transform: scale(.78); transform-origin: left bottom; }
  .note-sh:has(#factText:empty) { display: none; }
  #noteSh, .note-sh { width: min(calc(56 * var(--vw)), 560px); bottom: 6px; } #note { padding: 5px 14px 6px; } #lvlText { display: none; } #factText:not(:empty) { font-size: 15.5px; max-height: calc(32 * var(--vh)); }
  #toolBar.tool-bar { left: auto; right: 74px; bottom: 6px; transform: scale(.55); transform-origin: right bottom; }
  #dlg.side { place-self: end end; margin: 0 62px 6px 0; width: min(calc(46 * var(--vw)), 340px); max-height: calc(calc(100 * var(--vh)) - 92px); overflow-y: auto; }
  #dlg.side .tk-band, #dlg.side .tk-perf, #dlg.side .tk-cx { display: none; }
  #dlg.side .tk-title { font-size: 19px; margin-top: 8px; } #dlg.side .tk-km { font-size: 30px; margin-top: 0; } #dlg.side .tk-total { margin: 2px 0 4px; } #dlg.side .tk-total .odo { font-size: 26px; } #dlg.side .btn-ink { padding-top: 8px; padding-bottom: 8px; }
  body.tk-on .rail-sh { display: none; }
}

/* menu principal en movil horizontal: logo pequeno, tres cartas en fila sin ilustracion y botones debajo */
@media (max-height: 520px) and (orientation: landscape) {
  .hh-top { flex-direction: row; justify-content: center; }
  .hh-logo { height: min(calc(16 * var(--vh)), 64px); }
  .hh-top .menu-tools { position: absolute; right: 0; top: 0; margin: 0; }
  .hh-tag { display: none; }
  .hh-cards { flex-wrap: nowrap; gap: 12px; padding: 14px 6px 8px; }
  .mcard, .mcard.hero { flex: 1 1 0; width: auto; max-width: 250px; min-width: 0; aspect-ratio: auto; padding: 8px 10px 10px; gap: 4px; transform: none !important; animation: none; }
  .mcard.hero { --rc: #ffd06b; }
  .mcard:hover { transform: translateY(-4px) !important; }
  .mcard .mc-win { display: none; }
  .mcard .ix.tl { left: 8px; top: 8px; } .mcard .ix.br { display: none; } .mcard .ix b { font-size: 19px; } .mcard .ix .ic { width: 15px; height: 15px; }
  .mc-name { font-size: 20px; padding: 0 0 0 30px; }
  .mc-desc { font-size: 15.5px; min-height: 0; padding: 0 0 0 22px; }
  .mc-stat { font-size: 13px; padding: 3px 7px 2px; }
  .mc-ribbon { top: -9px; font-size: 13px; padding: 3px 8px 2px; }
  .chipbtn.big { font-size: 15.5px; padding: 8px 14px 7px; }
  .hh-resume .hh-cont { min-height: 0; padding-block: 4px 6px; } .hh-resume .sb-ic .ic { width: 34px; height: 34px; }
}

/* Campamento en movil horizontal: las tres cartas en una fila (se desplaza si hace falta) */

/* marca Geolite (escudo de pixel art en vez de la antigua rosa vectorial) */
.brand-rose, .menu-rose { image-rendering: pixelated; object-fit: contain; }
.brand-txt i { text-transform: uppercase; }

/* Geolite es pixel art de verdad: nada de suavizado al ampliar logos e iconos */
.hh-logo, .gate-logo img, .brand-rose, .menu-rose { image-rendering: pixelated; }
/* v0.3.130: el logo vivo (js/geologo.js). La caja reserva el hueco; dentro, un lienzo a pixeles reales (escala entera si cabe) */
.geo-logo { display: flex; align-items: center; justify-content: center; }
.geo-logo > img { display: block; width: 100%; height: 100%; }
.geo-logo { position: relative; }
.geo-logo > canvas { display: block; flex: none; }
/* el lienzo vivo va sin filtros; detras, resplandor y sombra estaticos (silueta del logo con el desenfoque calculado una sola vez) */
.geo-logo > .geo-main { position: relative; z-index: 2; }
.geo-logo > .geo-gl, .geo-logo > .geo-sh { position: absolute; z-index: 0; pointer-events: none; }
.geo-logo > .geo-sh { z-index: 1; }
.geo-logo > .geo-gl { opacity: .3; filter: blur(30px); }
.geo-logo > .geo-sh { opacity: .6; transform: translateY(8px); }
.gate-logo .geo-logo > .geo-gl { opacity: .25; filter: blur(34px); }
.gate-logo .geo-logo > .geo-sh { opacity: .55; filter: blur(15px); transform: translateY(10px); }
.gate-logo .geo-logo { display: flex; }
.gate-logo .geo-logo > img { width: 100% !important; height: 100% !important; aspect-ratio: auto; filter: none; animation: none; }
/* escalas enteras del logo (200 px nativos): 2x en pantallas normales, 1x en pantallas pequenas */
.hh-logo, .gate-logo img, .gate-logo .geo-logo { width: 400px !important; height: auto !important; max-height: none !important; max-width: none !important; aspect-ratio: 664 / 206; }   /* el hueco del logo (664x206) se reserva antes de que cargue: sin el, la portada se rehacia al llegar la imagen */
@media (max-width: 700px), (max-height: 560px) { .hh-logo, .gate-logo img, .gate-logo .geo-logo { width: 200px !important; } }
@media (min-width: 1500px) and (min-height: 900px) { .gate-logo img, .gate-logo .geo-logo { width: 664px !important; } .hh-logo { width: 400px !important; } }   /* la entrada, a 1:1 de su rejilla; la portada guarda su hueco de siempre (la k de la portada ya lo agranda) */
.brand-rose { width: 32px; height: 32px; } .menu-rose { width: 64px; height: 64px; }
.gate-logo { width: auto !important; display: flex; justify-content: center; }

/* cartas de modo sin indices de baraja (K / A / Q): texto a todo el ancho */
.mcard .mc-name { padding: 0 2px; } .mcard .mc-desc { padding: 0; }
/* idiomas de palabras largas (ruso, aleman...): partir con guion en vez de desbordar la carta */
.mcard .mc-name, .mcard .mc-desc { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
@media (max-height: 520px) and (orientation: landscape) { .mcard .mc-name, .mcard .mc-desc { padding: 0; } }


/* portada: solo el engranaje (arriba a la derecha) */
.menu-tools { gap: 0; }


/* cartas sin indices (A K Q J, numeros ni palos) en ninguna parte: se libera el hueco de las esquinas */
.ix { display: none !important; }
/* mano de herramientas (v0.2.44): cartas mas anchas, todas del mismo alto, y apenas se pisan (antes la carta de al lado tapaba el borde del nombre).
   El nombre tiene un hueco de dos lineas centrado; si una palabra no cabe, js/adventure.js (fitToolNames) reduce la letra. .aim = el reticulo (no el raton) esta encima */
.tool.pc-hand { width: 128px; margin: 0 -3px; padding: 10px 10px 8px; grid-template-columns: minmax(0, 1fr); }   /* minmax(0,..): una palabra larga no ensancha la columna, desborda y la letra se reduce */
.tool.pc-hand .tl-n { display: grid; align-items: center; justify-self: stretch; width: 100%; height: 34px; line-height: 17px; text-align: center; text-wrap: balance; overflow-wrap: normal; word-break: normal; hyphens: manual; }

/* titulos de cancion completos (antes se cortaban con "..." en Ajustes) */
.np-t { flex-wrap: wrap; row-gap: 2px; min-height: 30px; align-content: center; }
.np-t b { white-space: normal; overflow: visible; text-overflow: clip; text-align: center; line-height: 1.15; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.np-set .np-t b { font-size: 15.5px; letter-spacing: .03em; }
/* escudo = la Tierra en su placa con la chistera y la carta: menu 96 px y cabecera 32 px nativos, a 1:1 (assets/icons/logo_mark*.png) */
.brand-rose { width: 32px; height: 32px; } .menu-rose { width: 96px; height: 96px; }

/* pixel art nitido: los recursos grandes (escenas, cartas, iconos grandes, crupier) se amplian sin suavizar; los iconos pequenos se reducen desde un original nitido */
.pic-img, .cx-art img, .cx-bigcard img, .of-ico .ic, .tl-ico .ic, .intro-num .ic, .nx-ic .ic, .sp-ic .ic, .dl-face, .ic.big, .mc-win img { image-rendering: pixelated; }

/* ==== legibilidad (v0.22): tipografias pixel mas grandes y nitidas; la placa de la pregunta NO se toca ==== */
html body { -webkit-font-smoothing: none; font-smooth: never; text-rendering: optimizeSpeed; }
html body .brand-txt > i { font-size: 15.5px; } html body .mc-desc { font-size: 18px; line-height: 1.25; } html body .mc-stat { font-size: 15.5px; } html body .mc-ribbon { font-size: 15.5px; }
html body .hh-ver { font-size: 15.5px; }
html body .tag { font-size: 15.5px; } html body #plate .tag { font-size: 10.5px; }
html body .rm-node > em { font-size: 15.5px; }
html body .sb-t > i { font-size: 15.5px; } html body .mode-d { font-size: 19px; } html body .nick > span { font-size: 15.5px; } html body .dy-body > i { font-size: 19px; }
html body .lb-src, html body .lb-empty { font-size: 15.5px; } html body .camp-d { font-size: 19px; } html body .camp-m > span { font-size: 15.5px; } html body .pf-cell > span { font-size: 15.5px; }
html body .ach > i { font-size: 18px; } html body .ach-t > i { font-size: 18px; } html body .ach-t > em { font-size: 15.5px; }
html body .cx-tt > em, html body .cx-tt > i { font-size: 15.5px; }
html body .set-card > h3 { font-size: 15.5px; } html body .langgrid > button { font-size: 15.5px; } html body .set-note { font-size: 18px; line-height: 1.25; } html body .rs-t > small { font-size: 17px; line-height: 1.2; }
html body .adv-chal-h { font-size: 15.5px; } html body .ab-act { font-size: 15.5px; } html body .ch-chip > b { font-size: 15.5px; } html body .ch-chip .ch-lv { font-size: 14px; }
html body .tk-band > span { font-size: 15.5px; } html body .tk-from { font-size: 19px; } html body .tk-total > span { font-size: 15.5px; } html body .tk-cx > span, html body .tk-cx > b { font-size: 15.5px; }
html body .nx-n, html body .nx-none, html body .nx-hint, html body .nx-have, html body .ch-buy { font-size: 15.5px; } html body .nx-body > p { font-size: 18px; }
html body .tour-txt { font-size: 19px; } html body .dl-bubble p { font-size: inherit; }

/* ==== v0.22: columna izquierda (placa de la pregunta, marcador de partida y logros) para dejar libre el mapa ==== */
#leftCol { position: absolute; z-index: 6; top: 14px; left: 14px; width: min(430px, calc(42 * var(--vw))); display: flex; flex-direction: column; gap: 10px; align-items: stretch; pointer-events: none; }
#leftCol > * { pointer-events: auto; position: relative; left: auto; top: auto; right: auto; bottom: auto; transform: none; }
#leftCol .plate-sh { width: 100%; } #leftCol #plate { min-width: 0; max-width: none; width: 100%; padding: 12px 20px 13px; }
#leftCol .adv-bar { max-width: none; width: max-content; min-width: 210px; }
#leftCol .ach-toast { width: 100%; padding: 8px 12px 8px 8px; gap: 10px; margin: 0; z-index: 8; pointer-events: none; }   /* solo aviso: no se come los clics del mapa que tiene debajo (una sonda se perdia) */
#leftCol .ach-toast.in { animation: ach-in-l .6s var(--spring) both; } @keyframes ach-in-l { from { transform: translateX(-130%); opacity: 0; } }
#leftCol .ach-toast .ach-ico { transform: scale(.75); transform-origin: left center; margin-right: -10px; } #leftCol .ach-t i { display: none; }
/* v0.3.35: fuera de la partida el aviso va a la zona libre de cada pantalla (js/profile.js, place): la cabecera, bajo el boton de apagar o el sitio
   del titulo del Campamento, que se aparta mientras dura. Entra cayendo desde arriba */
#leftCol .ach-toast.free { position: absolute; z-index: 8; }
#leftCol .ach-toast.free.in { animation: ach-in-t .6s var(--spring) both; } @keyframes ach-in-t { from { transform: translateY(-140%); opacity: 0; } }
#dlg .tb-head .tb-title { transition: opacity .2s; } body.ach-title #dlg .tb-head .tb-title { opacity: 0; }
/* aviso de enciclopedia: tambien a la izquierda (antes tapaba el marcador y el ticket a la derecha) */
#leftCol .cx-toast { position: relative; width: 100%; max-width: none; right: auto; bottom: auto; top: auto; margin: 0; z-index: 8; }
#leftCol .cx-toast.in { animation: cx-in-l .6s var(--spring) both; } @keyframes cx-in-l { from { transform: translateX(-130%) rotate(0); opacity: 0; } }
#leftCol .cx-toast.out { animation: cx-out-l .34s ease-in both; } @keyframes cx-out-l { to { transform: translateX(-130%); opacity: 0; } }
body:not(.title-on) .brand-sh { display: none; }
@media (max-width: 900px) { #leftCol { top: 8px; left: 8px; width: calc(calc(100 * var(--vw)) - 92px); } body:not(.title-on) .brand-sh { display: none; } }
@media (max-height: 520px) and (orientation: landscape) { #leftCol { top: 6px; left: 8px; width: min(calc(46 * var(--vw)), 440px); gap: 6px; } #leftCol .adv-bar { min-width: 0; } }
/* zoom a la derecha: la columna izquierda queda para la placa, el marcador y los logros */
.rail-sh { left: auto; right: 14px; top: 46%; }
/* el ticket de resultado ocupa esa misma esquina: mientras se ve, el zoom se aparta para no solaparse */
body.tk-on .rail-sh { display: none; }
@media (max-width: 900px) {
  #leftCol .adv-bar { padding: 5px 8px 6px; gap: 3px; width: auto; min-width: 0; }
  #leftCol .ab-chal { flex-direction: row; flex-wrap: wrap; gap: 4px; margin-top: 3px; } #leftCol .ab-chal .ch-chip { padding: 2px 7px 2px 4px; } #leftCol .ab-chal .ch-chip .ic { width: 16px; height: 16px; }
  #leftCol .ab-wind { font-size: 14px; } #leftCol .ab-perk { width: 22px; height: 22px; } #leftCol .ab-perk .ic { width: 18px; height: 18px; }
}

/* ==== v0.23: escala de la interfaz (--k lo fija js/game.js: 1 en 1280x720 y hasta 1,85 en pantallas grandes; SOLO menus, campamento y veredicto: el HUD de la partida no se escala para dejar libre el mapa) ====
   `zoom` escala TODO lo de dentro (tipografia, cartas, margenes) PERO tambien las unidades vh/vw; por eso todas las unidades vh/vw del CSS pasan por --vh y --vw,
   que dentro de las cajas escaladas se dividen entre k (asi 50vw sigue siendo media pantalla). Las cajas que rellenan la pantalla se dividen entre k. */
:root { --k: 1; --vh: 1vh; --vw: 1vw; }
.hh, .scr, .table, .vd { zoom: var(--k); --vh: calc(1vh / var(--k)); --vw: calc(1vw / var(--k)); }
.hh { min-height: 100%; } .scr { height: 100%; } .table { height: 100%; } .vd { min-height: 100%; }
#dlg.menu { width: min(calc(1240px * var(--k)), 100vw); }

@media (max-width: 899px), (max-height: 519px) { :root { --k: 1 !important; } }

/* ==== v0.23: pantallas de menu centradas en vertical (antes se pegaban arriba) y estadisticas en 2x2 con la letra mayor ==== */
.scr-body { display: flex; flex-direction: column; } .scr-body::before, .scr-body::after { content: ""; flex: 1 0 0; }

/* ==== v0.25: el crupier asoma de vez en cuando en el inicio (arriba a la izquierda o a la derecha), sin tapar ni bloquear nada ==== */
/* en la franja libre a un lado de la portada, con el globo encima y la cola hacia el. js/dealer.js (homeRoom) mide el hueco y fija --hf (retrato) y --hb (globo) */
.dealer.home { top: 92px; bottom: auto; z-index: 100010; pointer-events: none; flex-direction: column; gap: 4px; --hf: 256px; --hb: 380px; }
.dealer.home.home-tl { left: 22px; right: auto; align-items: flex-start; --tail: calc(var(--hf) / 2); }
.dealer.home.home-tr { left: auto; right: 22px; align-items: flex-end; transform: translateX(140%); --tail: calc(100% - var(--hf) / 2); }
.dealer.home.home-tr.in { transform: none; }
.dealer.home .dl-face { width: var(--hf); height: var(--hf); }
.dealer.home .dl-bubble { max-width: var(--hb); min-width: min(var(--hf), var(--hb)); margin: 0; padding-bottom: 22px; font-size: calc(27px * var(--dll, 1)); 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)); }
@media (max-width: 900px), (max-height: 560px) { .dealer.home { display: none; } }   /* movil: la pantalla ya va justa, sin distracciones extra */

/* ==== textos sin huerfanos: nunca una palabra sola en la ultima linea (A.squeeze ademas aprieta un poco los que se pasan por pocas letras) ==== */
#dlg, #intro, #tt, #note, #leftCol > :not(.plate-sh) { text-wrap: pretty; }
#dlg h1, #dlg h2, #dlg h3, #dlg h4, #intro h1, #intro h2 { text-wrap: balance; }
.sq-measure, .sq-measure * { text-wrap: wrap !important; }

/* ==== Campamento sin desplazarse (escritorio): las cartas SIEMPRE en una fila (con 4-5 cartas se estrechan en vez de bajar a otra fila),
   y la bandeja de reliquias/herramientas tampoco se parte en dos lineas. A.fitK encoge el conjunto si aun asi no cabe. ==== */
/* mientras se reparten, las cartas entran desde abajo: en escritorio no deben hacer aparecer (y parpadear) una barra de desplazamiento */
@media (min-width: 900px) and (min-height: 520px) { #dlg.tablewrap { overflow: hidden; } }

.lb-tries { display: inline-flex; gap: 3px; align-self: center; } .lb-tries i { width: 8px; height: 8px; border-radius: 50%; background: rgba(242, 233, 214, .2); } .lb-tries i.on { background: #ffe08a; }
.lb li.me .lb-tries i { background: rgba(22, 36, 28, .25); } .lb li.me .lb-tries i.on { background: #16241c; }
/* v0.19: en el inicio su cara se puede pulsar (js/dealer.js, onPoke): respingo corto; sin movimiento con "reducir movimiento" ni con Vibracion = no */
.dealer.home.in .dl-face { pointer-events: auto; cursor: pointer; }
/* v0.19: el crupier asoma abajo a la izquierda en subpantallas (Perfil) mientras habla (js/dealer.js, screenSay) */
.dealer.screen { left: 20px; bottom: 14px; top: auto; z-index: 100010; pointer-events: none; }
.dealer.screen .dl-face { width: 224px; height: 224px; }                  /* v0.32: el busto a x2 exacto */
.dealer.screen .dl-bubble { max-width: 420px; margin-bottom: 60px; }
/* v0.3.172: apartado (js/dealer.js, D.aside): abres otra pantalla del hub con el a media frase en la portada; la acaba pequeno en el mayor hueco libre */
.dealer.aside { right: auto; bottom: auto; justify-content: flex-end; z-index: 100010; pointer-events: none; }
.dealer.aside .dl-bubble { margin-bottom: 0; } .dealer.aside { align-items: center; }   /* globo a la altura de la cara: cabe en franjas bajas (la cabecera) */
.dealer.aside.aside-low { align-items: flex-end; } .dealer.aside.aside-low .dl-bubble { margin-bottom: 24px; }
.dealer.aside.aside-low { left: 20px; top: auto; bottom: 14px; }
/* v0.20: comentando la Clasificacion, a la izquierda del panel y sin pisarlo (js/dealer.js podSay mide --sbw) */
.dealer.screen.pod .dl-face { width: 130px; height: 130px; }
.dealer.screen.pod .dl-bubble { max-width: var(--sbw, 420px); margin-bottom: 36px; }
/* su libreta: la casilla del Perfil que se da la vuelta enseña SU estadistica, en tinta roja */
.pf-stat.book, .pf-stat.book b { color: #c4152a; }   /* v0.3.41: en la ficha de socio (papel), la fila en tinta roja */
/* v0.19: el crupier en el Campamento, en el hueco libre a la izquierda de las cartas (js/dealer.js, campRoom mide --cl --cb --hf --hb) */
.dealer.camp { left: var(--cl); bottom: var(--cb); top: auto; right: auto; z-index: 100010; pointer-events: none; flex-direction: column; align-items: flex-start; gap: 4px; }
.dealer.camp .dl-face { width: var(--hf); height: var(--hf); }
.dealer.camp .dl-bubble { max-width: var(--hb); min-width: min(var(--hf), var(--hb)); margin: 0; padding-bottom: 22px; font-size: calc(27px * var(--dll, 1)); transform-origin: calc(var(--hf) / 2) 100%;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(var(--hf) / 2 + 10px) calc(100% - 12px), calc(var(--hf) / 2) 100%, calc(var(--hf) / 2 - 10px) calc(100% - 12px), 0 calc(100% - 12px)); }
/* v0.19: se queda traspuesto en la portada (js/dealer.js, startDoze): bosteza y duerme con sus zetas y su cabeceo, todo en el sprite (v0.32) */
/* corrige el lema de la portada: tachado en rojo y "Yo si." a mano */
.hh-tag .tag-x { text-decoration: line-through; text-decoration-color: #e2483d; text-decoration-thickness: 3px; }
.hh-tag .tag-fix { display: inline-block; margin-left: 6px; color: #ff6a5c; font-family: var(--sans); font-weight: 400; transform: rotate(-4deg); }
/* su expediente en Ajustes > Datos */
.dl-file .dlf-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; } .dl-file .dlf-h .ic { width: 32px; height: 32px; image-rendering: pixelated; }   /* la cabeza pequena del crupier a 32 px nativos (dealer.js lo ajusta al pixel real) */
img.ic.ic-dealer_mini, img.ic.ic-dealer_mini_s { image-rendering: pixelated; } img.ic.sm.ic-dealer_mini_s { width: 32px; height: 32px; }   /* la cabeza mini (52 px nativos) y la pequena (32 px nativos, de Pixel Lab) siempre a escala exacta */
.dlf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; }
.dlf-r { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .dlf-r span { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.dlf-r b { font-family: var(--sans); font-weight: 400; font-size: 20px; line-height: 1.1; overflow-wrap: anywhere; }

/* ==== v0.3.101: paneles fantasma. Los paneles de LECTURA de la partida (pregunta, marcador, nota, barra del acto) no captan el raton: el clic llega
   siempre al mapa que tienen debajo (con los controles invertidos, cruzar uno ya no se come el clic). Solo se pulsa lo que es de pulsar (botones,
   reliquias, el ticket). Su globo lo busca js/uikit.js por posicion, y el panel que tienes bajo el cursor se vuelve casi transparente (.ghosted). */
#leftCol > .plate-sh, #leftCol > .adv-bar, #ledgerSh, #noteSh, #plate, #ledger, #note, #advBar { pointer-events: none; }
:is(#plate, #ledger, #note, #advBar) :is(button, a, input, select, textarea, [role="button"], [tabindex], .ab-perk, .btn-ink, .gx-btn, .tk-cx) { pointer-events: auto; }
#ledgerSh :is(button, a, [role="button"], .btn-ink, .gx-btn, .tk-cx) { pointer-events: auto; }
#plate, #ledger, #note, #advBar { transition: opacity .14s linear; }
#plate.ghosted, #ledger.ghosted, #note.ghosted, #advBar.ghosted { opacity: .22; }