/* Tipografia real de modo texto VGA (PxPlus IBM VGA8 / Web437_IBM_VGA_8x16),
   de "The Ultimate Oldschool PC Font Pack" de VileR (CC BY-SA 4.0,
   https://int10h.org/oldschool-pc-fonts/) -- ver css/fonts/LICENSE-PxPlus_IBM_VGA8.txt.
   Se auto-hospeda para no depender de que el visitante la tenga instalada. */
@font-face {
  font-family: "PerfectDOS";
  src: url("fonts/PxPlus_IBM_VGA8.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: "PerfectDOS", "VT323", monospace !important;
  font-weight: 400;
  font-style: normal;
  background: #0000aa;
  height: 100vh;
  width: 100vw;
  position: relative;
  user-select: none;
  cursor: default;
  color: #000000;
  /* la fuente es bitmap-pixel-art: sin anti-aliasing se ve nitida como en DOS real */
  -webkit-font-smoothing: none;
  font-smooth: never;
}

/* frame helper: doble linea clasica de TUI DOS, hecha con box-shadow (sin gradientes) */
.nc-frame {
  border: 2px solid #55fffe;
  box-shadow: inset 0 0 0 2px #0000aa, inset 0 0 0 4px #55fffe;
}

.head-frame {
  background: #00aaaa;
}

.head-frame {
  font-size: 1.7rem;
  padding: 0px 10px;
  color: #0000aa;
}

/* Barra de titulo: marca a la izquierda, selector de idioma pegado a la
   derecha, misma linea. Mismo alto que el texto de "DOSVAULT"
   (align-items: center) para que no se vea descentrado. */
#siteTitle {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lang-switch {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 0.95rem;
  font-weight: bold;
  flex-shrink: 0;
  margin-left: auto;
}

.lang-btn {
  font: inherit;
  color: #0000aa;
  opacity: .55;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.lang-btn:hover {
  opacity: .85;
}

.lang-btn.active {
  opacity: 1;
  color: #fff;
  text-decoration: underline;
  cursor: default;
}

.lang-sep {
  color: #0000aa;
  opacity: .55;
}

.site-title-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- SHELL ---------- */
#shell {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 6px;
}

#panels {
  flex: 1;
  display: flex;
  gap: 10px;
  min-height: 0;
}

.panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #0000aa;
}

.panel.nc-frame {
  padding: 4px 8px 4px;
}

.panel-header {
  color: #ffff66;
  font-weight: bold;
  padding: 2px 2px 4px;
  border-bottom: 1px solid #55aaff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.35rem;
}

.panel-cols {
  display: flex;
  color: #7ab0ff;
  padding: 3px 2px;
  font-size: 1.05rem;
  border-bottom: 1px solid #55aaff;
}

.panel-cols .col-name,
.panel-row .col-name {
  flex: 1;
}

.panel-cols .col-name {
  text-transform: uppercase;
}

/* columnas Size / Files / Date / Time / Lang, iguales en header (.panel-cols)
   y en cada fila (.panel-row) para que queden alineadas verticalmente.
   col-files solo existe en el panel izquierdo (categorias) y col-lang solo
   en el panel derecho (juegos); al no repetirse en el otro panel, no hace
   falta separar reglas por id de panel. */
.col-size,
.col-files,
.col-date,
.col-time,
.col-lang {
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
}

.col-size {
  width: 90px;
  text-align: right;
}

.col-files {
  width: 70px;
  text-align: right;
  padding-left: 10px;
}

.col-date {
  width: 96px;
  text-align: right;
  padding-left: 10px;
}

.col-time {
  width: 74px;
  text-align: right;
  padding-left: 10px;
}

.col-lang {
  width: 70px;
  text-align: right;
  padding-left: 10px;
}

.panel-list {
  flex: 1;
  overflow-y: auto;
  padding-top: 2px;
}

.panel-row {
  display: flex;
  align-items: center;
  padding: 1px 2px;
  font-size: 1.1rem;
  cursor: pointer;
  white-space: normal;
  line-height: 1.2rem;
}

.panel-row .col-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}

.panel-row .col-size,
.panel-row .col-files,
.panel-row .col-date,
.panel-row .col-time,
.panel-row .col-lang {
  color: #7ab0ff;
}

.panel-row.is-dir .col-name {
  color: #55ffff;
}

.panel-row.is-file .col-name {
  color: #55ffff;
}

.panel-row.selected {
  background: #00aaaa;
  color: #015757;
}

