/* =========================================================
   ESTILOS
   Colores principales (cambiá acá si querés otro tono)
   ========================================================= */
:root {
  --fondo-1: #e9f8ff;
  --fondo-2: #bfe6f7;
  --lcd: #bedeDA;
  --tinta: #183440;
  --azul: #1c7fc0;
  --bien: #1e9e6a;
  --pista: #e08a1e;
  --u: 4px; /* 1% del ancho del aparato (lo calcula el juego) */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, var(--fondo-1), var(--fondo-2));
  font-family: "Trebuchet MS", "Segoe UI", Roboto, Arial, sans-serif;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
button { font: inherit; }

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

/* El aparato mantiene la proporción de la imagen (1024 x 1536) */
#aparato {
  position: relative;
  width: min(96vw, 64vh);
  aspect-ratio: 1024 / 1536;
}

#carcasa {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
}

/* ---------- Pantalla LCD ---------- */
#pantalla {
  position: absolute; z-index: 1;
  left: 25.9%; top: 46.2%; width: 48.3%; height: 30.6%;
  background: var(--lcd);
  box-shadow: inset 0 0 calc(var(--u) * 2) rgba(0, 40, 50, 0.35);
  display: grid; grid-template-rows: 21% 58% 21%;
  padding: 0.6% 1.2%;
}
.fila { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }

.icono {
  height: 92%; margin: 0 4%;
  border: calc(var(--u) * 0.35) solid transparent; border-radius: calc(var(--u) * 0.8);
  background: transparent; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--tinta); position: relative;
}
.icono canvas { width: 54%; aspect-ratio: 1; image-rendering: pixelated; }
.icono span {
  font-family: "Courier New", monospace; font-weight: bold;
  font-size: calc(var(--u) * 1.75); line-height: 1; margin-top: 6%; letter-spacing: -0.02em;
}
.icono.cursor { border-color: var(--tinta); background: rgba(24, 52, 64, 0.12); }
.icono.hecho { opacity: 0.4; }
.icono.hecho::after {
  content: ""; position: absolute; right: 8%; top: 6%;
  width: 18%; height: 30%;
  border: solid var(--bien); border-width: 0 calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0;
  transform: rotate(40deg);
}
.icono[data-icono="glow"].lleno canvas { filter: drop-shadow(0 0 calc(var(--u) * 0.8) #fff6a8); }
.icono[data-icono="atencion"] { cursor: default; opacity: 0.25; }
.icono[data-icono="atencion"].encendido { opacity: 1; }
.icono[data-icono="atencion"].apagado { opacity: 0.12; }

#medio { position: relative; overflow: hidden; border-radius: calc(var(--u) * 0.6); }
#lienzo {
  width: 100%; height: 100%; display: block;
  image-rendering: pixelated; cursor: pointer;
}
#mensaje {
  position: absolute; left: 0; right: 0; bottom: 4%;
  margin: 0 auto; width: max-content; max-width: 94%;
  padding: 0.6% 3%;
  background: var(--tinta); color: #e7fbf6;
  font-family: "Courier New", monospace; font-weight: bold;
  font-size: calc(var(--u) * 2.3); letter-spacing: 0.04em;
  pointer-events: none; text-align: center;
}
#mensaje.noche { background: #f4efc6; color: #182050; }

/* ---------- Botones físicos ---------- */
.boton {
  position: absolute; z-index: 3; top: 86.2%;
  width: 11.4%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 0; background: transparent; cursor: pointer;
  color: rgba(24, 52, 64, 0.35); font-weight: bold;
  font-size: calc(var(--u) * 3.2);
  transition: transform 0.06s, background 0.06s;
}
.boton.presionado {
  transform: translate(-50%, -50%) scale(0.92);
  background: rgba(24, 52, 64, 0.18);
}

/* ---------- Tarjeta de mensajes ---------- */
.tarjeta {
  position: absolute; z-index: 4;
  left: 5%; right: 5%; top: 1.5%; max-height: 41%;
  overflow: hidden;
  background: #ffffff; color: var(--tinta);
  border: calc(var(--u) * 0.7) solid var(--tinta);
  border-radius: calc(var(--u) * 3);
  box-shadow: 0 calc(var(--u) * 1) 0 rgba(24, 52, 64, 0.25);
  padding: calc(var(--u) * 3.2) calc(var(--u) * 4);
  display: flex; flex-direction: column; gap: calc(var(--u) * 1.6);
  animation: aparecer 0.18s steps(3);
  cursor: pointer;
}
.tarjeta[hidden] { display: none; }
@keyframes aparecer { from { transform: translateY(-6%); opacity: 0; } to { transform: none; opacity: 1; } }

.t-titulo {
  font-family: "Courier New", monospace; font-weight: bold;
  font-size: calc(var(--u) * 4.6); line-height: 1.1; text-transform: uppercase;
}
.t-texto { font-size: calc(var(--u) * 4); line-height: 1.3; }
.t-producto {
  align-self: flex-start;
  font-size: calc(var(--u) * 3.1); font-weight: bold;
  background: #e2f4fc; color: var(--azul);
  padding: calc(var(--u) * 0.8) calc(var(--u) * 2); border-radius: 999px;
}
.t-pie {
  font-size: calc(var(--u) * 2.8); opacity: 0.6;
  font-family: "Courier New", monospace;
}
.t-pie:empty { display: none; }
.t-opciones { display: flex; flex-direction: column; gap: calc(var(--u) * 1.4); }
.t-opciones:empty { display: none; }
.t-opciones button {
  font-size: calc(var(--u) * 3.8); font-weight: bold;
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  border: calc(var(--u) * 0.5) solid var(--tinta); border-radius: calc(var(--u) * 2);
  background: #fff; color: var(--tinta); cursor: pointer; text-align: left;
}
.t-opciones button.activa { background: var(--tinta); color: #fff; }
.t-opciones button.activa::before { content: "▶ "; }

.tarjeta.bien { border-color: var(--bien); }
.tarjeta.bien .t-titulo { color: var(--bien); }
.tarjeta.pista { border-color: var(--pista); }
.tarjeta.pista .t-titulo { color: var(--pista); }
.tarjeta.final { border-color: var(--azul); }
.tarjeta.final .t-titulo { color: var(--azul); }
.tarjeta.reposo { text-align: center; animation: latir 1.2s ease-in-out infinite; }
.tarjeta.reposo .t-titulo { font-size: calc(var(--u) * 5.6); }
@keyframes latir { 50% { transform: scale(1.03); } }