:root{
  --verde-osc:#0f380f;
  --verde-med:#306230;
  --verde-cla:#8bac0f;
  --pantalla:#9bbc0f;
  --gris:#c4c4c4;
  --fondo:#0f380f;          /* lo pisa el JS con el color del cartucho */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--fondo);
  color:var(--pantalla);
  font-family:"Trebuchet MS",system-ui,sans-serif;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}

/* ============ portada del cartucho ============ */
#portada{
  position:fixed;top:0;right:0;bottom:0;left:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:24px 22px 18px;
  background:var(--fondo);
  cursor:pointer;
  user-select:none;-webkit-user-select:none;
}
#portada.oculto{display:none}

/* La foto del cartucho. Es un <img> a propósito: se dimensiona sola por
   su propia proporción, sin depender de reglas de CSS que Safari maneja
   distinto. */
/* Ojo: sin esto, el display:block de abajo le gana al atributo hidden y
   se cuela una imagen vacía en los cartuchos que no tienen foto. */
.foto[hidden],.cartucho[hidden]{display:none}

.foto{
  display:block;
  width:100%;max-width:360px;height:auto;
  margin:0 auto 24px;
  border-radius:6px;
  box-shadow:0 14px 30px rgba(0,0,0,.55);
}

/* Sin foto: el cartucho dibujado de siempre */
.cartucho{
  position:relative;
  width:120px;height:140px;margin:0 auto 24px;
  background:var(--gris);border-radius:6px 6px 10px 10px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.cartucho::before{
  content:"";position:absolute;top:14px;left:14px;right:14px;height:56px;
  background:#e8e8e8;border-radius:3px;
}
.cartucho::after{
  content:"";position:absolute;bottom:0;left:22px;right:22px;height:16px;
  background:var(--verde-osc);border-radius:2px 2px 0 0;
}

.info{width:100%;max-width:400px}

h1{font-size:22px;letter-spacing:.5px;margin-bottom:6px;color:#fff}
#portada:not(.con-arte) h1{color:var(--pantalla)}

.sub{font-size:14px;color:var(--verde-cla);margin-bottom:20px;line-height:1.5}

.boton{
  display:block;width:100%;padding:16px 24px;
  background:var(--pantalla);color:var(--verde-osc);
  border:none;border-radius:10px;
  font-size:17px;font-weight:bold;font-family:inherit;
  cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  pointer-events:none;          /* el clic lo maneja toda la pantalla */
}
#portada:active .boton{background:var(--verde-cla)}

.barra{
  margin-top:14px;height:6px;border-radius:3px;
  background:rgba(0,0,0,.4);overflow:hidden;
}
.barra i{
  display:block;height:100%;width:0;
  background:var(--pantalla);transition:width .15s linear;
}

.aviso{
  margin-top:14px;padding:11px;border-radius:10px;
  background:rgba(0,0,0,.3);
  border:1px solid rgba(155,188,15,.35);
  font-size:13px;line-height:1.45;color:var(--verde-cla);
}
.aviso b{color:var(--pantalla)}

.pie{margin-top:18px;font-size:11px;letter-spacing:1px;color:rgba(155,188,15,.55)}

/* Pantallas bajas: que no quede nada tapado */
@media (max-height:680px){
  .foto{max-width:260px;margin-bottom:16px}
  .cartucho{width:96px;height:112px;margin-bottom:16px}
  h1{font-size:19px}
  .sub{margin-bottom:14px}
  .boton{padding:14px 20px;font-size:16px}
}

/* ============ emulador ============ */
#contenedor{display:none;width:100%;height:100%}
#contenedor.activo{display:block}
#game{width:100%;height:100%}

/* ============ catálogo ============ */
.lista{list-style:none;text-align:left;margin-top:8px}
.lista li{margin-bottom:10px}
.lista a{
  display:block;padding:14px 16px;border:1px solid var(--verde-med);
  border-radius:8px;color:var(--pantalla);text-decoration:none;font-size:16px;
}