@font-face { font-family: 'Pixel'; src: url('pixel.ttf') format('truetype'); font-display: swap; }
:root { --pixel: 'Pixel'; }
html, body { margin: 0; height: 100%; background: #000; color: #ddd; font-family: 'Pixel', monospace; overflow: hidden;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  /* La botonera va pegada abajo (sobre el área segura del teléfono: gestos, home) y la pantalla
     del juego se centra en lo que queda arriba. */
  /* el contenedor que React sí administra no genera caja: #app sigue midiendo el 100 % del body */
  #juego { display: contents; }
  #app { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%;
    padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; }
  #screen { margin: auto 0; }   /* centrado vertical en el espacio libre */
  #screen { image-rendering: pixelated; image-rendering: crisp-edges; background: #000; touch-action: none; display: block; }
  /* --- Botonera estilo joystick Atari: plástico negro, biseles duros, botón naranja --- */
  #controls { display: none; width: 100%; max-width: 480px; justify-content: space-between; align-items: center;
    padding: 14px 22px calc(18px + env(safe-area-inset-bottom)); margin-bottom: calc(-1 * env(safe-area-inset-bottom)); box-sizing: border-box; touch-action: none;
    background: #1a1a1a;
    border-top: 6px solid #6b3b1e;   /* franja de madera del 2600 */
    box-shadow: inset 0 6px 0 #8a4f2a, inset 0 12px 0 #5c321a, inset 0 -4px 0 #000; }
  #controls.on { display: flex; }
  #dpad { display: grid; grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(3, 50px); gap: 0;
    filter: drop-shadow(0 6px 0 #000); }
  .k { background: #3a3a3a; color: #111; font-size: 18px; border: 0; border-radius: 0;
    display: flex; align-items: center; justify-content: center; touch-action: none;
    box-shadow: inset 4px 4px 0 #5a5a5a, inset -4px -4px 0 #1c1c1c; }
  .k.down { background: #2a2a2a; box-shadow: inset 4px 4px 0 #161616, inset -4px -4px 0 #444; transform: translateY(2px); }
  #up { grid-area: 1 / 2; } #left { grid-area: 2 / 1; } #right { grid-area: 2 / 3; } #down { grid-area: 3 / 2; }
  #center { grid-area: 2 / 2; background: #3a3a3a; box-shadow: none; }
  #dpad .k { pointer-events: none; }   /* la cruceta entera captura el dedo (joystick), no cada tecla */
  #center::after { content: ''; width: 14px; height: 14px; background: #262626; box-shadow: inset 2px 2px 0 #111, inset -2px -2px 0 #4a4a4a; }
  #fire { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  #btn-a { width: 84px; height: 84px; border-radius: 50%; font-size: 0;
    background: #e8521c; box-shadow: inset 6px 6px 0 #ff8a4a, inset -6px -6px 0 #9c2f0a, 0 6px 0 #000; }
  #btn-a.down { background: #c9430f; box-shadow: inset 6px 6px 0 #8a2a08, inset -6px -6px 0 #e86a30, 0 2px 0 #000; transform: translateY(4px); }
  .label { color: #b8b8b8; font-size: 9px; letter-spacing: 2px; text-shadow: 1px 1px 0 #000; }
  [hidden] { display: none !important; }
#devbar { position: fixed; top: 0; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; align-items: center;
    padding: 4px; font-size: 8px; color: #888; background: #111; border-bottom: 1px solid #333; z-index: 50; }   /* por encima del lobby y del menú */
  #devbar button, #devbar select { font: inherit; font-size: 8px; background: #222; color: #ccc; border: 1px solid #555; padding: 3px 8px; }
  #devbar { flex-wrap: wrap; }
  #devbar button:active { background: #444; }
  #hint { position: fixed; bottom: 6px; left: 0; right: 0; text-align: center; font-size: 8px; color: #555; }


/* --- Entrada (estilo agar.io): nombre, color, cuenta y los dos botones grandes --- */
#lobby { position: fixed; inset: 0; z-index: 25; background: #000; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
#lobby-box { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 340px; padding: 20px 16px;
  background: #050505; border: 4px solid #444; box-shadow: 6px 6px 0 #6b3b1e; }
#lobby-box img { image-rendering: pixelated; }
.lobby-title { font-size: 12px; color: #e8d75a; letter-spacing: 2px; }
/* el campeón vigente y su mensaje, arriba del nombre: lo primero que se ve al abrir */
.lobby-campeon { font-size: 8px; line-height: 2; text-align: center; color: #bbb; margin: -4px 0 0; }
.lobby-campeon b { color: #ffd600; font-weight: normal; }
.lobby-campeon .nombre { color: #fff; }
.lobby-campeon q { display: block; color: #ccc; quotes: '"' '"'; }
#lobby-name { width: 100%; box-sizing: border-box; font: 11px 'Pixel', monospace; text-transform: uppercase; text-align: center; background: #111; color: #fff;
  border: 3px solid #5ad7e0; padding: 12px 8px; outline: none; }
#lobby-name:focus { border-color: #e8d75a; }
.lobby-account { font-size: 8px; line-height: 2; color: #888; text-align: center; }
.lobby-account button { font: 8px 'Pixel', monospace; background: #111; color: #5ad7e0; border: 2px solid #5ad7e0; padding: 8px 10px; cursor: pointer; }
#lobby-play, #lobby-party { width: 100%; font: 11px 'Pixel', monospace; padding: 14px 8px; border: 3px solid #5ad7e0; background: #111; color: #5ad7e0;
  box-shadow: 0 4px 0 #6b3b1e; cursor: pointer; }
#lobby-play.jugar { background: #e8d75a; border-color: #e8d75a; color: #000; }
#lobby-play:active, #lobby-party:active { transform: translateY(4px); box-shadow: none; }
#lobby-msg { font-size: 8px; color: #e0a458; line-height: 2; margin: 0; text-align: center; }
/* Los enlaces de la entrada: la única navegación de la portada, y lo único que un rastreador puede seguir desde / */
#lobby-nav { font-size: 8px; line-height: 2.2; color: #444; text-align: center; }
#lobby-nav a { color: #5ad7e0; text-decoration: none; white-space: nowrap; }   /* que el renglón corte en los separadores, no dentro de un rótulo */
#lobby-nav a:hover { color: #e8d75a; }
/* Firma del estudio: al pie de la entrada, fuera del canvas y nunca durante la partida (#lobby se oculta al jugar) */
#lobby-estudio { font-size: 8px; line-height: 2; color: #666; text-decoration: none; letter-spacing: 1px; }
#lobby-estudio:hover { color: #5ad7e0; }
#lobby .swatches { grid-template-columns: repeat(8, 30px); gap: 6px; margin: 0; }
#lobby .swatches button { width: 30px; height: 30px; }

/* --- Menú flotante: ventana arcade sobre el juego (overlay al 65 % para seguir viendo la pantalla) ---
   Regla visual: cian = navegación · amarillo = acción principal · rojo = peligro · gris = información */
/* top lo ajusta layout() cuando la devbar (local/admin, z-index 50) está visible y taparía el botón */
#menu-btn { position: fixed; top: 8px; right: 8px; z-index: 26;   /* sobre el lobby (25), bajo el propio menú (30) */ font: 9px 'Pixel', monospace; background: #111; color: #e8d75a;
  border: 3px solid #e8d75a; box-shadow: 3px 3px 0 #6b3b1e; padding: 8px 10px; cursor: pointer; }
#menu-btn:active { transform: translate(3px, 3px); box-shadow: none; }
#menu { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .65); display: flex; align-items: center; justify-content: center; padding: 16px; }
#menu-box { background: #050505; border: 4px solid #5ad7e0; box-shadow: 6px 6px 0 #6b3b1e; padding: 0 0 14px; width: 100%; max-width: 340px; max-height: 90vh; overflow: auto;
  animation: bajar .18s steps(4) both; }
@keyframes bajar { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.menu-title { background: #5ad7e0; color: #000; font-size: 10px; letter-spacing: 3px; text-align: center; padding: 10px 8px; margin-bottom: 14px; }
#acciones { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 0 16px; }
#acciones button, #acciones a, #menu-back, #share-panel a, #share-panel button {
  font: 9px 'Pixel', monospace; line-height: 1.6; text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer;
  background: #111; padding: 11px 12px; border: 3px solid #5ad7e0; color: #5ad7e0; box-shadow: 0 4px 0 #6b3b1e; }
#acciones .lista { text-align: left; }
#acciones .primario { background: #e8d75a; border-color: #e8d75a; color: #000; }
#acciones .peligro { border-color: #e8521c; color: #e8521c; }
#acciones button:active, #acciones a:active, #menu-back:active { transform: translateY(4px); box-shadow: none; }
#acciones button:disabled { opacity: .5; }
#acciones .menu-text { font-size: 8px; line-height: 2; color: #aaa; margin: 0; text-align: center; border: 2px dashed #333; padding: 8px; }
#acciones .menu-mount { display: flex; justify-content: center; }
#acciones .menu-text.big { font-size: 11px; color: #fff; border: 0; padding: 4px; }
#menu-back { display: block; margin: 16px 16px 0; width: calc(100% - 32px); }
#menu-msg { font-size: 8px; line-height: 2; color: #e0a458; margin: 12px 16px 0; text-align: center; }
#menu-msg a { color: #5ad7e0; }
.swatches { display: grid; grid-template-columns: repeat(8, 34px); gap: 6px; justify-content: center; width: 100%; margin-bottom: 8px; }
.swatches button { width: 34px; height: 34px; border: 3px solid #333 !important; box-shadow: none !important; padding: 0 !important; }
.swatches button.on { border-color: #fff !important; }
/* "el del juego": un cuadrito más, tachado, para que queden 8 y 8 */
.swatches button.none { background: #111 !important; color: #888 !important; font-size: 12px !important; line-height: 1 !important; }
#share-panel { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }

/* --- Página del día (/dia/fecha) y admin --- */
/* Páginas de texto: el body no se desplaza (por el juego), así que se desplaza el propio contenedor */
.dia { max-width: 520px; margin: 0 auto; padding: 24px 16px 48px; color: #ddd; font-family: 'Pixel', monospace; height: 100%; overflow: auto; box-sizing: border-box; }
/* Páginas de texto: se pueden desplazar pero sin barra visible (el body tiene overflow hidden) */
.dia { scrollbar-width: none; -ms-overflow-style: none; }
.dia::-webkit-scrollbar { display: none; }
.dia h1 { font-size: 14px; letter-spacing: 1px; color: #e8d75a; margin: 0 0 8px; line-height: 1.6; }
.dia .sub { color: #888; font-size: 8px; margin: 0 0 20px; line-height: 1.8; }
.dia .marca { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.dia .marca img { width: 32px; height: 32px; image-rendering: pixelated; }
.dia .marca span { font-size: 10px; color: #5ad7e0; letter-spacing: 2px; }
.tabla { border: 4px solid #444; box-shadow: 6px 6px 0 #6b3b1e; padding: 12px 10px; margin: 0 0 24px; background: #050505; }
.tabla .cab, .tabla .fila { display: grid; grid-template-columns: 44px 1fr 72px; gap: 8px; font-size: 9px; line-height: 2.2; white-space: nowrap; }
.tabla .cab { color: #e8521c; border-bottom: 2px solid #333; margin-bottom: 6px; }
.tabla .fila .p { text-align: right; }
.tabla .fila .n { overflow: hidden; text-overflow: ellipsis; }
.tabla .r1 { color: #e8d75a; } .tabla .r2 { color: #dcdcdc; } .tabla .r3 { color: #e0a458; } .tabla .rx { color: #5ad7e0; }
.tabla .vacia { color: #333; }
.dia .btns { display: flex; flex-wrap: wrap; gap: 10px; }
.dia .btns a, .dia .btns button, .dia .btns input { font: 9px 'Pixel', monospace; line-height: 1.6; background: #111; color: #e8d75a; border: 3px solid #e8d75a;
  box-shadow: 3px 3px 0 #6b3b1e; padding: 10px 12px; text-decoration: none; cursor: pointer; text-transform: uppercase; }
.dia .btns a:active, .dia .btns button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #6b3b1e; }
/* El primario, más alto: 46 px es la altura de toque que piden las guías de móvil, y estaba en 40 */
.dia .btns .jugar { background: #e8521c; border-color: #e8521c; color: #000; padding: 14px 16px; }
.dia .btns .red { color: #5ad7e0; border-color: #5ad7e0; }
.dia .btns input { color: #fff; text-transform: none; }
/* Tabla de puntos de las guías: dos columnas y texto que puede partirse en
   varias líneas (las reglas son frases, no números de cuatro cifras). */
.tabla.puntos .cab, .tabla.puntos .fila { grid-template-columns: 1fr 120px; line-height: 1.9; }
.tabla.puntos .fila { padding: 3px 0; }
.tabla.puntos .fila .n, .tabla.puntos .fila .p { white-space: normal; overflow: visible; }
.tabla.puntos .fila .p { color: #e8d75a; }
.dia .grupo { border: 2px dashed #333; padding: 12px; margin-bottom: 20px; }
.dia .grupo-tit { font-size: 8px; color: #e8521c; letter-spacing: 2px; margin-bottom: 10px; }

/* --- Party: panel HTML bajo el juego (sala, tablero en vivo) --- */
#panel { width: 100%; padding: 0 0 12px; box-sizing: border-box; font-size: 9px; line-height: 2; color: #bbb; }
#panel .fila { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; white-space: nowrap; }
#panel .fila .n { overflow: hidden; text-overflow: ellipsis; }
#panel .fila .p { text-align: right; color: #e8d75a; }
#panel .yo { color: #5ad7e0; }
#panel .listo { color: #7c7; }
#panel .tit { color: #e8521c; border-bottom: 2px solid #333; margin-bottom: 4px; }
#panel .code { font-size: 16px; color: #e8d75a; letter-spacing: 4px; text-align: center; margin: 4px 0 8px; }