/* Lo de encima del mundo: la ficha de cada sitio, la pista, la lista y el
   idioma. Colores de pixel-news: fondo de noche, borde claro de 2 px, letra
   de máquina. */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d1220; color: #e8ecf5;
  font: 15px/1.45 ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace; }
canvas { position: fixed; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: crosshair; }

#cargando { position: fixed; inset: 0; display: grid; place-items: center; font-size: 18px; letter-spacing: 2px; color: #8fa0c8; }

#pista { position: fixed; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translateX(-50%);
  margin: 0; padding: 8px 14px; max-width: min(92vw, 620px); text-align: center; font-size: 13px;
  background: #0b0f1ae6; border: 2px solid #c9d3ea; color: #e8ecf5; transition: opacity 1.2s; pointer-events: none; }
#pista.ida { opacity: 0; }

#rincon { position: fixed; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); display: flex; gap: 6px; z-index: 5; }
#rincon button, #lista button { font: inherit; font-size: 13px; color: #e8ecf5; background: #0b0f1acc; border: 2px solid #c9d3ea88;
  padding: 5px 9px; cursor: pointer; }
#rincon button:hover, #lista button:hover { border-color: #ffd257; color: #ffd257; }

#lista { position: fixed; inset: 0; z-index: 6; background: #05070dcc; display: grid; place-items: center; }
#lista[hidden] { display: none; }
#lista nav { max-height: 86vh; overflow: auto; background: #0b0f1a; border: 2px solid #c9d3ea; padding: 14px 18px; min-width: 260px; }
#lista ul { list-style: none; margin: 0; padding: 0; }
#lista li.barrio { margin: 10px 0 4px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
#lista li.barrio:first-child { margin-top: 0; }
#lista li button { width: 100%; text-align: left; border: 0; background: none; padding: 3px 4px; }

/* ---- la ficha ---- */
#ficha { position: fixed; z-index: 4; background: #0b0f1af2; border: 2px solid #c9d3ea; box-shadow: 4px 4px 0 #00000088;
  opacity: 0; transform: translateY(8px); transition: opacity .18s, transform .18s, width .25s, left .25s, right .25s, top .25s, bottom .25s, max-height .25s; }
#ficha.abierta { opacity: 1; transform: none; }
#ficha[hidden] { display: none; }
#ficha .cerrar { position: absolute; top: 4px; right: 6px; z-index: 2; font: inherit; font-size: 20px; line-height: 1; color: #e8ecf5;
  background: #0b0f1acc; border: 0; padding: 2px 6px; cursor: pointer; }
#ficha .medio { position: relative; background: #000; aspect-ratio: 16 / 9; overflow: hidden; }
#ficha .medio video, #ficha .medio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#ficha .medio img { opacity: 0; transition: opacity .6s; }
#ficha .medio img.vista { opacity: 1; }
#ficha .texto { padding: 10px 14px 12px; }
#ficha .barrio { margin: 0; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #8fa0c8; }
#ficha h2 { margin: 2px 0 4px; font-size: 18px; color: #ffd257; letter-spacing: .5px; }
#ficha .corto { margin: 0; }
#ficha .largo, #ficha .tec, #ficha .enlaces { display: none; }
#ficha .tec { color: #8fe0b0; font-size: 13px; }
#ficha .enlaces { list-style: none; padding: 0; margin: 8px 0 0; flex-wrap: wrap; gap: 8px; }
#ficha .enlaces a { display: inline-block; color: #0b0f1a; background: #6fd3ff; padding: 4px 10px; text-decoration: none; font-weight: bold; }
#ficha .enlaces a:hover { background: #ffd257; }

/* pequeña: abajo a la izquierda, sin tapar al héroe */
#ficha.pequena { left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); width: min(340px, 46vw); }
#ficha.pequena .cerrar { display: none; }
/* grande: media pantalla a la derecha */
#ficha.grande { right: max(12px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); width: min(620px, 48vw);
  max-height: 92vh; overflow: auto; }
#ficha.grande .largo, #ficha.grande .tec { display: block; }
#ficha.grande .enlaces { display: flex; }
#ficha.grande h2 { font-size: 22px; }

/* en vertical (móvil): la pequeña es una tira abajo, la grande una hoja */
@media (max-aspect-ratio: 21/20) {
  #ficha.pequena { left: 8px; right: 8px; width: auto; bottom: max(8px, env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 42% 1fr; align-items: center; }
  #ficha.pequena .texto { padding: 6px 10px; }
  #ficha.pequena h2 { font-size: 15px; }
  #ficha.pequena .corto { font-size: 12px; line-height: 1.35; }
  #ficha.grande { left: 6px; right: 6px; width: auto; top: auto; bottom: max(6px, env(safe-area-inset-bottom)); transform: none;
    max-height: 60vh; font-size: 13.5px; }
  #pista { top: max(52px, env(safe-area-inset-top)); }
}
#ficha.pequena:has(.medio[hidden]) { grid-template-columns: 1fr; }