/* Shared visual layer for game interfaces derived from the hub. */
body.ew-ui {
  color: var(--ew-color-text);
  font-family: var(--ew-font-body);
  background-color: var(--ew-color-paper);
  background-image:
    linear-gradient(var(--ew-color-paper-grid) var(--ew-paper-grid-line), transparent var(--ew-paper-grid-line)),
    linear-gradient(90deg, var(--ew-color-paper-grid) var(--ew-paper-grid-line), transparent var(--ew-paper-grid-line));
  background-size: var(--ew-paper-grid-size) var(--ew-paper-grid-size);
}

.ew-ui .cabecera-juego {
  min-height: 76px;
  border-bottom: 2px solid color-mix(in srgb, var(--ew-theme-accent) 32%, transparent);
  background: color-mix(in srgb, var(--ew-color-paper) 88%, var(--ew-theme-background));
}

.ew-ui .cabecera-juego__volver {
  color: var(--ew-color-text-muted);
  border-color: var(--ew-color-border);
  background: var(--ew-color-surface);
}

.ew-ui .cabecera-juego__volver:hover {
  color: var(--ew-color-primary);
  border-color: var(--ew-color-primary);
  background: var(--ew-color-primary-soft);
}

.ew-ui .cabecera-juego__titulo {
  display: inline-flex;
  align-items: center;
  gap: var(--ew-space-3);
  font-family: var(--ew-font-display);
  color: var(--ew-color-text);
  font-size: var(--ew-text-xl);
}

.ew-ui .cabecera-juego__logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.ew-ui .cabecera-juego__modo,
.ew-ui .fis-modo-badge {
  color: var(--ew-color-primary);
  background: var(--ew-color-primary-soft);
  border-color: var(--ew-color-border-strong);
}

.ew-ui .scores-bar {
  background: color-mix(in srgb, var(--ew-color-paper) 82%, transparent);
  border-bottom-color: var(--ew-color-border);
}

.ew-ui .score-badge {
  background: var(--ew-color-surface);
  border-color: var(--ew-color-border);
}

.ew-ui .score-badge__label,
.ew-ui .juego-pregunta__ayuda {
  color: var(--ew-color-text-muted);
}

.ew-ui .score-badge__val {
  color: var(--ew-color-text);
}

.ew-ui .main,
.ew-ui .juego-pregunta {
  color: var(--ew-color-text);
}

.ew-ui .juego-btn-siguiente,
.ew-ui button[class*="juego-btn"],
.ew-ui a[class*="juego-btn"] {
  color: var(--ew-color-primary);
  background: var(--ew-color-primary-soft);
  border-color: var(--ew-color-border-strong);
}

.ew-ui .juego-btn-siguiente:hover,
.ew-ui button[class*="juego-btn"]:hover,
.ew-ui a[class*="juego-btn"]:hover {
  background: color-mix(in srgb, var(--ew-color-primary) 16%, white);
  border-color: var(--ew-color-primary);
}