:root {
  --accent: #38bdf8;
  --accent-glow: rgba(56, 189, 248, 0.45);
}

* {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

body {
  background-color: #060911;
  color: #f8fafc;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

.font-display {
  font-family: 'Space Grotesk', sans-serif;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Superficies translúcidas tipo PlayStation 5 */
.ps5-glass {
  background: rgba(12, 18, 32, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.ps5-pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Pestañas y Chips de Consola */
.ps5-tab-active {
  background: #f8fafc;
  color: #060911;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.25);
}

.ps5-tab-inactive {
  color: #94a3b8;
}
.ps5-tab-inactive:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.06);
}

.console-chip {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 10px;
  color: #94a3b8;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.console-chip:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.console-chip.active {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

/* Tarjetas de Juego */
.game-card {
  position: relative;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}

.game-card.focused,
.game-card:hover {
  border-color: #ffffff;
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 28px 4px var(--accent-glow),
    0 20px 35px -10px rgba(0, 0, 0, 0.85);
  z-index: 10;
}

/* Indicadores de Botones del Footer */
.ps5-key {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f8fafc;
}

/* Controles Táctiles Vectoriales */
.touch-btn {
  touch-action: none;
  background: rgba(12, 18, 32, 0.75);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #f8fafc;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
  transition: transform 0.08s ease, background 0.08s ease;
}

.touch-btn.pressed,
.touch-btn:active {
  background: rgba(56, 189, 248, 0.9);
  border-color: #fff;
  color: #060911;
  transform: scale(0.9);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==========================================================================
   BLINDAJE DEL HUD Y REPRODUCTOR EN PC / MÓVIL (Evita pérdida de menú al hacer clic)
   ========================================================================== */
#player-view,
#player-view > div {
  overflow: clip !important; /* Impide que el navegador desplace la vista al enfocar el iframe */
}

#in-game-hud,
#btn-show-hud {
  position: fixed !important;
  top: 10px !important;
  left: 50% !important;
  transform: translate3d(-50%, 0, 0) !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

#remote-video {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  background-color: #000;
}

#emulator-sandbox,
#remote-video {
  position: relative;
  z-index: 1;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), clip-path 0.35s ease;
}

/* MODO INDIVIDUAL HORIZONTAL CENTRADO (Ej: Super Mario Kart, Top Gear) */
/* Jugador 1: Toma la mitad superior (centro en 25%) y la lleva al centro exacto del monitor (50%) */
.split-h-p1 {
  transform-origin: 50% 25% !important;
  clip-path: inset(0 0 50% 0);
  transform: translateY(25%) scale(1.34) !important;
}

/* Jugador 2: Toma la mitad inferior (centro en 75%) y la lleva al centro exacto del monitor (50%) */
.split-h-p2 {
  transform-origin: 50% 75% !important;
  clip-path: inset(50% 0 0 0);
  transform: translateY(-25%) scale(1.34) !important;
}