:root {
  color-scheme: light dark;
  --bg: #f7f7f8;
  --bg-elevated: #ffffff;
  --text: #1a1a1a;
  --text-muted: #6b6b70;
  --border: #e2e2e6;
  --accent: #3d5afe;
  --accent-text: #ffffff;
  --badge-bg: #eef0ff;
  --badge-text: #3346c7;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121214;
    --bg-elevated: #1c1c1f;
    --text: #ececec;
    --text-muted: #9a9aa2;
    --border: #2e2e33;
    --accent: #7c8bff;
    --accent-text: #0e0e10;
    --badge-bg: #22264a;
    --badge-text: #b7c0ff;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  }
}

* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  line-height: 1.5;
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Header */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.site-brand {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--text);
}

/* En pantallas estrechas, título y subtítulo con "baseline" quedaban
   apretados o cortándose a media palabra -- en dos líneas se lee mejor.
   align-items pasa a flex-start en la cabecera para que el botón de
   idioma se quede arriba en vez de centrado contra el bloque de título,
   que ahora ocupa más alto. flex-wrap:nowrap + min-width:0 en
   .site-brand es necesario para que el botón de idioma se quede en la
   MISMA fila (arriba a la derecha) en vez de caer a una fila aparte --
   sin min-width:0 un flex item nunca se encoge por debajo del ancho de
   su contenido, y el subtítulo (la línea más larga) empujaba al botón
   fuera de la fila. Al encogerse el bloque de título, el subtítulo
   puede partirse en más de una línea si hace falta, cosa que no importa.
*/
@media (max-width: 480px) {
  .site-header .wrap {
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  .site-brand {
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }

  .lang-switch {
    flex-shrink: 0;
  }
}

.site-brand:hover {
  text-decoration: none;
}

.site-brand strong {
  font-size: 1.15rem;
}

.site-brand span {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.lang-switch {
  font-size: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  color: var(--text-muted);
}

.lang-switch:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

/* Search / filters */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.5rem 0;
}

.filters input[type="text"],
.filters select {
  font: inherit;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text);
}

.filters input[type="text"] {
  flex: 1 1 220px;
}

.filters button {
  font: inherit;
  padding: 0.55rem 1.2rem;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-text);
  cursor: pointer;
}

.filters button:hover {
  opacity: 0.9;
}

/* En móvil, el buscador y los desplegables en fila apretaban demasiado
   (el input de texto se quedaba con muy poco ancho útil) -- en columna a
   ancho completo se usa mejor el espacio. El input tenía flex: 1 1 220px
   para repartirse el ANCHO en fila -- en columna ese mismo 220px pasa a
   ser el eje principal (alto), dejando el buscador altísimo; hay que
   resetear el flex a "auto" aquí para que cada campo mida lo que le
   corresponde por su propio contenido/padding, no 220px de alto. */
@media (max-width: 640px) {
  .filters {
    flex-direction: column;
    align-items: stretch;
  }

  .filters input[type="text"],
  .filters select,
  .filters button {
    width: 100%;
    flex: 0 0 auto;
  }
}

/* Game grid */

.game-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.1rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.game-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease;
  color: var(--text);
}

.game-card:hover {
  transform: translateY(-3px);
  text-decoration: none;
}

.game-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background: var(--border);
}

.game-card .game-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.7rem 0.8rem 0.9rem;
}

.game-card .game-title {
  font-size: 0.95rem;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.25;
  min-height: calc(1.25em * 2);
  margin-bottom: 0.35rem;
}

.platform-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: auto;
}

.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-text);
}

.empty-state {
  color: var(--text-muted);
  padding: 3rem 0;
  text-align: center;
}

/* Pagination */

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin: 1.5rem 0 2.5rem;
  font-size: 0.9rem;
}

.page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 0.5rem;
  border-radius: var(--radius);
  color: var(--text);
}

.page-link:hover {
  background: var(--badge-bg);
  text-decoration: none;
}

.page-link.is-current {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

.page-ellipsis {
  color: var(--text-muted);
  padding: 0 0.2rem;
}

/* Game detail page */

.game-detail-header {
  margin: 1.5rem 0 1rem;
}

.game-detail-header img {
  float: left;
  width: 120px;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius);
  margin: 0 1.2rem 0.5rem 0;
  background: var(--border);
  box-shadow: var(--shadow);
}

.game-detail-header h1 {
  margin-top: 0;
}

.game-detail-header::after {
  content: "";
  display: table;
  clear: both;
}

.game-detail-header h1 {
  margin: 0.2rem 0 0;
}

.source-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.8rem;
  margin: 1.5rem 0;
}

.source-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.8rem 1rem;
}

.source-card img {
  width: 64px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--border);
}

.source-card .source-body {
  flex: 1;
  min-width: 0;
}

.source-card .source-platform {
  font-weight: 600;
}

.source-card .source-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.3rem;
  font-size: 0.9rem;
}

.btn {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 0.85rem;
  font-weight: 600;
}

.btn:hover {
  opacity: 0.9;
  text-decoration: none;
}

.description {
  color: var(--text-muted);
  max-width: 65ch;
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 3rem;
  padding: 1.5rem 0 2.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Admin (bootstrap-free, plain tables) */

table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 2rem;
}

th,
td {
  border: 1px solid var(--border);
  padding: 0.4rem 0.6rem;
  text-align: left;
}

pre {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 1rem;
  overflow-x: auto;
  border-radius: var(--radius);
}