/* Geolite - MANDO (v0.2.28): el cursor del mando (el mismo pixel art del puntero de casino) y nada de cursor del sistema mientras se juega con el */
#padCur { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; background: no-repeat 0 0 / 100% 100%; image-rendering: pixelated; will-change: transform; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
#padCur[hidden], #padCur.off { display: none; }
html[data-input="pad"]:not(.pad-scan), html[data-input="pad"]:not(.pad-scan) * { cursor: none !important; }   /* .pad-scan: un instante, para leer que es pulsable (cursor: pointer) */

/* v0.2.29: iconos de los botones (pixel art de js/glifos-data.js; el dibujo de cada uno lo pone js/mando.js segun html[data-glyph]).
   Con teclado y raton (data-glyph="kb") se ven las teclas (.k-kb) y no los iconos; con mando, al reves. Ancho fijo: cambiar no mueve nada */
.gl { display: inline-block; flex: none; vertical-align: middle; background: no-repeat 0 0 / 100% 100%; image-rendering: pixelated; }
html[data-glyph="kb"] .gl, html[data-glyph="kb"] .k-pad, html:not([data-glyph]) .k-pad { display: none !important; }
html:not([data-glyph="kb"]) .k-kb { display: none !important; }
.tt .tt-gl { margin: -4px 0 -4px 8px; }
.split-alt .sa-gl { margin: -4px 0; }
.btn-ink .gl, .nm-next .gl { margin: -6px 0 -6px 2px; }
.set-keys .gl { margin: -4px 4px -4px 0; }

