:root {
  --fondo: #0e1020; --tarjeta: #1b1d2b; --borde: #2b3048; --texto: #f0f2f8; --suave: #a8b0c8; --oro: #f5c542; --cian: #5be0ff; --rojo: #e5484d;
  --letra: 'Press Start 2P', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fondo); color: var(--texto); overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
body { font-family: var(--letra); font-size: 11px; line-height: 1.7; }
#mundo { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; image-rendering: pixelated; touch-action: none; outline: none; }
/* En el móvil se juega EN HORIZONTAL: si el teléfono está en vertical (y no se puede bloquear la orientación), el juego se gira 90°. */
body.girado #mundo { left: 100%; top: 0; width: 100vh; width: 100lvh; height: 100vw; transform-origin: 0 0; transform: rotate(90deg); }
body.girado .barra-texto { left: 12px !important; right: 12px !important; top: 12px !important; bottom: auto !important; width: auto !important; transform: none !important; }   /* se escribe en vertical, sin girar el móvil */
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pantalla { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 16px;
  background: radial-gradient(ellipse at 50% 30%, #23284a 0%, #0e1020 70%); overflow-y: auto; z-index: 10; }
.pantalla[hidden] { display: none; }
#logo { width: min(80vw, 480px); height: auto; image-rendering: pixelated; }
.lema { color: var(--suave); text-align: center; margin: 0; }
.pie { color: var(--suave); font-size: 9px; text-align: center; margin: 0; }
.error { color: var(--rojo); min-height: 1em; text-align: center; margin: 0; max-width: 420px; }
.tarjeta { background: var(--tarjeta); border: 4px solid var(--borde); box-shadow: 0 0 0 4px #0a0b14, 0 12px 0 #0a0b14; padding: 18px; display: flex; flex-direction: column; gap: 12px; width: min(100%, 380px); }
.tarjeta.ancha { width: min(100%, 520px); }
.tarjeta h2 { font-size: 14px; color: var(--oro); margin: 0; }
.tarjeta p { margin: 0; font-size: 10px; color: var(--texto); }
label { font-size: 9px; color: var(--suave); }
input { font-family: var(--letra); font-size: 12px; padding: 10px; background: #0e1020; color: var(--texto); border: 3px solid var(--borde); outline: none; width: 100%; }
input:focus { border-color: var(--cian); }
.boton { font-family: var(--letra); font-size: 11px; padding: 12px 14px; background: #3f78e0; color: #fff; border: 0; box-shadow: inset 0 -4px 0 #1b3f8a, 0 0 0 3px #0a0b14; cursor: pointer; }
.boton:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 #1b3f8a, 0 0 0 3px #0a0b14; }
.boton.grande { font-size: 13px; padding: 14px; background: #3aa860; box-shadow: inset 0 -4px 0 #1b6a38, 0 0 0 3px #0a0b14; }
.boton:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }
.creador { display: flex; gap: 16px; align-items: center; }
#vista { width: 128px; height: 256px; image-rendering: pixelated; background: #8ed29e; border: 3px solid var(--borde); flex: none; }
.opciones { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.opcion { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 6px; }
.opcion span { text-align: center; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opcion .nombre { grid-column: 1 / -1; color: var(--suave); font-size: 8px; text-align: left; }
.opcion button { font-family: var(--letra); height: 34px; background: var(--borde); color: #fff; border: 0; cursor: pointer; box-shadow: inset 0 -3px 0 #0a0b14; }
.chat { position: fixed; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 8px; z-index: 5; max-width: 560px; margin: 0 auto; }
.chat[hidden] { display: none; }
@media (max-width: 480px) { .creador { flex-direction: column; } #vista { width: 96px; height: 192px; } }

body.girado .minijuego { left: 100% !important; width: 100vh !important; width: 100dvh !important; height: 100vw !important; transform-origin: 0 0; transform: rotate(90deg); }

[hidden] { display: none !important; }

/* La fila de emojis encima de la barra de escribir. */
.fila-emojis { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; margin-bottom: 6px; background: rgba(10,12,20,.92); border: 2px solid #4a5070; border-radius: 6px; }
.fila-emojis button { font: 20px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; background: #22263a; border: 1px solid #3a4060; border-radius: 4px; padding: 4px 5px; cursor: pointer; touch-action: manipulation; }
.fila-emojis button:active { background: #3a4a8c; }

/* Mantener pulsado (cruceta, joystick, botones) no selecciona la página ni abre «copiar» (sí se puede escribir y seleccionar en los cuadros de texto). */
html, body, #mundo, canvas, button, .minijuego { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* La portada para los que llegan de fuera (Instagram, Google): qué es y cómo se entra */
.ventajas, .pasos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 10px; color: var(--texto); text-align: center; }
.pasos { color: var(--oro); }
.boton.unirse { text-decoration: none; background: #2aabee; box-shadow: inset 0 -4px 0 #1a7fb3, 0 0 0 3px #0a0b14; text-align: center; }
.tarjeta.aviso { border-color: #2aabee; text-align: center; }
.tarjeta.aviso .boton { text-decoration: none; }

/* JUGAR: el botón arcade de la portada */
.jugar { font-family: var(--letra); font-size: 34px; letter-spacing: 4px; color: #3a2a00; background: #f5c542; border: 0; padding: 22px 46px; cursor: pointer;
  box-shadow: inset 0 -8px 0 #c47f00, inset 0 6px 0 #fff2b0, 0 0 0 5px #0a0b14, 0 0 28px rgba(245,197,66,.55); animation: latido 1.6s ease-in-out infinite; }
.jugar:active { transform: translateY(4px); box-shadow: inset 0 -4px 0 #c47f00, 0 0 0 5px #0a0b14; }
.jugar:focus-visible { outline: 4px solid #5be0ff; outline-offset: 6px; }
@keyframes latido { 50% { box-shadow: inset 0 -8px 0 #c47f00, inset 0 6px 0 #fff2b0, 0 0 0 5px #0a0b14, 0 0 46px rgba(245,197,66,.9); } }
.insert { font-family: var(--letra); font-size: 10px; color: #ff5bd1; margin: 0; animation: parpadeo 1s steps(2) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .jugar, .insert { animation: none; } }