/*
 * Negociazo: el estilo común del inicio, el ingreso y la marca (estilo Arena)
 * Azul con rayos de luz, contorno de tinta, sombras duras, amarillo para lo importante y botones de caramelo.
 */
:root { --tinta: #0d1033; --oro: #ffcc1a; --rosa: #ff4fb0; --azul: #3d8bff; --verde: #1fd36a; --suave: #5a6290; --hielo: #eef3ff; }
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--tinta); font: 600 15px/1.5 'Rubik', 'Segoe UI', system-ui, sans-serif;
  background: repeating-conic-gradient(from 0deg at 50% -10%, rgba(255,255,255,0.06) 0deg 10deg, transparent 10deg 20deg), radial-gradient(ellipse at 50% 0%, #4f97ff 0%, #1f6bff 45%, #0b2fa8 100%);
  background-color: #1f6bff; background-attachment: fixed;
}
/* El fondo vivo (inicio e ingreso, con N.fondo de marca.js): los rayos giran despacio, una trama de monedas, etiquetas
   y destellos se desliza en diagonal y algunos brillos se prenden y apagan. Todo va detrás del contenido. */
body.n-vivo { background: radial-gradient(ellipse at 50% 0%, #4f97ff 0%, #1f6bff 45%, #0b2fa8 100%); background-color: #1f6bff; background-attachment: fixed; }
body.n-vivo::before { content: ''; position: fixed; left: 50%; top: -12vh; z-index: -1; width: 260vmax; height: 260vmax; margin: -130vmax 0 0 -130vmax; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.075) 0deg 9deg, transparent 9deg 18deg); pointer-events: none; animation: n-rayos 140s linear infinite; will-change: transform; }
body.n-vivo::after {
  content: ''; position: fixed; inset: -220px; z-index: -1; pointer-events: none; opacity: 0.09; animation: n-deriva 36s linear infinite; will-change: transform;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='40' cy='50' r='14'/%3E%3Ccircle cx='40' cy='50' r='5' stroke-width='3'/%3E%3Cg transform='rotate(18 158 32)'%3E%3Cpath d='M138 32 L150 18 H178 V46 H150 Z'/%3E%3Ccircle cx='149' cy='32' r='2.5'/%3E%3C/g%3E%3Cpath d='M110 114 Q112 126 124 128 Q112 130 110 142 Q108 130 96 128 Q108 126 110 114 Z' fill='white' stroke='none'/%3E%3Cpath d='M40 160 V180 M30 170 H50'/%3E%3Ccircle cx='182' cy='172' r='9'/%3E%3Ccircle cx='92' cy='204' r='3' fill='white' stroke='none'/%3E%3Ccircle cx='204' cy='100' r='3' fill='white' stroke='none'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
@keyframes n-rayos { to { transform: rotate(360deg); } }
@keyframes n-deriva { to { transform: translate(220px, 220px); } }
.n-brillos { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.n-brillos i { position: absolute; width: var(--tam); height: var(--tam); background: #fff; opacity: 0; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: n-brilla var(--t) ease-in-out var(--d) infinite; }
@keyframes n-brilla { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 50% { opacity: 0.9; transform: scale(1) rotate(45deg); } }

h1, h2, h3, .boton { font-family: 'Lilita One', 'Rubik', sans-serif; font-weight: 400; letter-spacing: 0.01em; }
a { color: inherit; }
.caja { background: #fff; border: 3px solid var(--tinta); border-radius: 20px; box-shadow: 0 7px 0 var(--tinta); }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px 8px; font-size: 18px; line-height: 1.1; color: var(--tinta); text-decoration: none; background: #fff; border: 3px solid var(--tinta); border-radius: 14px; box-shadow: 0 5px 0 var(--tinta); cursor: pointer; white-space: nowrap; transition: transform 0.08s, box-shadow 0.08s; }
.boton:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--tinta); }
.boton:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--tinta); }
.boton:focus-visible, .n-opcion input:focus-visible + span, input[type="text"]:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; }
.boton--oro { background: var(--oro); }
.boton--verde { background: var(--verde); }
.boton--grande { padding: 14px 34px 12px; font-size: 30px; border-radius: 18px; box-shadow: 0 7px 0 var(--tinta); }
.boton--chico { padding: 6px 12px 5px; font-size: 15px; box-shadow: 0 4px 0 var(--tinta); }
.boton:disabled { color: #8a92bd; background: #e3e8f8; border-color: #aeb6d8; box-shadow: none; cursor: not-allowed; transform: none; }
/* El avatar: el dinosaurio (dinos.js) sobre un fondo claro de su color */
.n-avatar { display: inline-block; flex: none; background: radial-gradient(circle at 50% 30%, #fff 0%, var(--fondo, #fff3c4) 62%); border: 3px solid var(--tinta); border-radius: 50%; box-shadow: 0 3px 0 var(--tinta); overflow: hidden; }
.n-avatar svg { display: block; width: 100%; height: 100%; }
/* Vivo: respira y parpadea; cada ojo se cierra desde su centro */
.n-dino.es-vivo .n-dino-cuerpo { transform-origin: 50% 100%; animation: n-respira 2.6s ease-in-out var(--retraso, 0s) infinite; }
.n-dino.es-vivo .n-ojo { transform-box: fill-box; transform-origin: center; animation: n-parpadea 4.2s var(--retraso, 0s) infinite; }
@keyframes n-respira { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(1.2px) scale(1.015, 0.985); } }
@keyframes n-parpadea { 0%, 91%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.08); } 97% { transform: scaleY(1); } }
[hidden] { display: none !important; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }

/* El botón de la música del inicio, el ingreso y el lobby (musica.js lo dibuja y lo atiende). */
.n-musica { flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; background: #fff; border: 3px solid var(--tinta); border-radius: 50%; box-shadow: 0 4px 0 var(--tinta); cursor: pointer; transition: transform 0.1s; }
.n-musica:hover { transform: translateY(-1px); }
.n-musica:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tinta); }
.n-musica svg { width: 22px; height: 22px; fill: none; stroke: var(--tinta); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.n-musica[aria-pressed="false"] { background: var(--hielo); }
.n-musica.es-derecha { margin-left: auto; }
.n-pie a { color: inherit; }
.n-musica.es-derecha + .boton { margin-left: 0; }

/* La ventana de créditos (musica.js) y el botón que la abre. */
.n-creditos { width: min(460px, calc(100vw - 32px)); padding: 18px 20px 16px; color: var(--tinta); }
.n-creditos::backdrop { background: rgba(13, 16, 51, 0.55); }
.n-creditos h2 { margin: 0 0 8px; font-size: 26px; }
.n-creditos p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; }
.n-creditos a { color: inherit; }
.n-creditos-pie { display: flex; justify-content: flex-end; }
.n-boton-creditos { font: 800 13px Rubik, sans-serif; color: inherit; background: none; border: 0; padding: 2px 4px; text-decoration: underline; cursor: pointer; }