/* Emulador en la página: lienzo, capa de arranque, mando táctil y barra de botones.
   Sigue el estilo Códice (css/codice.css). */
.emu{margin:18px 0 26px;outline:none}
.emu:focus-visible .emu-pantalla{box-shadow:0 0 0 3px var(--gold)}

.emu-pantalla{position:relative;background:#000;aspect-ratio:4/3;border:6px solid var(--ink);border-radius:4px;overflow:hidden;
  box-shadow:0 12px 30px rgba(43,29,18,.35);touch-action:none;user-select:none;-webkit-user-select:none}
.emu-lienzo{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;display:block;cursor:pointer}

/* Capa de arranque, pausa y errores */
.emu-capa{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:rgba(0,0,0,.55);color:var(--parchment);text-align:center;padding:20px}
.emu-capa[hidden]{display:none}
.emu-capa-texto{font:1.2rem var(--f-sc);letter-spacing:.06em;text-shadow:0 2px 6px #000}
.emu-error .emu-capa-texto{font-family:var(--f-body);font-style:italic;letter-spacing:0}
.emu-capa-boton{font:1.4rem var(--f-sc);letter-spacing:.1em;color:var(--parchment);background:var(--vermilion);border:2px solid var(--parchment);
  padding:12px 34px;cursor:pointer;border-radius:3px}
.emu-capa-boton:hover{background:var(--ink)}
.emu-capa-boton[hidden]{display:none}

/* Barra de botones */
.emu-barra{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.emu-boton{font:.85rem var(--f-sc);letter-spacing:.08em;color:var(--ink-soft);background:var(--parchment-2);border:1px solid var(--rule);
  padding:7px 12px;cursor:pointer;border-radius:3px;touch-action:none;user-select:none;-webkit-user-select:none}
.emu-boton:hover{color:var(--vermilion);border-color:var(--vermilion)}
.emu-boton.emu-pulsado{background:var(--vermilion);color:var(--parchment);border-color:var(--vermilion)}
.emu-boton.emu-activo{background:var(--ink);color:var(--parchment);border-color:var(--ink)}
.emu-b-select,.emu-b-reset,.emu-b-plano{font-weight:600;color:var(--ink)}
.emu-b-reset:hover{background:var(--vermilion);color:var(--parchment)}
.emu-grupo{display:inline-flex;align-items:center;gap:6px;font:.85rem var(--f-sc);letter-spacing:.08em;color:var(--ink-soft);margin-left:auto}
.emu-select{font:.95rem var(--f-sc);color:var(--ink);background:var(--parchment-2);border:1px solid var(--rule);padding:5px 6px;border-radius:3px}

/* Mando táctil: cruceta como la del joystick a la izquierda, botón rojo a la derecha.
   En la página va sobre la imagen, algo translúcido; en pantalla completa, en las franjas. */
.emu-tactil{display:none;position:absolute;inset:0;pointer-events:none;z-index:3}
.emu-con-tactil .emu-tactil{display:block}
.emu-cruz,.emu-fuego{position:absolute;pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent}
.emu-cruz{left:4%;bottom:5%;width:30%;max-width:190px;aspect-ratio:1;opacity:.82}
.emu-fuego{right:5%;bottom:9%;width:17%;max-width:112px;aspect-ratio:1;opacity:.88}
.emu-cruz svg{display:block;width:100%;height:100%;filter:drop-shadow(0 4px 8px rgba(0,0,0,.55))}
.emu-c-base{stroke:rgba(239,228,200,.28);stroke-width:1}
.emu-c-borde{fill:none;stroke:rgba(239,228,200,.6);stroke-width:1.6}
.emu-c-brazo{fill:var(--vermilion);opacity:0;transition:opacity .05s}
.emu-c-centro{fill:#170f0a;stroke:rgba(239,228,200,.22);stroke-width:1}
.emu-c-flecha{fill:rgba(239,228,200,.82);transition:fill .05s}
.emu-cruz.emu-arriba .emu-c-arriba,.emu-cruz.emu-abajo .emu-c-abajo,
.emu-cruz.emu-izquierda .emu-c-izquierda,.emu-cruz.emu-derecha .emu-c-derecha{opacity:.92}

/* Fuego: placa oscura con un botón rojo abombado, como el del CX40 */
.emu-fuego{border-radius:50%;background:radial-gradient(circle at 50% 42%,#3a2c22 0,#1a120c 70%);
  box-shadow:0 0 0 1.5px rgba(239,228,200,.32),0 6px 14px rgba(0,0,0,.55)}
.emu-fuego-boton{position:absolute;inset:15%;border-radius:50%;
  background:radial-gradient(circle at 38% 30%,#f39478 0,#cf4a31 26%,#a8321f 56%,#5f170e 100%);
  box-shadow:0 5px 0 #43110a,0 8px 12px rgba(0,0,0,.45),inset 0 2px 3px rgba(255,255,255,.3);
  transition:transform .05s,box-shadow .05s}
.emu-fuego.emu-pulsado .emu-fuego-boton{transform:translateY(4px);filter:brightness(.88);
  box-shadow:0 1px 0 #43110a,0 3px 6px rgba(0,0,0,.4),inset 0 2px 4px rgba(0,0,0,.25)}

/* Pantalla completa (.emu-fs: la del navegador o, sin ella, la ventana entera). La imagen
   en 4:3, tan grande como quepa; los mandos en las franjas que quedan a los lados
   (en vertical, arriba y abajo). --lado es el ancho de cada franja, con un mínimo. */
.emu-salir,.emu-lateral{display:none}
html.emu-sin-scroll,html.emu-sin-scroll body{overflow:hidden}
.emu-pantalla.emu-fs{position:fixed;inset:0;z-index:1000;width:100vw;height:100vh;border:0;border-radius:0;aspect-ratio:auto;box-shadow:none;
  --ancho:100vw;--alto:100vh}
@supports (height:100dvh){.emu-pantalla.emu-fs{height:100dvh;--alto:100dvh}}
.emu-pantalla.emu-fs{--img-w:min(var(--ancho),calc(var(--alto) * 4 / 3));--img-h:min(var(--alto),calc(var(--ancho) * 3 / 4));
  --lado:clamp(132px,calc((var(--ancho) - var(--img-w)) / 2),300px);
  --cruz:min(calc(var(--lado) * .86),46vh,240px);--fuego:min(calc(var(--lado) * .64),32vh,150px)}
.emu-fs .emu-lienzo{position:absolute;inset:0;margin:auto;max-width:none;max-height:none;width:var(--img-w);height:var(--img-h)}
.emu-fs .emu-salir{display:flex}
.emu-fs .emu-cruz,.emu-fs .emu-fuego{opacity:1;max-width:none}
.emu-fs .emu-cruz{width:var(--cruz);left:max(10px,calc((var(--lado) - var(--cruz)) / 2));bottom:9vh}
.emu-fs .emu-fuego{width:var(--fuego);right:max(10px,calc((var(--lado) - var(--fuego)) / 2));bottom:calc(9vh + (var(--cruz) - var(--fuego)) / 2)}

/* Panel lateral: ajustes arriba a la izquierda, mandos de la consola a la derecha bajo ✕ */
.emu-fs .emu-lateral{display:block;position:absolute;inset:0;pointer-events:none;z-index:4}
.emu-lat-grupo{position:absolute;display:flex;flex-direction:column;gap:8px;pointer-events:auto;width:min(calc(var(--lado) - 24px),190px)}
.emu-lat-ajustes{top:max(14px,2vh);left:max(12px,calc((var(--lado) - min(calc(var(--lado) - 24px),190px)) / 2))}
.emu-lat-consola{top:calc(max(14px,2vh) + 58px);right:max(12px,calc((var(--lado) - min(calc(var(--lado) - 24px),190px)) / 2))}
.emu-lat-boton{font:.82rem var(--f-sc);letter-spacing:.12em;color:var(--parchment);cursor:pointer;padding:9px 6px;border-radius:7px;
  background:linear-gradient(#3d2f24,#1c140f);border:1px solid rgba(176,138,62,.75);
  box-shadow:0 3px 0 #0b0704,inset 0 1px 0 rgba(255,255,255,.12);touch-action:none;user-select:none;-webkit-user-select:none;
  transition:transform .05s,box-shadow .05s}
.emu-lat-boton:hover{border-color:var(--gold);color:#fff}
.emu-lat-boton.emu-pulsado{background:linear-gradient(#c8432c,#8e2919);border-color:var(--parchment);transform:translateY(2px);box-shadow:0 1px 0 #0b0704}
.emu-lat-alterna{display:flex;align-items:center;gap:9px;font:.76rem var(--f-sc);letter-spacing:.08em;color:rgba(239,228,200,.7);cursor:pointer;
  background:rgba(29,21,16,.75);border:1px solid rgba(239,228,200,.22);border-radius:999px;padding:6px 12px;touch-action:manipulation}
.emu-lat-alterna:hover{color:var(--parchment);border-color:rgba(239,228,200,.5)}
.emu-lat-alterna.emu-activo{color:var(--parchment);border-color:rgba(233,185,73,.55)}
.emu-luz{flex:none;width:9px;height:9px;border-radius:50%;background:#3b2f25;box-shadow:inset 0 1px 2px #000}
.emu-lat-alterna.emu-activo .emu-luz{background:#e9b949;box-shadow:0 0 7px #e9b949}

/* En vertical: ajustes y consola en filas arriba, cruceta y fuego en la franja de abajo */
@media (orientation:portrait){
  .emu-pantalla.emu-fs{--franja:calc((var(--alto) - var(--img-h)) / 2);
    --cruz:min(44vw,calc(var(--franja) * .82),240px);--fuego:min(27vw,calc(var(--franja) * .56),150px)}
  .emu-fs .emu-cruz{left:6vw;bottom:max(12px,calc((var(--franja) - var(--cruz)) / 2))}
  .emu-fs .emu-fuego{right:8vw;bottom:calc(max(12px,calc((var(--franja) - var(--cruz)) / 2)) + (var(--cruz) - var(--fuego)) / 2)}
  .emu-lat-grupo{flex-direction:row;flex-wrap:wrap;width:auto}
  .emu-lat-ajustes{top:max(14px,2vh);left:14px;right:72px}
  .emu-lat-consola{top:calc(max(14px,2vh) + 52px);left:14px;right:14px;justify-content:center}
  .emu-lat-boton{flex:1;max-width:120px}
}

.emu-salir{position:absolute;top:max(14px,2vh);right:max(14px,2vw);z-index:5;width:44px;height:44px;align-items:center;justify-content:center;
  font:1.4rem/1 var(--f-body);color:var(--parchment);background:rgba(43,29,18,.55);border:2px solid rgba(239,228,200,.6);border-radius:50%;
  cursor:pointer;padding:0;touch-action:manipulation}
.emu-salir:hover,.emu-salir:focus-visible{background:var(--vermilion);border-color:var(--parchment);outline:none}

/* Tablas de controles compactas en móvil */
@media(max-width:520px){
  .emu-barra{gap:6px}
  .emu-boton{padding:6px 9px;font-size:.78rem}
  .emu-grupo{margin-left:0}
}