.panel-row.selected .col-name,
.panel-row.selected .col-size,
.panel-row.selected .col-files,
.panel-row.selected .col-date,
.panel-row.selected .col-time,
.panel-row.selected .col-lang {
  color: #000;
}

.panel-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 10px;
  background: #000080;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.panel-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.icon-fallback {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  font-size: inherit;
}

/* barra de estado por panel: item seleccionado + fecha/hora, como en NC real */
.panel-status {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  background: #00aaaa;
  color: #000;
  font-size: 1rem;
  padding: 2px 6px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
}

.panel-status .st-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-status .st-date {
  flex-shrink: 0;
}

/* ---------- CMDLINE + RUNNING + FKEYS ---------- */
#cmdline {
  color: #fff;
  font-size: 1.2rem;
  padding: 2px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#cmdline .cursor-blink {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: #fff;
  animation: blink 1s steps(1) infinite;
  vertical-align: middle;
  margin-left: 2px;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

#running {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 22px;
}

.running-tab {
  background: #000;
  color: #55ffff;
  border: 1px solid #7ab0ff;
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
}

.running-tab.active {
  background: #00aaaa;
  color: #000;
  border-color: #fff;
}

#fkeys {
  display: flex;
  background: #000;
  font-size: 1.7rem;
  line-height: 1.7rem;
}

.fkey {
  flex: 1;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  padding: 0px;
  cursor: pointer;
}

.fkey .num {
  color: #c0c0c0;
  background: transparent;
  padding: 0 4px 0 2px;
  font-weight: bold;
}

.fkey .label {
  background: #00aaaa;
  color: #000;
  padding: 0 4px;
  flex: 1;
}

/* ---------- WINDOW (juego corriendo) ---------- */
.window {
  position: absolute;
  min-width: 340px;
  min-height: 240px;
  background: #0000aa;
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.window.maximized {
  top: 0 !important;
  left: 0 !important;
  right: 0;
  bottom: 100px;
  width: auto !important;
  height: auto !important;
}

/* Pantalla completa "falsa" con CSS en vez de la Fullscreen API real del
   navegador. El navegador reserva ESC para salir de pantalla completa real
   de forma NO cancelable por JS (asi lo exige el estandar) -- eso choca
   contra juegos que tambien usan ESC para saltear cinematicas/menus: cada
   ESC te saca de pantalla completa Y ademas le llega al juego. Con esta
   clase el elemento ocupa toda la ventana visualmente (fixed + inset:0)
   pero nunca entra a la Fullscreen API real, asi que el navegador no
   intercepta ESC -- le llega derecho al juego, y para salir se usa el
   boton [⛶] de la titlebar (que queda visible arriba de todo). */
.window.pseudo-fs {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  min-height: 0;
  z-index: 99998;
}

/* Pantalla completa real de ScummVM (ver toggleFullscreen en
   scummvm-engine.js): a diferencia de antes, ahora se le pide fullscreen a
   TODA la ventana (.window), no solo al iframe -- asi la titlebar (con el
   boton [≡] del menu de ScummVM, [⛶] y [X]) sigue visible arriba mientras
   se juega en pantalla completa real, en vez de quedar fuera del subarbol
   que el navegador renderiza. Mismos !important que .window.pseudo-fs de
   arriba, por la misma razon: pisar el left/top/width/height en linea que
   launchGame le pone al abrir la ventana. */
.window:fullscreen,
.window:-webkit-full-screen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
}

.titlebar {
  height: 24px;
  flex-shrink: 0;
  background: #9E9E9E;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 4px 0 6px;
  cursor: move;
  color: #000;
  font-size: 1rem;
  font-weight: bold;
}

