/* Geolite - tu nombre (v0.37): la sala se apaga, el crupier se asoma bajo un foco y te tiende su tarjeta de socio (js/nombre.js) */
.nm { position: absolute; inset: 0; z-index: 100020; display: grid; place-items: center; overflow: hidden; color: var(--paper); }
.nm.hidden { display: none; }
.nm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* la sala se apaga: parpadeo de luces que caen, el veredicto se queda detras, borroso y sin color */
.nm-dim { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 58% 66% at 50% 42%, rgba(14, 26, 19, .78), rgba(3, 7, 5, .95) 72%, rgba(1, 3, 2, .98));
  -webkit-backdrop-filter: blur(3px) saturate(.45); backdrop-filter: blur(3px) saturate(.45); }
.nm.on .nm-dim { animation: nm-lights .8s ease-out forwards; }
.nm.out .nm-dim { animation: nm-lights-up .5s ease forwards; }
@keyframes nm-lights { 0% { opacity: 0; } 10% { opacity: .72; } 16% { opacity: .22; } 28% { opacity: .86; } 36% { opacity: .55; } 100% { opacity: 1; } }
@keyframes nm-lights-up { from { opacity: 1; } to { opacity: 0; } }

/* escena: el crupier (js/dealer.js lo acopla en .nm-stage) y, delante, su tarjeta; todo crece con la pantalla como los menus (--k) */
.nm-in { position: relative; display: flex; flex-direction: column; align-items: center; width: min(600px, calc(100 * var(--vw) - 32px)); padding-top: 64px;
  zoom: var(--k); --vh: calc(1vh / var(--k)); --vw: calc(1vw / var(--k)); --face: clamp(160px, calc(30 * var(--vh)), 256px); }
.nm.out .nm-in { animation: nm-fade .45s ease forwards; } @keyframes nm-fade { to { opacity: 0; transform: translateY(14px) scale(.98); } }
.nm-stage { position: relative; z-index: 1; width: var(--face); height: var(--face); margin-bottom: -34px; }

/* el foco: un cono de luz calida desde arriba, con su charco en el suelo y motas de polvo flotando en el haz */
.nm-beam { position: absolute; left: 50%; bottom: -26px; width: calc(var(--face) * 2.3); height: calc(160 * var(--vh)); transform: translateX(-50%); pointer-events: none; opacity: 0;
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 84%, transparent 100%);
  background: linear-gradient(180deg, rgba(255, 238, 196, 0) 0%, rgba(255, 232, 172, .07) 55%, rgba(255, 224, 150, .2) 88%, rgba(255, 218, 140, .28) 100%); }
.nm-beam u { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 1px; background: #fff3cf; opacity: 0; animation: nm-mote var(--d) linear var(--w) infinite; }
@keyframes nm-mote { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .75; } 80% { opacity: .5; } 100% { opacity: 0; transform: translate(14px, -150px); } }
.nm-pool { position: absolute; left: 50%; bottom: -44px; width: calc(var(--face) * 2.5); height: 70px; transform: translateX(-50%); pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255, 222, 150, .34), rgba(255, 210, 120, .1) 45%, transparent 70%); }
.nm.spot .nm-beam { animation: nm-ignite .7s linear forwards, nm-breathe 4.2s ease-in-out .7s infinite; }
.nm.spot .nm-pool { animation: nm-ignite .7s linear forwards; }
@keyframes nm-ignite { 0% { opacity: 0; } 18% { opacity: .95; } 26% { opacity: .15; } 40% { opacity: 1; } 100% { opacity: 1; } }
@keyframes nm-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }

/* el crupier: se asoma de un salto y habla con su bocadillo a la derecha (el mismo globo de siempre, un poco mas grande) */
.nm-stage .dealer.big { position: relative; left: 0; bottom: 0; z-index: 1; display: block; width: var(--face); height: var(--face); transform: none; opacity: 1; }
.nm.spot .nm-stage .dealer { animation: nm-pop .6s cubic-bezier(.3, 1.6, .4, 1) both; }
@keyframes nm-pop { from { opacity: 0; transform: translateY(46px); } }   /* v0.32: sin escalar (el sprite hace su propio bote) */
.nm-stage .dealer.big .dl-face { width: var(--face); height: var(--face); filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .45)) drop-shadow(0 0 22px rgba(255, 214, 140, .25)); }
.nm-stage .dealer.big .dl-bubble { position: absolute; left: calc(100% - 8px); bottom: 56%; width: max-content; max-width: min(420px, calc(50 * var(--vw) - var(--face) / 2 - 12px)); margin: 0; padding: 11px 18px 13px 16px;
  font-size: calc(27px * var(--dll, 1)); transform-origin: 0 100%; clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% + 12px)); }

