:root {
  --bg-color: transparent;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
  color: white;
  font-family: 'Outfit', sans-serif;
}

#app {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* =========================================================
   MANDO — pseudo-elemento para la silueta oscurecida
   ========================================================= */

.controller.ps5 {
  /* Transparent background — no rectangles */
  background: transparent;

  width: 807px;
  height: 651px;
  margin-left: 0;
  margin-top: 0;
  position: relative;
}

/* Pseudo-elemento con la imagen del mando, oscurecida */
.controller.ps5::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url(https://i.imgur.com/fJIyBwn.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  /* Oscurecer solo la imagen del mando */
  filter: brightness(0.04);

  z-index: 0;
  pointer-events: none;
}

/* Todos los hijos del mando encima del pseudo-elemento */
.controller.ps5 > * {
  position: relative;
  z-index: 1;
}

/* =========================================================
   STICKS
   ========================================================= */

.ps5 .sticks {
  width: 367px;
  height: 100px;
  left: 220px;
  top: 333px;
  position: absolute;
}

.ps5 .stick {
  background: url(https://i.imgur.com/nXaGdI2.png);
  width: 100px;
  height: 100px;
  position: absolute;
  transition: transform 0.05s linear;

  /* VERDE NORMAL */
  filter:
    brightness(0)
    saturate(100%)
    invert(55%)
    sepia(95%)
    saturate(1800%)
    hue-rotate(85deg)
    brightness(105%)
    contrast(105%);
}

.ps5 .stick.pressed {
  background-position: -102px 0;

  /* BLANCO AL PULSAR */
  filter:
    brightness(0)
    invert(1);
}

.ps5 .stick.right {
  top: 0;
  left: 267px;
}

/* =========================================================
   BOTONES
   ========================================================= */

.ps5 .abxy {
  width: 181px;
  height: 181px;
  left: 573px;
  top: 178px;
  position: absolute;
}

.ps5 .button {
  background: url(https://i.imgur.com/DVqDSsJ.png);
  width: 58px;
  height: 58px;
  position: absolute;

  opacity: 1;

  transition:
    opacity 0.05s ease-out,
    transform 0.05s ease-out,
    filter 0.05s ease-out;

  /* VERDE NORMAL */
  filter:
    brightness(0)
    saturate(100%)
    invert(55%)
    sepia(95%)
    saturate(1800%)
    hue-rotate(85deg)
    brightness(105%)
    contrast(105%);
}

.ps5 .button.pressed {
  background-position-y: -59px;
  margin-top: 0;

  /* BLANCO AL PULSAR */
  filter:
    brightness(0)
    invert(1);
}

.ps5 .button.active {
  opacity: 1;
  transform: translateY(1px);

  /* BLANCO AL PULSAR */
  filter:
    brightness(0)
    invert(1);
}

.ps5 .a {
  background-position: 0 0;
  left: 61px;
  top: 123px;
}

.ps5 .b {
  background-position: -59px 0;
  left: 123px;
  top: 62px;
}

.ps5 .x {
  background-position: -118px 0;
  left: 0;
  top: 61px;
}

.ps5 .y {
  background-position: -177px 0;
  left: 61px;
  top: 0;
}

/* =========================================================
   OPTIONS / SHARE
   ========================================================= */

.ps5 .arrows {
  left: 195px;
  top: 140px;
  width: 416px;
  height: 57px;
  position: absolute;
}

.ps5 .quadrant {
  display: none;
}

.ps5 .back,
.ps5 .start {
  background: url(https://i.imgur.com/YJRVQxC.png);
  width: 27px;
  height: 57px;

  opacity: 1;
  position: absolute;

  /* VERDE NORMAL */
  filter:
    brightness(0)
    saturate(100%)
    invert(55%)
    sepia(95%)
    saturate(1800%)
    hue-rotate(85deg)
    brightness(105%)
    contrast(105%);
}

.ps5 .start {
  background-position: 27px 0;
  right: 0;
}

.ps5 .back.active,
.ps5 .start.active {
  opacity: 1;
  transform: translateY(1px);

  /* BLANCO AL PULSAR */
  filter:
    brightness(0)
    invert(1);
}

/* =========================================================
   D-PAD
   ========================================================= */

.ps5 .dpad {
  width: 144px;
  height: 144px;
  left: 71px;
  top: 196px;
  position: absolute;
}

.ps5 .face {
  background: url(https://i.imgur.com/hCmzXWK.png);
  position: absolute;

  opacity: 1;

  transition:
    opacity 0.05s ease-out,
    transform 0.05s ease-out,
    filter 0.05s ease-out;

  /* VERDE NORMAL */
  filter:
    brightness(0)
    saturate(100%)
    invert(55%)
    sepia(95%)
    saturate(1800%)
    hue-rotate(85deg)
    brightness(105%)
    contrast(105%);
}

.ps5 .face.active, .ps5 .face.pressed {
  opacity: 1;
  transform: translateY(1px);

  /* BLANCO AL PULSAR */
  filter:
    brightness(0)
    invert(1);
}

.ps5 .face.up {
  background-position: 0 -68px;
  width: 52px;
  height: 63px;
  left: 46px;
}

.ps5 .face.down {
  background-position: -54px 63px;
  width: 52px;
  height: 63px;
  left: 46px;
  top: 81px;
}

.ps5 .face.left {
  background-position: -108px -68px;
  width: 64px;
  height: 52px;
  left: -1px;
  top: 47px;
}

.ps5 .face.right {
  background-position: -175px -68px;
  width: 63px;
  height: 52px;
  left: 81px;
  top: 46px;
}

/* =========================================================
   L1 / R1
   ========================================================= */

.ps5 .bumpers {
  width: 620px;
  height: 35px;
  left: 93px;
  top: 114px;
  position: absolute;
  z-index: 2;
  overflow: hidden;
}

.ps5 .bumper {
  background: url(https://i.imgur.com/2YssqRT.png);
  background-repeat: no-repeat;
  background-size: 110px 35px;
  width: 110px;
  height: 35px;

  opacity: 1;
  position: absolute;
  overflow: hidden;

  /* VERDE NORMAL */
  filter:
    brightness(0)
    saturate(100%)
    invert(55%)
    sepia(95%)
    saturate(1800%)
    hue-rotate(85deg)
    brightness(105%)
    contrast(105%);
}

.ps5 .bumper.active,
.ps5 .bumper.pressed {
  opacity: 1;
  transform: translateY(1px);

  /* BLANCO AL PULSAR */
  filter:
    brightness(0)
    invert(1);
}

.ps5 .bumper.left {
  left: 0;
}

.ps5 .bumper.right {
  right: 0;
  background-position: 0 0;
  /* Hacemos un scale ligerísimamente mayor para tapar bordes sin clip-path */
  transform: scaleX(-1.01) scaleY(1.01);
  transform-origin: center;
}

.ps5 .bumper.right.active,
.ps5 .bumper.right.pressed {
  background-position: 0 0;
  transform: scaleX(-1) translateY(1px);

  filter:
    brightness(0)
    invert(1);
}

/* =========================================================
   L2 / R2
   NORMAL  = VERDE
   PULSADO = BLANCO
   ========================================================= */

.ps5 .triggers {
  width: 619px;
  height: 108px;
  left: 94px;
  position: absolute;
  top: 0;
  z-index: 1;
}

.ps5 .trigger {
  background: url(https://i.imgur.com/LsxmGBD.png);
  width: 111px;
  height: 108px;

  opacity: 1;
  position: absolute;
  top: 0;

  /* VERDE NORMAL */
  filter:
    brightness(0)
    saturate(100%)
    invert(55%)
    sepia(95%)
    saturate(1800%)
    hue-rotate(85deg)
    brightness(105%)
    contrast(105%);
}

.ps5 .trigger.left {
  left: 0;
}

.ps5 .trigger.right {
  background-position: -113px 0;
  right: 0;
}

/* BLANCO AL PULSAR L2/R2 */
.ps5 .trigger.active,
.ps5 .trigger.pressed {
  opacity: 1;

  filter:
    brightness(0)
    invert(1);
}

/* =========================================================
   TOUCHPAD + LOGO GSK — grande y centrado, sin cuadrado
   ========================================================= */

/* Tira LED del DualSense alrededor del touchpad (forma de U) */
.controller.ps5::after {
  content: '';
  position: absolute;
  
  /* Posición y tamaño ajustados para rodear el logo/touchpad */
  left: 266px;
  top: 125px;
  width: 275px;
  height: 145px;

  /* Borde solo en los lados y abajo, sin borde arriba */
  border-left: 2px solid rgba(0, 220, 50, 0.6);
  border-right: 2px solid rgba(0, 220, 50, 0.6);
  border-bottom: 2px solid rgba(0, 220, 50, 0.6);
  
  /* Curvas en las esquinas para seguir la forma del mando */
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;

  /* Transformación para hacer que la parte inferior sea más estrecha (trapecio) */
  transform: perspective(600px) rotateX(15deg);
  
  /* Resplandor verde LED simulando luz */
  box-shadow:
    -3px 3px 8px rgba(0, 220, 50, 0.5),
    3px 3px 8px rgba(0, 220, 50, 0.5),
    inset -2px -2px 6px rgba(0, 220, 50, 0.2),
    inset 2px -2px 6px rgba(0, 220, 50, 0.2);

  z-index: 2;
  pointer-events: none;
}

.ps5 .touchpad {
  position: absolute;

  /* Centrado en el touchpad del mando */
  left: 269px;
  top: 128px;

  width: 270px;
  height: 140px;

  background-image: url("Images/GSK_Logo.png");

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  background-color: transparent;

  border-radius: 0;
  border: none;
  box-shadow: none;
  outline: none;

  opacity: 1;

  transition:
    opacity 0.05s ease-out,
    transform 0.05s ease-out,
    filter 0.05s ease-out;

  z-index: 3;
}

/* AL PULSAR EL TOUCHPAD */
.ps5 .touchpad.active {
  opacity: 1;
  transform: translateY(1px);

  filter:
    drop-shadow(0 0 8px white)
    brightness(1.3);
}

/* =========================================================
   BOTÓN PS
   NORMAL  = invisible (se funde con el mando oscuro)
   PULSADO = aparece el logo PS_Color.png
   ========================================================= */

.ps5 .ps {
  position: absolute;

  left: 373px;
  top: 345px;

  width: 60px;
  height: 60px;

  background-image: url('Images/PS_Color.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;

  /* Invisible normalmente */
  opacity: 0;

  transition:
    opacity 0.15s ease-out,
    transform 0.05s ease-out;

  z-index: 3;
}

/* AL PULSAR → APARECE EL LOGO PS */
.ps5 .ps.active {
  opacity: 1;
  transform: translateY(1px);
}

/* =========================================================
   FOCUS
   ========================================================= */

#gv-controller {
  cursor: pointer;
}

/* =========================================================
   LANDING PAGE (BROADCASTER UI)
   ========================================================= */

.landing-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #050505;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  font-family: 'Outfit', sans-serif;
  color: #fff;
  transition: opacity 0.3s ease;
  overflow: hidden;
}

.background-grid {
  position: absolute;
  top: -50%; left: -50%; right: -50%; bottom: -50%;
  background-image: 
    linear-gradient(rgba(0, 220, 50, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 220, 50, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: -1;
  transform: rotateX(60deg) translateY(0);
  animation: gridMove 10s linear infinite;
  perspective: 1000px;
}

@keyframes gridMove {
  0% { transform: rotateX(60deg) translateY(0); }
  100% { transform: rotateX(60deg) translateY(40px); }
}

.landing-content {
  background: rgba(10, 10, 10, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 220, 50, 0.4);
  padding: 50px;
  border-radius: 16px;
  text-align: center;
  max-width: 650px;
  box-shadow: 0 0 40px rgba(0, 220, 50, 0.1), inset 0 0 20px rgba(0, 220, 50, 0.05);
  position: relative;
}

.gsk-logo-large {
  width: 160px;
  height: 160px;
  margin: 0 auto 20px;
  background-image: url("Images/GSK_Logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 15px rgba(0, 220, 50, 0.4));
}

.glitch-text {
  margin: 0 0 10px 0;
  font-size: 2.2rem;
  color: #00DC32;
  text-shadow: 0 0 15px rgba(0, 220, 50, 0.6);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  position: relative;
}

.subtitle {
  color: #aaa;
  margin-bottom: 20px;
  line-height: 1.5;
  font-size: 1.05rem;
}

.status-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #888;
  font-size: 0.9rem;
  margin-bottom: 35px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.status-indicator .dot {
  width: 10px;
  height: 10px;
  background-color: #ffaa00;
  border-radius: 50%;
  box-shadow: 0 0 10px #ffaa00;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.7; }
  50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 15px #ffaa00; }
  100% { transform: scale(0.95); opacity: 0.7; }
}

.custom-id-container {
  margin-bottom: 25px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.custom-id-container label {
  color: #00DC32;
  font-size: 0.95rem;
  letter-spacing: 1px;
}

.custom-id-container input {
  padding: 12px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 220, 50, 0.4);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.custom-id-container input::placeholder {
  color: #555;
  text-transform: none;
}

.custom-id-container input:focus {
  outline: none;
  border-color: #00DC32;
  box-shadow: 0 0 10px rgba(0, 220, 50, 0.3);
}

.error-text {
  color: #ff4444;
  font-size: 0.85rem;
  margin: 0;
}

.error-text.hidden {
  display: none;
}

.btn-gsk {
  background: linear-gradient(135deg, #00DC32 0%, #009922 100%);
  color: #000;
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 1px;
  border: 1px solid #00ff3c;
  border-radius: 4px;
  padding: 16px 45px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(0, 220, 50, 0.4);
  text-transform: uppercase;
}

.btn-gsk:hover {
  background: linear-gradient(135deg, #00ff3c 0%, #00cc2d 100%);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 30px rgba(0, 220, 50, 0.7);
}

.room-info {
  margin-top: 35px;
  padding-top: 35px;
  border-top: 1px solid rgba(0, 220, 50, 0.2);
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.room-info.hidden {
  display: none;
}

.warning-box {
  background: rgba(255, 68, 68, 0.1);
  border-left: 4px solid #ff4444;
  padding: 12px 18px;
  text-align: left;
  margin-bottom: 25px;
  font-size: 0.95rem;
  color: #ffcccc;
  line-height: 1.5;
}

.url-container {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.url-container input {
  flex: 1;
  padding: 14px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 220, 50, 0.4);
  color: #00ff3c;
  font-family: monospace;
  font-size: 1.05rem;
  border-radius: 4px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.url-container input:focus {
  outline: none;
  border-color: #00DC32;
  box-shadow: 0 0 10px rgba(0, 220, 50, 0.3);
}

.btn-gsk-outline {
  background: rgba(0, 220, 50, 0.05);
  color: #00DC32;
  border: 1px solid #00DC32;
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: 4px;
  padding: 0 25px;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
}

.btn-gsk-outline:hover {
  background: rgba(0, 220, 50, 0.2);
  box-shadow: 0 0 15px rgba(0, 220, 50, 0.4);
}

.copy-msg {
  color: #00DC32;
  font-size: 0.95rem;
  margin: 0;
  min-height: 20px;
  font-weight: 600;
}