/* v0.2.31: teclado del crupier (js/teclado.js). Bandeja de pano con canto de laton; teclas de ficha; arriba, lo que llevas escrito */
#osk { position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: flex-end; justify-content: center; padding: 0 16px 22px; background: rgba(4, 10, 8, .38); opacity: 0; transition: opacity .15s; }
#osk.top { align-items: flex-start; padding: 22px 16px 0; }
#osk.on { opacity: 1; } #osk[hidden] { display: none; }
.osk-pad { display: grid; gap: 7px; padding: 14px 16px 12px; border-radius: 16px; background: linear-gradient(#143a29, #0c2018); box-shadow: inset 0 0 0 2px #f8b449, inset 0 0 0 5px #1f5c40, 0 18px 44px rgba(0, 0, 0, .55); transform: translateY(10px); transition: transform .18s var(--spring, ease-out); }
#osk.on .osk-pad { transform: none; }
.osk-view { display: flex; align-items: center; gap: 2px; min-height: 46px; margin-bottom: 4px; padding: 6px 14px; border-radius: 10px; background: #f6efdc; box-shadow: inset 0 0 0 3px #16241c, inset 0 5px 0 rgba(120, 90, 40, .16); color: #16241c; font-family: var(--serif); font-size: 30px; line-height: 1; overflow: hidden; }
.osk-view b { font-weight: 700; white-space: pre; }
.osk-view em { font-style: normal; color: rgba(22, 36, 28, .35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osk-caret { width: 3px; height: 28px; background: #fe5f55; animation: oskCaret 1s steps(1) infinite; }
@keyframes oskCaret { 50% { opacity: 0; } }
html.reduce-motion .osk-caret { animation: none; }
.osk-keys { display: grid; gap: 6px; }
.osk-row { display: flex; justify-content: center; gap: 6px; }
.osk-k { min-width: 44px; height: 44px; padding: 0 10px; border-radius: 9px; background: #1f5c40; color: #ffe7ae; font-family: var(--serif); font-size: 24px; font-weight: 700; line-height: 1; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .32), inset 0 0 0 1px rgba(255, 231, 174, .12); transition: background .12s, color .12s, transform .08s; }
.osk-k:hover { background: #f8b449; color: #16241c; }
.osk-k:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .32); }
.osk-k.fn { background: #163f2d; color: #f8b449; font-size: 20px; min-width: 58px; } .osk-k.fn.on { background: #f8b449; color: #16241c; }
.osk-k.wide { flex: 1 1 auto; min-width: 200px; font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.osk-k.ok { min-width: 96px; background: #fe5f55; color: #fff3cf; font-family: var(--mono); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.osk-k.ok:hover { background: #ff7a70; color: #fff; }
.osk-bot { margin-top: 2px; }
.osk-legend { display: flex; justify-content: center; gap: 18px; margin-top: 6px; color: rgba(255, 231, 174, .75); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.osk-legend span { display: inline-flex; align-items: center; gap: 6px; } .osk-legend em { font-style: normal; }

/* v0.2.33: creditos dentro del juego (js/creditos.js), con el mismo pano y cabecera que Ajustes; por encima de todo lo demas */
.cr-sh { position: fixed; inset: 0; z-index: 2147481000; display: flex; flex-direction: column; color: var(--paper); opacity: 0; transition: opacity .18s;
  background: radial-gradient(ellipse 900px 500px at 50% -8%, rgba(255, 224, 138, .09), transparent 60%), linear-gradient(160deg, #17281e 0%, #0d1e15 55%, #060d09 100%); }
.cr-sh.on { opacity: 1; } .cr-sh[hidden] { display: none; }
.cr-top { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 12px clamp(16px, 3vw, 40px); border-bottom: 2px solid rgba(255, 224, 138, .2); }
.cr-title h1 { margin: 0; font-family: var(--serif); font-size: 30px; color: var(--brass-lt); }
.cr-q { justify-self: end; display: flex; align-items: center; gap: 8px; width: min(320px, 100%); padding: 6px 12px; border-radius: 10px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1.5px rgba(242, 233, 214, .14); }
.cr-q input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--paper); font-family: var(--sans); font-size: 18px; }
.cr-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-color: var(--brass) rgba(0, 0, 0, .3); }
.cr-in { max-width: 1040px; margin: 0 auto; padding: 18px clamp(16px, 3vw, 40px) 60px; font-family: var(--sans); font-size: 18px; line-height: 1.4; color: rgba(242, 233, 214, .78); }
.cr-in h2 { margin: 28px 0 10px; font-family: var(--mono); font-weight: 500; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); }
.cr-in h2 .n { color: rgba(242, 233, 214, .45); }
.cr-in p, .cr-in ul { margin: 6px 0; } .cr-in ul { padding-left: 20px; } .cr-in b { color: var(--paper); }
.cr-in a { color: #9fd3ff; } .cr-in .cr-a { color: #9fd3ff; }
.cr-table { width: 100%; border-collapse: collapse; font-size: 17px; content-visibility: auto; contain-intrinsic-size: auto 60000px; }
.cr-table th, .cr-table td { text-align: left; vertical-align: top; padding: 5px 8px; border-bottom: 1px solid rgba(242, 233, 214, .1); }
.cr-table th { position: sticky; top: 0; background: #12231a; color: var(--brass); font-family: var(--mono); font-weight: 500; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
html[data-dev="deck"] .cr-table th { font-size: 16px; }

/* v0.2.36: leyenda de botones en partida (solo con mando, mientras respondes). Abajo a la derecha, donde el HUD no tiene nada; si sale la luz
   que se apaga (reto Apagon / Bateria baja), sube para no pisarla */
#padLeg { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: grid; gap: 6px; padding: 10px 16px 10px 12px; border-radius: 14px; pointer-events: none;
  background: rgba(10, 26, 18, .78); box-shadow: inset 0 0 0 2px rgba(248, 180, 73, .35), 0 8px 22px rgba(0, 0, 0, .4); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
#padLeg.on { opacity: 1; transform: none; }
#padLeg span { display: grid; grid-template-columns: 72px auto; align-items: center; gap: 8px; min-height: 26px; }
#padLeg b { display: flex; justify-content: flex-end; gap: 4px; }
#padLeg em { font: 18px/1 var(--sans); font-style: normal; color: rgba(242, 233, 214, .9); white-space: nowrap; }
body:has(#chxBat.on) #padLeg { bottom: 74px; }
html.reduce-motion #padLeg { transition: none; }