/* la tarjeta de socio: fieltro, marco dorado y bombillas de marquesina que corren */
.nm-card { position: relative; z-index: 2; width: 100%; box-sizing: border-box; padding: 24px 28px 22px; border-radius: 18px; opacity: 0; transform: translateY(46px);
  background: radial-gradient(130% 100% at 50% 0%, #245a41 0%, #173d2c 52%, #0e271c 100%);
  box-shadow: 0 0 0 3px #0a140f, inset 0 0 0 3px #f8b449, inset 0 0 0 5px #7a4e17, inset 0 0 0 7px #0a140f, 0 12px 0 rgba(0, 0, 0, .5), 0 34px 70px rgba(0, 0, 0, .65), 0 0 70px rgba(255, 200, 110, .12); }
.nm.card-in .nm-card { animation: nm-card-in .6s cubic-bezier(.25, 1.45, .45, 1) forwards; }
@keyframes nm-card-in { to { opacity: 1; transform: none; } }
.nm.skipped .nm-card { animation: nm-card-drop .5s ease-in forwards; }
@keyframes nm-card-drop { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(70px) rotate(4deg); } }
/* la marquesina de la casa (A.bulbs, js/art.js: la misma de la portada y el veredicto), por dentro del marco dorado */
.nm-card > .mqw { --mqi: 13px; --mqb: 7px; }
.nm.signed .nm-card .mq-lit { animation-duration: .38s; }   /* al firmar corren mas deprisa */

.nm-top { display: flex; align-items: center; gap: 10px; margin: 2px 2px 0; font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.nm-ic .ic { display: block; width: 30px; height: 30px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
.nm-top b { font-weight: 700; font-size: 15px; color: var(--brass-lt); text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.nm-top em { margin-left: auto; font-style: normal; font-size: 13px; color: rgba(255, 217, 138, .62); white-space: nowrap; }

/* el hueco del nombre: una placa de papel como la de las preguntas, con el cursor rojo */
.nm-field { position: relative; margin: 14px 0 12px; border-radius: 12px; }
.nm-field input { display: block; width: 100%; box-sizing: border-box; height: 68px; margin: 0; padding: 5px 18px 0; border: 0; border-radius: 12px; outline: none;
  background: #f6efdc; color: #16241c; font-family: var(--serif); font-size: 40px; line-height: 1; letter-spacing: .01em; caret-color: #fe5f55;
  box-shadow: inset 0 0 0 3px #16241c, inset 0 6px 0 rgba(120, 90, 40, .16); transition: box-shadow .2s; }
.nm-field input:focus { box-shadow: inset 0 0 0 3px #16241c, inset 0 6px 0 rgba(120, 90, 40, .16), 0 0 0 4px #f8b449, 0 0 26px rgba(248, 180, 73, .55); }
.nm-field input::placeholder { color: rgba(22, 36, 28, .28); }
.nm-field.bump { animation: nm-bump .14s ease-out; } @keyframes nm-bump { 45% { transform: translateY(-2px) scale(1.012); } }
.nm-field.shake { animation: nm-shake .38s ease; } @keyframes nm-shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.nm-shine { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; pointer-events: none; }
.nm-shine::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 28%; opacity: 0; transform: skewX(-18deg); background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent); }
.nm.signed .nm-shine::before { animation: nm-shine .9s ease .12s; } @keyframes nm-shine { 0% { left: -40%; opacity: 1; } 100% { left: 120%; opacity: 1; } }
.nm.signed .nm-field input { background: linear-gradient(#fbf4df, #efe2bd); }
/* el sello: cae de golpe en la esquina de la placa */
.nm-stamp { --st: rotate(-9deg); position: absolute; right: -10px; top: -16px; padding: 5px 11px 3px; border: 3px solid #e2483d; border-radius: 8px; pointer-events: none; opacity: 0; transform: var(--st) scale(2.3);
  background: rgba(246, 239, 220, .92); color: #e2483d; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(226, 72, 61, .35); }
.nm.signed .nm-stamp { animation: nm-stamp .34s cubic-bezier(.3, 1.5, .5, 1) .04s forwards; }
@keyframes nm-stamp { to { opacity: 1; transform: var(--st) scale(1); } }

/* 16 bombillas: una por caracter (rojas al llegar al tope) */
.nm-meter { display: flex; align-items: center; gap: 12px; margin: 0 2px; }
.nm-dots { flex: 1; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 5px; }
.nm-dots i { justify-self: center; width: 100%; max-width: 12px; aspect-ratio: 1; border-radius: 50%; background: #0b1d15; box-shadow: inset 0 0 0 1.5px rgba(255, 217, 138, .26); transition: background .12s, box-shadow .12s, transform .15s; }
.nm-dots i.on { background: radial-gradient(circle at 35% 30%, #fffbe8, #ffd98a 45%, #f8b449); box-shadow: 0 0 7px rgba(255, 200, 90, .9); }
.nm-dots i.pop { animation: nm-dot .22s ease-out; } @keyframes nm-dot { 40% { transform: scale(1.45); } }
.nm-dots.full i.on { background: radial-gradient(circle at 35% 30%, #ffe6df, #ff8a7a 45%, #fe5f55); box-shadow: 0 0 7px rgba(254, 95, 85, .9); }
.nm-dots.nope { animation: nm-shake .3s ease; }
.nm-meter output { min-width: 3.6em; text-align: right; font-family: var(--mono); font-size: 14px; letter-spacing: .06em; color: var(--brass-lt); font-variant-numeric: tabular-nums; }
.nm-hint { margin: 12px 2px 16px; font-size: 17px; line-height: 1.3; color: rgba(242, 233, 214, .66); }
.nm-acts { display: flex; align-items: center; gap: 16px; transition: opacity .3s; }
.nm-acts .btn-ink { flex: 1 1 auto; width: auto; padding: 14px 20px; font-size: 17px; }
.nm-skip { flex: none; padding: 8px 4px; font-family: var(--mono); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: rgba(242, 233, 214, .55); text-decoration: underline; text-underline-offset: 4px; }
.nm-skip:hover, .nm-skip:focus-visible { color: var(--paper); }
.nm.signed .nm-acts, .nm.skipped .nm-acts { opacity: 0; pointer-events: none; }
.nm-card.empty .nm-acts .btn-ink { opacity: .6; }
/* ya firmado: "▶ CONTINUAR" parpadea en su sitio, como en una recreativa (clic, Intro o esperar) */
.nm-next { position: absolute; left: 50%; bottom: 30px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; opacity: 0; pointer-events: none; transform: translateX(-50%);
  font-family: var(--mono); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-lt); white-space: nowrap; }
.nm-next::before { content: ""; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.nm-next kbd { display: inline-flex; padding: 2px 5px; border-radius: 4px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 217, 138, .35); }
.nm-next kbd .ic { width: 16px; height: 16px; margin: 0; }
.nm.signed .nm-next { pointer-events: auto; animation: nm-next-in .3s ease 1.1s forwards, nm-blink 1.1s steps(2) 1.4s infinite; }
@keyframes nm-next-in { to { opacity: 1; } } @keyframes nm-blink { 50% { opacity: .35; } }

/* fichas de pixel que saltan del sello */
.nm-burst { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; }
.nm-burst i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; background: #ffd98a; box-shadow: 0 0 0 1.5px #16241c; animation: nm-fly .75s cubic-bezier(.2, .7, .3, 1) forwards; }
.nm-burst i.r { background: #fe5f55; } .nm-burst i.w { background: #fff6dc; }
@keyframes nm-fly { to { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }

/* movil en vertical: el bocadillo arriba a lo ancho, el crupier asomando a la izquierda y la tarjeta en la mitad de arriba (el teclado no la tapa) */
@media (max-width: 720px) {
  .nm { place-items: start center; }
  .nm-in { width: calc(100 * var(--vw) - 24px); padding-top: 14px; --face: 104px; --bub: 140px; }
  /* hueco fijo para el bocadillo (crece hacia arriba desde la cabeza del crupier): la tarjeta no se mueve mientras escribe */
  .nm-stage { align-self: stretch; width: auto; height: calc(var(--bub) + var(--face)); margin-bottom: -20px; }
  .nm-beam, .nm-pool { left: calc(var(--face) / 2 + 4px); }
  .nm-stage .dealer.big { position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: var(--face); }
  .nm-stage .dealer.big .dl-face { margin-left: 4px; }
  .nm-stage .dealer.big .dl-bubble { left: 0; right: 0; bottom: calc(100% + 4px); width: auto; max-width: none; font-size: calc(22px * var(--dll, 1)); padding: 9px 14px 23px 12px; transform-origin: 20% 100%;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 76px calc(100% - 12px), 56px 100%, 38px calc(100% - 12px), 0 calc(100% - 12px)); }
  .nm-card { padding: 18px 20px 16px; } .nm-card > .mqw { --mqi: 11px; --mqb: 6px; }
  .nm-top b { font-size: 13px; } .nm-top em { font-size: 12px; } .nm-ic .ic { width: 24px; height: 24px; }
  .nm-field { margin: 12px 0 10px; } .nm-field input { height: 56px; padding: 4px 12px 0; font-size: 32px; }
  .nm-stamp { --st: translateY(-50%) rotate(-9deg); font-size: 19px; right: 10px; top: 50%; }   /* sobre la placa: en la esquina taparia el numero de socio */
  .nm-dots { gap: 3px; }
  .nm-hint { margin: 10px 2px 12px; font-size: 15.5px; }
  .nm-acts { gap: 12px; } .nm-acts .btn-ink { padding: 12px 14px; font-size: 15.5px; } .nm-skip { font-size: 13px; }
}
/* pantallas bajas (movil en horizontal, portatiles pequenos): todo mas compacto */
@media (max-height: 560px) and (min-width: 721px) {
  .nm-in { padding-top: 40px; --face: 118px; } .nm-stage { margin-bottom: -22px; }
  .nm-card { padding: 16px 22px 14px; } .nm-field { margin: 10px 0 8px; } .nm-field input { height: 52px; font-size: 32px; }
  .nm-hint { margin: 8px 2px 10px; font-size: 15.5px; } .nm-acts .btn-ink { padding: 10px 16px; font-size: 15.5px; }
  .nm-stage .dealer.big .dl-bubble { font-size: calc(22px * var(--dll, 1)); }
}
html.reduce-motion .nm-beam u, html.reduce-motion .nm-burst { display: none; }

/* ------------------------------------------------ Ajustes > General: "Tu nombre" (a todo lo ancho, debajo del resto) */
.set-name { order: 4; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 24px; align-items: center; }
.set-name .sn-head { grid-area: 1 / 1; display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.set-card.set-name .sn-head h3 { margin: 0; }
.sn-no { font-style: normal; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; color: rgba(255, 217, 138, .5); white-space: nowrap; }
.set-name .set-note { grid-area: 2 / 1; margin: 6px 0 0; }
.set-name .sn-row { grid-area: 1 / 2 / 3 / 3; position: relative; }
.sn-row input { display: block; width: 100%; box-sizing: border-box; height: 54px; margin: 0; padding: 4px 118px 0 16px; border: 0; border-radius: 12px; outline: none;
  background: #f6efdc; color: #16241c; font-family: var(--serif); font-size: 30px; line-height: 1; caret-color: #fe5f55;
  box-shadow: inset 0 0 0 3px #16241c, inset 0 5px 0 rgba(120, 90, 40, .16); transition: box-shadow .2s; }
.sn-row input:focus { box-shadow: inset 0 0 0 3px #16241c, inset 0 5px 0 rgba(120, 90, 40, .16), 0 0 0 3px #f8b449, 0 0 18px rgba(248, 180, 73, .45); }
.sn-row input::placeholder { color: rgba(22, 36, 28, .32); }
.sn-ok { position: absolute; right: 10px; top: 50%; padding: 5px 9px 4px; border-radius: 6px; pointer-events: none; opacity: 0; transform: translateY(-50%) scale(.8);
  background: #4bc292; color: #10281c; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: opacity .2s, transform .25s var(--spring); }
.sn-ok.on { opacity: 1; transform: translateY(-50%) scale(1); }
@media (min-width: 901px) {                                              /* escritorio: cabe sin desplazarse con el resto de General (12 idiomas, desde 1280x720) */
  .set-card.set-name { padding-top: 12px; padding-bottom: 12px; }
  .set-name .set-note { margin-top: 3px; }
  .sn-row input { height: 46px; font-size: 27px; }
}
@media (max-width: 900px) {
  .set-name { grid-template-columns: minmax(0, 1fr); }
  .set-name .sn-head, .set-name .set-note, .set-name .sn-row { grid-area: auto; }
  .set-name .sn-row { margin-top: 12px; }
}