:root {
  --bg: #0f1115;
  --surface: #171a21;
  --text: #f2f3f5;
  --text-muted: #9aa1ac;
  --accent: #6f8cff;
  --border: #262b35;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.site-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.lang-menu {
  position: relative;
}

.lang-menu summary {
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  user-select: none;
}

.lang-menu summary::-webkit-details-marker {
  display: none;
}

.lang-menu summary:hover {
  color: var(--text);
  border-color: var(--accent);
}

.lang-menu[open] summary {
  color: var(--text);
  border-color: var(--accent);
}

.lang-menu ul {
  position: absolute;
  top: calc(100% + 6px);
  /* Propiedad lógica (no `left`): el punto de anclaje del dropdown sigue el
     lado de inicio del texto — izquierda en LTR, derecha en RTL (árabe) —
     así el botón puede moverse libremente a la derecha en árabe y el menú
     sigue abriendo pegado a él en vez de salirse de la pantalla. */
  inset-inline-start: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 160px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.lang-menu li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  /* Fija el eje del flex en LTR siempre (bandera=1er hijo del DOM queda a
     la izquierda por defecto), independiente de la `direction` heredada del
     `dir="rtl"` de la página — si no, `row-reverse` de abajo se cancelaría
     con la propia inversión que aplica el navegador en contenedores RTL. */
  direction: ltr;
}

/* Bandera y nombre son 2 elementos separados (no un solo texto) para poder
   controlar su orden explícitamente en vez de depender del algoritmo bidi
   del navegador, que en árabe se comportaba distinto fila por fila. En LTR
   el orden natural del DOM ya es bandera→nombre; en RTL (`:dir(rtl)`, p.ej.
   árabe) lo invertimos para que se lea nombre→bandera, como corresponde. */
html[dir="rtl"] .lang-menu li a {
  flex-direction: row-reverse;
}

.lang-menu li a:hover {
  background: rgba(111, 140, 255, 0.15);
}

.lang-menu li a[aria-current="true"] {
  color: var(--accent);
  font-weight: 600;
}

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 20px;
}

h1 {
  font-size: 28px;
  margin-bottom: 8px;
}

.site-title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 40px;
}

.subtitle {
  color: var(--text-muted);
  font-size: 15px;
  margin-bottom: 32px;
}

.placeholder {
  color: var(--text-muted);
  font-size: 15px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 24px;
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.game-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 24px;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.game-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.game-card .logo {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  margin-bottom: 16px;
}

.game-card .game-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
}

.play-badge {
  display: inline-block;
  line-height: 0;
}

.play-badge img {
  height: 46px;
  width: auto;
}

.game-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 0;
}

.game-hero .logo {
  width: 140px;
  height: 140px;
  border-radius: 32px;
  margin-bottom: 20px;
}

.game-hero .game-name {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 28px;
}

.updated {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 32px;
}

.notice {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 32px;
}

.notice a {
  color: var(--accent);
}

article h2 {
  font-size: 19px;
  margin-top: 36px;
  margin-bottom: 10px;
}

article p,
article li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}

article ul {
  padding-left: 20px;
}

article li {
  margin-bottom: 6px;
}

article a {
  color: var(--accent);
}