:root{
  --text:#f7f8ff;
  --muted:#aeb4ce;
  --accent:#4ce0b3;
  --danger:#ff5f73;
  --gold:#ffd166;
}
*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#05060a;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overscroll-behavior:none}
body{display:flex;justify-content:center;align-items:center}
.cabinet{width:min(100vw,560px);height:100dvh;display:grid;grid-template-rows:13dvh minmax(0,1fr) 20dvh;background:linear-gradient(180deg,#242b54 0%,#151a34 18%,#0e1120 100%);box-shadow:0 0 0 2px rgba(255,255,255,.04),0 20px 70px rgba(0,0,0,.7);overflow:hidden}
.marquee{display:flex;align-items:center;justify-content:center;padding:9px 12px;background:radial-gradient(circle at 50% 0,#46529a 0%,#242c5d 43%,#11162f 100%);border-bottom:2px solid rgba(255,255,255,.08)}
.marquee-inner{width:100%;text-align:center;padding:9px 10px;border:2px solid rgba(255,209,102,.42);border-radius:13px;background:rgba(0,0,0,.17);box-shadow:inset 0 0 26px rgba(255,209,102,.08),0 0 18px rgba(255,209,102,.08)}
.marquee h1{margin:0;font-size:clamp(1.2rem,5.3vw,2.1rem);line-height:1.02;letter-spacing:.075em;color:#fff4ca;text-shadow:0 0 6px rgba(255,255,255,.25),0 0 14px rgba(255,209,102,.22)}
.marquee p{margin:4px 0 0;color:#d6dcff;font-size:clamp(.62rem,2.7vw,.88rem);letter-spacing:.08em;text-transform:uppercase}
.screen-area{min-height:0;padding:10px 12px;background:linear-gradient(180deg,#090b13,#05060b)}
.game-wrap{position:relative;width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#000;border:10px solid #12151f;border-radius:22px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.03),inset 0 0 40px rgba(255,255,255,.035),0 9px 30px rgba(0,0,0,.55)}
.game-wrap::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.018) 50%,rgba(0,0,0,.025) 50%);background-size:100% 4px;mix-blend-mode:screen;opacity:.22;z-index:4}
canvas{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#05060c;touch-action:none}
.lives-hud{position:absolute;top:9px;left:50%;transform:translateX(-50%);z-index:7;display:flex;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:6px 11px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(5,7,15,.66);backdrop-filter:blur(4px)}
.heart{font-size:1.05rem;line-height:1}
.overlay,.continue-overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:17px;background:rgba(3,5,11,.88);backdrop-filter:blur(4px);text-align:center}
.overlay.hidden,.continue-overlay.hidden{display:none}
.dialog{width:min(94%,510px);max-height:92%;overflow:auto;padding:20px;border:1px solid rgba(255,255,255,.11);border-radius:17px;background:rgba(24,28,53,.98);box-shadow:0 12px 40px rgba(0,0,0,.45)}
.dialog h2{margin:0 0 9px;font-size:clamp(1.35rem,5vw,2rem)}
.dialog p{margin:9px 0;line-height:1.42;font-size:clamp(.85rem,3.2vw,1rem)}
.level-tag{margin-bottom:6px;color:var(--gold);font-size:.75rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.loading{min-height:1em;color:var(--muted);font-size:.8rem}
button{border:0;font:inherit;font-weight:900;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:manipulation}
.primary{padding:12px 21px;border-radius:12px;background:var(--accent);color:#06110e;font-size:1rem}
.controls-panel{position:relative;display:grid;grid-template-columns:1fr 1.4fr;gap:11px;padding:11px 12px max(11px,env(safe-area-inset-bottom));background:linear-gradient(180deg,#1d2344 0%,#11152b 65%,#0a0d19 100%);border-top:2px solid rgba(255,255,255,.07);box-shadow:inset 0 6px 18px rgba(255,255,255,.025)}
.controls-panel::before{content:'';position:absolute;top:6px;left:50%;width:36%;height:5px;transform:translateX(-50%);border-radius:999px;background:rgba(0,0,0,.38);box-shadow:0 1px 0 rgba(255,255,255,.05)}
.move-pad,.action-pad{align-self:center;display:grid;gap:8px}.move-pad{grid-template-columns:repeat(2,1fr)}.action-pad{grid-template-columns:repeat(var(--action-count,3),1fr)}
.control{min-height:56px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:#292e54;color:white;box-shadow:0 5px 0 #11152d,0 8px 14px rgba(0,0,0,.25);font-size:1rem}
.control small{display:block;margin-top:2px;font-size:.62rem;opacity:.82;letter-spacing:.03em}
.control:active,.control.active{transform:translateY(3px) scale(.97);background:#404878;box-shadow:0 2px 0 #11152d,0 4px 8px rgba(0,0,0,.2)}
.continue-box{width:100%;padding:16px}.continue-label{color:#fff;font-size:clamp(1.8rem,8vw,3.5rem);font-weight:1000;letter-spacing:.12em;text-shadow:0 0 8px rgba(255,255,255,.8),0 0 18px rgba(123,97,255,.8)}
.continue-countdown{margin:6px 0 13px;color:var(--gold);font-size:clamp(5rem,26vw,10rem);line-height:.95;font-weight:1000;text-shadow:0 0 10px rgba(255,209,102,.9),0 0 30px rgba(255,209,102,.45)}
.coin-button{min-width:215px;padding:13px 20px;border:2px solid var(--accent);border-radius:8px;background:#101426;color:var(--accent);font-size:.94rem;font-weight:1000;letter-spacing:.08em;box-shadow:0 0 10px rgba(76,224,179,.35),inset 0 0 12px rgba(76,224,179,.08)}
.coin-button.insert-coin{color:var(--gold);border-color:var(--gold);animation:coinBlink .8s steps(1) infinite}.credit-text{margin-top:11px;color:var(--muted);font-size:.78rem;font-weight:900;letter-spacing:.13em}@keyframes coinBlink{0%,49%{opacity:1}50%,100%{opacity:.3}}
@media (max-width:420px){.cabinet{grid-template-rows:12dvh minmax(0,1fr) 21dvh}.screen-area{padding:8px 9px}.game-wrap{border-width:8px;border-radius:18px}.controls-panel{padding-left:9px;padding-right:9px;gap:8px}.move-pad,.action-pad{gap:6px}.control{min-height:52px;font-size:.9rem}.dialog{padding:15px}}
@media (orientation:landscape) and (pointer:coarse){
  body::before{
    content:'GIRA EL DISPOSITIVO';
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    background:#05060a;
    color:#ffd166;
    font-size:clamp(1.4rem,6vw,3rem);
    font-weight:1000;
    letter-spacing:.08em;
    text-align:center
  }
  .cabinet{visibility:hidden}
}


/* La ROM puede declarar su formato de monitor. */
.game-wrap.screen-portrait canvas{
  width:auto;
  height:100%;
  max-width:100%;
  max-height:100%;
  aspect-ratio:var(--rom-aspect, 540 / 800);
}

.game-wrap.screen-landscape canvas{
  width:100%;
  height:auto;
  max-width:100%;
  max-height:100%;
}

/* En ROMs verticales hacemos el bisel algo más estrecho para ganar pantalla. */
.game-wrap.screen-portrait{
  border-width:7px;
}


/* Escritorio: la recreativa se ve completa y centrada; no se pide girar el monitor. */
@media (pointer:fine){
  body{
    padding:18px;
    overflow:auto;
  }

  .cabinet{
    width:min(520px,92vw);
    height:min(900px,94vh);
    min-height:650px;
    border-radius:18px;
  }

  .marquee h1{
    font-size:clamp(1.25rem,2vw,1.9rem);
  }
}

/* Paneles declarados por cada ROM */
.controls-dpad_actions{
  grid-template-columns:1fr 1.4fr;
}

.controls-single_stick{
  grid-template-columns:1fr 1.2fr;
}

.joystick-zone{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  align-self:center;
}

.controls-steering{
  grid-template-columns:1.35fr .8fr;
  align-items:center;
}

.steering-zone,
.pedal-zone{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.pedal-zone{
  height:100%;
}

.steering-wheel{
  --steer-angle:0deg;
  width:min(18dvh,128px);
  aspect-ratio:1;
  position:relative;
  border:12px solid #30385f;
  border-radius:50%;
  transform:rotate(var(--steer-angle));
  transition:transform .08s linear;
  background:
    linear-gradient(90deg,transparent 43%,#30385f 44% 56%,transparent 57%),
    linear-gradient(0deg,transparent 43%,#30385f 44% 56%,transparent 57%);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.07),
    0 5px 0 #090c18,
    0 8px 18px rgba(0,0,0,.35);
  touch-action:none;
}

.wheel-center{
  position:absolute;
  width:38%;
  aspect-ratio:1;
  left:31%;
  top:31%;
  border-radius:50%;
  background:#151a31;
  border:2px solid rgba(255,255,255,.12);
}

.pedal{
  min-width:64px;
  height:72%;
  border-radius:12px 12px 20px 20px;
}

/* HUD arcade común: solo la información que la ROM declare. */
.arcade-top-hud{
  position:absolute;
  top:9px;
  left:11px;
  right:11px;
  z-index:7;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  pointer-events:none;
  font:900 14px/1 system-ui,sans-serif;
  letter-spacing:.08em;
  text-shadow:0 2px 3px rgba(0,0,0,.85);
}
.score-hud{
  justify-self:start;
  color:#fff0bb;
  padding:7px 10px;
  border-radius:8px;
  background:rgba(4,6,12,.54);
}
.arcade-top-hud .lives-hud{
  position:static;
  transform:none;
  justify-self:end;
  min-height:0;
  padding:7px 10px;
  background:rgba(4,6,12,.54);
  border-radius:8px;
  border:0;
  backdrop-filter:none;
}
.life-icon{font-size:1rem;line-height:1}

/* Botonera de shooter: botones más redondos, estilo recreativa. */
.controls-shooter{grid-template-columns:.9fr 1.45fr}
.controls-shooter .action-pad{align-items:center}
.controls-shooter .action-pad .control{
  border-radius:50%;
  aspect-ratio:1;
  min-height:0;
  max-height:88px;
}
.controls-shooter .action-pad .control.action-main{transform:scale(1.08)}
.controls-shooter .action-pad .control.action-main:active{transform:translateY(3px) scale(1.03)}


/* CONTROLES CONSOLIDADOS v6 */

/* La máquina permanece centrada en ordenadores, también con monitor apaisado. */
@media (pointer:fine){
  body{
    padding:18px;
    overflow:auto;
  }

  .cabinet{
    width:min(520px,92vw);
    height:min(900px,94vh);
    min-height:650px;
    border-radius:18px;
  }
}

/* Solo dispositivos táctiles reciben el aviso de giro. */
@media (orientation:landscape) and (pointer:coarse){
  body::before{
    content:'GIRA EL DISPOSITIVO';
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    background:#05060a;
    color:#ffd166;
    font-size:clamp(1.4rem,6vw,3rem);
    font-weight:1000;
    letter-spacing:.08em;
    text-align:center;
  }

  .cabinet{
    visibility:hidden;
  }
}

/* D-pad + acciones: plataformas, beat'em up, etc. */
.controls-dpad_actions{
  grid-template-columns:1fr 1.4fr;
}

/* Joystick simple + acciones: shooters clásicos y similares. */
.controls-single_stick{
  grid-template-columns:1fr 1.2fr;
}

.controls-single_stick .joystick-zone{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  align-self:center;
}

/* Shooter: misma lógica que dpad, pero botones circulares de recreativa. */
.controls-shooter{
  grid-template-columns:.9fr 1.45fr;
}

.controls-shooter .action-pad{
  align-items:center;
}

.controls-shooter .action-pad .control{
  border-radius:50%;
  aspect-ratio:1;
  min-height:0;
  max-height:88px;
}

.controls-shooter .action-pad .control.action-main{
  transform:scale(1.08);
}

.controls-shooter .action-pad .control.action-main:active,
.controls-shooter .action-pad .control.action-main.active{
  transform:translateY(3px) scale(1.03);
}

/* Carreras: volante analógico + pedales/botones. */
.controls-steering{
  grid-template-columns:1.35fr .8fr;
  align-items:center;
}

.steering-zone,
.pedal-zone{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.pedal-zone{
  height:100%;
}

.steering-wheel{
  --steer-angle:0deg;
  width:min(18dvh,128px);
  aspect-ratio:1;
  position:relative;
  border:12px solid #30385f;
  border-radius:50%;
  transform:rotate(var(--steer-angle));
  transition:transform .06s linear;
  background:
    linear-gradient(90deg,transparent 43%,#30385f 44% 56%,transparent 57%),
    linear-gradient(0deg,transparent 43%,#30385f 44% 56%,transparent 57%);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.07),
    0 5px 0 #090c18,
    0 8px 18px rgba(0,0,0,.35);
  touch-action:none;
}

.wheel-center{
  position:absolute;
  width:38%;
  aspect-ratio:1;
  left:31%;
  top:31%;
  border-radius:50%;
  background:#151a31;
  border:2px solid rgba(255,255,255,.12);
}

.pedal{
  min-width:64px;
  height:72%;
  border-radius:12px 12px 20px 20px;
}

/* HUD común y discreto. */
.arcade-top-hud{
  position:absolute;
  top:9px;
  left:11px;
  right:11px;
  z-index:7;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  pointer-events:none;
  font:900 14px/1 system-ui,sans-serif;
  letter-spacing:.08em;
  text-shadow:0 2px 3px rgba(0,0,0,.85);
}

.score-hud{
  justify-self:start;
  color:#fff0bb;
  padding:7px 10px;
  border-radius:8px;
  background:rgba(4,6,12,.54);
}

.arcade-top-hud .lives-hud{
  position:static;
  transform:none;
  justify-self:end;
  min-height:0;
  padding:7px 10px;
  background:rgba(4,6,12,.54);
  border-radius:8px;
  border:0;
  backdrop-filter:none;
}

.life-icon{
  font-size:1rem;
  line-height:1;
}


/* Ninja Canon / plataformas: cruceta arcade semitransparente con palanca central. */
.controls-arcade_dpad{
  grid-template-columns:1.02fr 1.35fr;
  align-items:center;
  gap:10px;
}

.arcade-dpad-zone{
  position:relative;
  width:min(18dvh,132px);
  aspect-ratio:1;
  justify-self:center;
  align-self:center;
  touch-action:none;
}

.dpad-dir{
  position:absolute;
  width:38%;
  height:38%;
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  background:rgba(40,46,84,.40);
  color:rgba(255,255,255,.82);
  box-shadow:0 4px 10px rgba(0,0,0,.22),inset 0 0 12px rgba(255,255,255,.035);
  font-size:1.05rem;
  font-weight:1000;
  z-index:2;
  touch-action:none;
  backdrop-filter:blur(2px);
}

.dpad-dir.active,
.dpad-dir:active{
  background:rgba(111,126,218,.72);
  color:#fff;
  transform:scale(.95);
  box-shadow:inset 0 0 16px rgba(255,255,255,.14);
}

.dpad-up{left:31%;top:0}
.dpad-left{left:0;top:31%}
.dpad-right{right:0;top:31%}
.dpad-down{left:31%;bottom:0}

.dpad-stick{
  position:absolute;
  left:31%;
  top:31%;
  width:38%;
  height:38%;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:4;
}

.dpad-stick-base{
  position:absolute;
  width:64%;
  height:28%;
  bottom:8%;
  border-radius:50%;
  background:rgba(8,10,18,.64);
  border:1px solid rgba(255,255,255,.14);
}

.dpad-stick-shaft{
  position:absolute;
  width:10%;
  height:47%;
  bottom:25%;
  border-radius:999px;
  background:rgba(225,229,255,.58);
  transform:rotate(-12deg);
  transform-origin:50% 100%;
}

.dpad-stick-ball{
  position:absolute;
  width:35%;
  aspect-ratio:1;
  top:4%;
  border-radius:50%;
  background:rgba(201,42,52,.76);
  border:2px solid rgba(255,255,255,.18);
  box-shadow:0 3px 8px rgba(0,0,0,.35),inset 0 2px 4px rgba(255,255,255,.14);
}

.action-pad-round{
  display:grid;
  grid-template-columns:repeat(2,minmax(58px,1fr));
  gap:10px;
  align-items:center;
  justify-items:center;
}

.action-pad-round .arcade-action{
  width:min(13dvh,88px);
  aspect-ratio:1;
  min-height:0;
  border-radius:50%;
  background:rgba(43,49,91,.72);
}

.action-pad-round .arcade-action:nth-child(1){transform:translateY(7px)}
.action-pad-round .arcade-action:nth-child(2){transform:translateY(-7px)}
.action-pad-round .arcade-action:nth-child(3){transform:translateY(7px)}
.action-pad-round .arcade-action:nth-child(4){transform:translateY(-7px)}

@media (max-width:420px){
  .controls-arcade_dpad{grid-template-columns:.95fr 1.35fr;gap:5px}
  .arcade-dpad-zone{width:min(19dvh,118px)}
  .action-pad-round{gap:6px}
  .action-pad-round .arcade-action{width:min(12.5dvh,76px);font-size:.82rem}
  .action-pad-round .arcade-action small{font-size:.52rem}
}

/* ================= ENTREPRISAS POCKET ================= */
.pocket-brand,.pocket-controls{display:none}

@media (max-width:700px) and (pointer:coarse){
  html,body{width:100%;height:100%;overflow:hidden;background:#05060a}
  body{padding:0;align-items:stretch}

  .cabinet{
    width:100vw;height:100dvh;min-height:0;border-radius:0;
    display:grid;grid-template-rows:auto minmax(0,1fr) auto;
    background:linear-gradient(145deg,#252a44 0%,#121624 52%,#080a12 100%);
    box-shadow:none
  }

  .marquee{
    min-height:45px;padding:7px 12px 4px;background:transparent;
    border:0!important;justify-content:flex-start
  }
  .marquee-inner{display:none}
  .pocket-brand{display:flex;align-items:baseline;gap:8px;letter-spacing:.1em}
  .pocket-brand strong{font-size:.88rem;color:#fff;text-shadow:0 0 9px var(--cabinet-main)}
  .pocket-brand span{font-size:.64rem;color:var(--cabinet-main);font-weight:1000;letter-spacing:.16em}

  .screen-area{min-height:0;padding:4px 8px 7px;background:transparent}
  .game-wrap,.game-wrap.screen-portrait{
    width:100%;height:100%;border:5px solid #05070b;border-radius:15px;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.04),0 0 0 2px var(--cabinet-dark),0 0 16px var(--cabinet-glow)
  }

  .desktop-controls{display:none!important}

  .pocket-controls{
    display:grid;grid-template-columns:1fr 1fr;
    grid-template-areas:"dpad actions" "system system";
    gap:8px 14px;padding:10px 14px max(10px,env(safe-area-inset-bottom));
    background:linear-gradient(180deg,#191e32,#10131f 72%,#080a12);
    border-top:1px solid rgba(255,255,255,.08)
  }

  .pocket-dpad{
    grid-area:dpad;position:relative;width:min(31vw,126px);
    aspect-ratio:1;justify-self:center;align-self:center
  }
  .pocket-dir,.pocket-dpad-center{position:absolute;width:34%;height:34%}
  .pocket-dir{
    border:1px solid rgba(255,255,255,.1);border-radius:7px;background:#1a1e2d;
    color:#e3e7ff;box-shadow:0 4px 0 #070910;font-size:.9rem
  }
  .pocket-dir.active,.pocket-dir:active{transform:translateY(2px);background:#303957;box-shadow:0 2px 0 #070910}
  .pocket-up{left:33%;top:0}.pocket-down{left:33%;bottom:0}.pocket-left{left:0;top:33%}.pocket-right{right:0;top:33%}
  .pocket-dpad-center{left:33%;top:33%;border-radius:4px;background:#151925}

  .pocket-actions{
    grid-area:actions;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;align-content:center;justify-items:center;transform:rotate(-7deg)
  }
  .pocket-action{
    width:min(14vw,61px);aspect-ratio:1;min-height:0;border-radius:50%;
    border:2px solid var(--cabinet-main);
    background:radial-gradient(circle at 35% 30%,var(--cabinet-soft),var(--cabinet-main) 34%,var(--cabinet-dark) 94%);
    color:#07080b;box-shadow:0 5px 0 rgba(0,0,0,.68),0 0 10px var(--cabinet-glow);
    transform:rotate(7deg)
  }
  .pocket-action span{display:block;font-size:1.05rem;font-weight:1000;line-height:1}
  .pocket-action small{
    display:block;margin-top:2px;max-width:58px;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;font-size:.43rem;opacity:.72
  }
  .pocket-action.active,.pocket-action:active{transform:rotate(7deg) translateY(3px) scale(.97);box-shadow:0 2px 0 rgba(0,0,0,.68)}
  .pocket-action.pocket-disabled{opacity:.22;filter:grayscale(1)}

  .pocket-system{grid-area:system;display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:8px;margin-top:1px}
  .pocket-system-btn{
    min-height:32px;display:flex;align-items:center;justify-content:center;padding:6px 8px;
    border:1px solid rgba(255,255,255,.12);border-radius:999px;background:#171b28;
    color:#edf0ff;font:900 .58rem/1 system-ui,sans-serif;letter-spacing:.08em;
    text-decoration:none;box-shadow:0 3px 0 #06070b
  }
  .pocket-system-btn.active,.pocket-system-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #06070b}
  .pocket-buy-btn{color:var(--cabinet-main);border-color:var(--cabinet-main)}

  [aria-label="Pausar juego"],[aria-label="Reanudar juego"]{display:none!important}
}

@media (max-width:700px) and (pointer:coarse) and (max-height:700px){
  .marquee{min-height:38px;padding-top:4px}
  .pocket-controls{padding-top:7px;gap:5px 10px}
  .pocket-dpad{width:min(27vw,102px)}
  .pocket-action{width:min(12vw,50px)}
  .pocket-system-btn{min-height:28px}
}