.titlebar-title {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.win-controls {
  display: flex;
  gap: 6px;
  font-size: 1.2rem;
}

.win-btn {
  color: #000;
  cursor: pointer;
  font-weight: bold;
}

.win-btn:hover {
  color: #fff;
}

.win-body {
  flex: 1;
  background: #000;
  color: #01aaaa;
  font-family: 'Perfect DOS VGA 437', Consolas, 'Courier New', monospace;
  font-size: 13px;
  padding: 14px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.win-body.no-pad {
  padding: 0;
}

.jsdos-container {
  width: 100%;
  height: 100%;
  flex: 1;
  /* Necesario: js-dos le agrega la clase .emulator-root a este mismo div y
     mete adentro un .emulator-mouse-overlay con position:absolute; inset:0.
     Sin position:relative acá, ese overlay se ancla al ancestro posicionado
     más cercano -- el .window (que incluye la titlebar de 24px) -- y el
     mouse queda desincronizado respecto al canvas real. Con esto el overlay
     (y el canvas, ver regla de .pseudo-fs más abajo) se posicionan
     correctamente relativos a este contenedor. */
  position: relative;
}

/* Pantalla completa real: por default js-dos escala el canvas preservando
   el aspect ratio 4:3 del DOS, así que en un monitor panorámico llena el
   ancho pero deja franjas vacías arriba/abajo (se ve como si "no ocupara
   toda la pantalla"). Forzamos el canvas a ocupar el 100% del contenedor en
   pseudo-fs -- el trade-off es una ligera distorsión del aspect ratio en
   monitores muy panorámicos; si preferís mantener el 4:3 exacto con
   franjas negras avisame y lo revertimos. */
.window.pseudo-fs .jsdos-container canvas.emulator-canvas,
.jsdos-container:fullscreen canvas.emulator-canvas,
.jsdos-container:-webkit-full-screen canvas.emulator-canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* El propio .jsdos-container es el elemento que entra en pantalla completa
   real (ver launchGame() -> dosLayers[g.id].toggleFullscreen(), que llama
   internamente a requestFullscreen() sobre este mismo div). Sin esto la
   caja fullscreen nativa del navegador puede no coincidir 1:1 con el
   tamaño que ya le forzamos por CSS más arriba. */
.jsdos-container:fullscreen,
.jsdos-container:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

/* Refuerzo defensivo: el overlay que js-dos usa para capturar clicks/mouse
   (.emulator-mouse-overlay) ya hereda inset:0 de su propio CSS, pero lo
   fijamos explícito acá también por si algún estilo heredado (line-height,
   box-sizing raro en algún navegador) lo corriera un par de px respecto al
   canvas real. Tiene que coincidir 1:1 con el canvas de arriba. */
.jsdos-container .emulator-mouse-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.boot-line {
  margin-bottom: 3px;
  opacity: 0;
  animation: fadeIn 0.15s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.win-screen {
  margin-top: auto;
  margin-bottom: auto;
  text-align: center;
}

.win-screen .big-icon {
  width: 64px;
  height: 64px;
  font-size: 26px;
  margin: 0 auto;
  border-radius: 2px;
}

.win-screen .big-title {
  font-size: 20px;
  color: #fff;
  margin-top: 10px;
  letter-spacing: 1px;
}

.win-screen .hint {
  font-size: 11px;
  color: #6f6;
  margin-top: 14px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- TOAST (mensajes cortos, ej. "seleccioná un juego primero") ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%) translateY(10px);
  background: #000;
  color: #ffcc00;
  border: 2px solid #55fffe;
  padding: 8px 16px;
  font-size: 1rem;
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 80vw;
  text-align: center;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- MODAL OVERLAY (compartido: aviso mobile y popups) ---------- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.show {
  display: flex;
}

.mb-dialog {
  width: 100%;
  max-width: 340px;
  background: #00aaaa;
  color: #000;
}

.mb-titlebar {
  background: #0000aa00;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 6px double #fff;
  text-transform: uppercase;
  line-height: 4rem;
}

.mb-body {
  padding: 18px 16px;
  text-align: center;
}

.mb-body p {
  font-size: 13px;
  color: #fff;
  line-height: 1.5;
  margin-top: 10px;
}

.mb-body .mb-strong {
  font-weight: bold;
  display: block;
  margin-bottom: 2px;
}

/* ============================================================
   Agregar esto al final de css/style.css existente.
   Estiliza el <iframe> que crea js/scummvm-engine.js dentro de
   .jsdos-container (se reutiliza la misma clase contenedora que
   ya usa js-dos, por eso no hace falta tocar más reglas).
   ============================================================ */
.scummvm-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

/* ---------- BOTONERA DE LOS POPUPS (compartida por todos los modales) ---------- */
.info-buttons {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 16px 16px;
}

.info-btn {
  background: #ffffff;
  color: #000000;
  border: none;
  padding: 6px 20px;
  cursor: pointer;
  font-size: 1.2rem;
}

.info-btn:hover {
  background: #000000;
  color: #fff;
  border-color: #fff;
}

/* ---------- POPUP DE CONTROLES (F2) ---------- */
.controls-dialog {
  width: 100%;
  max-width: 620px;
  background: #00aaaa;
  color: white;
}

.controls-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 16px 0;
}

.controls-tab {
  flex: 1;
  text-align: center;
  padding: 6px 10px;
  font-size: 1rem;
  font-weight: normal;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.6;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.controls-tab:hover {
  opacity: 0.85;
}

.controls-tab.active {
  opacity: 1;
  border-bottom-color: #fff;
  cursor: default;
}

.controls-body {
  padding: 12px 16px;
  text-align: left;
  max-height: 60vh;
  overflow-y: auto;
}

.controls-group-note {
  font-size: 0.8rem;
  opacity: 0.85;
  margin-bottom: 6px;
}

.controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}

.controls-row .cr-label {
  flex: 1;
  min-width: 0;
}

.controls-row .cr-hint {
  display: block;
  font-size: 0.72rem;
  opacity: 0.8;
  line-height: 1.2;
}

.controls-row .cr-key {
  min-width: 92px;
  text-align: center;
  background: #000;
  color: #55ffff;
  padding: 2px 6px;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.controls-row .cr-btn {
  background: #00000000;
  color: #000000;
  border: 0px solid #7ab0ff;
  padding: 4px 12px;
  cursor: pointer;
  font-size: 0.95rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.controls-row .cr-btn:hover {
  background: #00aaaa;
  color: #000;
  border-color: #fff;
}

.controls-row.capturing .cr-btn {
  background: #ffcc00;
  color: #000;
  border-color: #000;
}

/* ---------- POPUP DE AYUDA / CONTACTO (F1) ---------- */
.help-dialog {
  width: 100%;
  max-width: 460px;
  background: #00aaaa;
  color: #fff;
}

.help-body {
  padding: 14px 16px;
  text-align: left;
  max-height: 74vh;
  overflow-y: auto;
}

/* Selector mas especifico que ".mb-body p" (que fija 13px para el aviso
   mobile) para que este 1em -- como pide el tamaño minimo de texto del
   popup de Ayuda -- realmente se aplique. */
.mb-body.help-body .dv-intro {
  font-size: 1em;
  line-height: 1.4;
  margin-bottom: 10px;
  color: #ffffff;
}

.dv-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.dv-field {
  display: block;
  margin-bottom: 10px;
}

.dv-field span {
  display: block;
  font-size: 1em;
  margin-bottom: 3px;
  color: #ffffff;
}

.dv-input {
  width: 100%;
  background: #000;
  color: #55ffff;
  border: 2px solid #003a3a;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 1em;
}

.dv-input:focus {
  outline: none;
  border-color: #ffcc00;
}

.dv-select {
  cursor: pointer;
}

.dv-textarea {
  resize: vertical;
  min-height: 80px;
}

.dv-form-status {
  font-size: 1em;
  margin-bottom: 8px;
  min-height: 0;
}

.dv-form-status.error {
  color: #ffcccc;
}

.dv-form-status.ok {
  color: #003a3a;
  font-weight: bold;
}

.dv-submit {
  font-family: inherit;
  font-size: 1.2rem;
}

.dv-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.dv-form.sent .dv-field,
.dv-form.sent .dv-intro-hide {
  display: none;
}

/* ---------- POPUP DE NOVEDADES (juegos nuevos desde la ultima visita) ---------- */
.newgames-dialog {
  width: 100%;
  max-width: 480px;
  background: #00aaaa;
  color: #000;
}

.newgames-body {
  padding: 14px 16px;
  text-align: left;
  max-height: 60vh;
  overflow-y: auto;
}

.ng-intro {
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 10px;
}

.newgame-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  font-size: 0.95rem;
}

.newgame-row .ng-name {
  font-weight: bold;
}

.newgame-row .ng-meta {
  opacity: 0.8;
  white-space: nowrap;
  font-size: 0.85rem;
}

/* ---------- POPUP DE AYUDA SCUMMVM (antes de jugar) ---------- */
.scummvm-hint-dialog {
  width: 100%;
  max-width: 480px;
  background: #00aaaa;
  color: #000;
}

.scummvm-hint-body {
  padding: 14px 16px;
  text-align: left;
}

.scummvm-hint-body p {
  font-size: 1rem;
  line-height: 1.4;
  margin: 0 0 10px;
  text-align: center;
}

.scummvm-hint-dismiss {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  font-size: 1rem;
  cursor: pointer;
}

/* ---------- POPUP DE PROBAR BUNDLE LOCAL (F9) ---------- */
.testbundle-dialog {
  width: 100%;
  max-width: 440px;
  background: #00aaaa;
  color: #000;
}

.testbundle-body {
  padding: 14px 16px;
  text-align: left;
}

.testbundle-body p {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}