:root{
  --gold:#f5c542; --deep:#0a1633; --sea:#0e3a6b; --red:#d23b3b;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:"Trebuchet MS",system-ui,sans-serif;}
html,body{background:#05070f;color:#fff;overflow:hidden;height:100%;}
#game-shell{
  position:relative;width:1024px;height:576px;margin:12px auto;
  border:3px solid var(--gold);border-radius:8px;overflow:hidden;
  box-shadow:0 0 40px rgba(245,197,66,.25);
}
canvas{display:block;background:#0b1d3a;width:100%;height:100%;}

.screen{
  position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(ellipse at center,rgba(14,58,107,.85),rgba(5,7,15,.96));
  padding:24px;gap:14px;
}
.screen.active{display:flex;}
.overlay{background:none!important;pointer-events:none;justify-content:flex-start;}

h1{font-size:58px;letter-spacing:4px;color:var(--gold);
   text-shadow:0 4px 0 #7a5a00,0 0 30px rgba(245,197,66,.6);}
h2{font-size:34px;color:var(--gold);letter-spacing:3px;text-shadow:0 3px 0 #7a5a00;}
.subtitle{font-size:18px;opacity:.85;}
.legal{position:absolute;bottom:10px;font-size:11px;opacity:.5;}

.big-btn{
  min-height:44px;
  background:linear-gradient(#f5c542,#e0992a);color:#3a2400;border:none;
  padding:14px 34px;font-size:20px;font-weight:bold;letter-spacing:2px;
  border-radius:8px;cursor:pointer;box-shadow:0 4px 0 #8a5e10;transition:transform .08s;
}
.big-btn:hover{transform:translateY(-2px);}
.big-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #8a5e10;}
.big-btn:disabled{filter:grayscale(.8) brightness(.6);cursor:not-allowed;}

.grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:880px;}
.card{
  width:120px;height:120px;border:2px solid rgba(255,255,255,.25);border-radius:10px;
  cursor:pointer;position:relative;overflow:hidden;display:flex;flex-direction:column;
  justify-content:flex-end;transition:transform .1s,border-color .1s;
}
.card:hover{transform:scale(1.05);}
.card.selected{border-color:var(--gold);box-shadow:0 0 16px var(--gold);transform:scale(1.05);}
.card .label{background:rgba(0,0,0,.6);font-size:13px;font-weight:bold;padding:4px;}
.card canvas{height:100%;width:100%;}

#char-info{min-height:90px;max-width:760px;}
#ci-name{color:var(--gold);font-size:24px;}
#ci-style{font-style:italic;opacity:.9;}
#ci-transform{color:#ff8;font-size:14px;}
#ci-stats{display:flex;gap:14px;justify-content:center;margin-top:6px;font-size:13px;}
#ci-stats span{background:rgba(255,255,255,.1);padding:3px 8px;border-radius:6px;}

/* HUD */
#hud{padding:14px 20px;gap:6px;}
.bar-row{display:flex;width:100%;align-items:center;gap:12px;}
.bar-row-right{margin-left:auto;}
.fighter-tag{font-weight:bold;letter-spacing:2px;color:var(--gold);
  text-shadow:0 2px 0 #000;font-size:18px;}
.fighter-tag.right{text-align:right;}
.healthbar{
  position:relative;flex:1;height:26px;background:#3a0d0d;border:2px solid #000;
  border-radius:4px;overflow:hidden;box-shadow:0 0 0 2px var(--gold);
}
.healthbar.right{transform:scaleX(-1);}
.health-fill{position:absolute;inset:0;width:100%;
  background:linear-gradient(#7CFC00,#2e8b00);transition:width .15s;}
.special-fill{position:absolute;left:0;bottom:0;height:5px;width:0%;
  background:linear-gradient(#41d7ff,#1577ff);}
.vs{font-weight:bold;color:var(--gold);font-size:20px;text-shadow:0 2px 0 #000;}

/* round pips + label */
#round-label{font-weight:bold;color:#fff;letter-spacing:2px;font-size:15px;
  text-shadow:0 2px 0 #000;padding:0 8px;white-space:nowrap;}
.round-pips{display:flex;gap:5px;align-items:center;}
.round-pips.right{flex-direction:row-reverse;}
.pip{width:14px;height:14px;border-radius:50%;border:2px solid var(--gold);
  background:transparent;box-shadow:0 0 4px rgba(0,0,0,.6);}
.pip.won{background:radial-gradient(#fff,var(--gold));box-shadow:0 0 8px var(--gold);}

/* transform-ready badge */
.ready-badge{flex:1;text-align:left;font-weight:bold;letter-spacing:1px;font-size:15px;
  color:#fff;text-shadow:0 0 8px var(--gold),0 2px 0 #000;opacity:0;transition:opacity .15s;}
.ready-badge.right{text-align:right;}
.ready-badge.show{opacity:1;animation:readyPulse .7s ease-in-out infinite;}
@keyframes readyPulse{0%,100%{transform:scale(1);filter:brightness(1);}
  50%{transform:scale(1.06);filter:brightness(1.5);}}
.special-fill.ready{background:linear-gradient(#fff,#ffd23a)!important;
  box-shadow:0 0 10px var(--gold);height:7px;animation:readyPulse .7s ease-in-out infinite;}

#difficulty-row{display:flex;align-items:center;gap:8px;margin:4px 0;}
.diff-label{color:var(--gold);font-weight:bold;letter-spacing:1px;font-size:14px;}
.diff-btn{
  background:rgba(255,255,255,.1);color:#fff;border:2px solid rgba(255,255,255,.3);
  padding:6px 16px;font-weight:bold;letter-spacing:1px;border-radius:6px;cursor:pointer;
  transition:transform .08s,border-color .1s,background .1s;
}
.diff-btn:hover{transform:translateY(-1px);}
.diff-btn.selected{border-color:var(--gold);background:linear-gradient(#f5c542,#e0992a);color:#3a2400;}

#controls-help{
  width:1024px;margin:0 auto;text-align:center;font-size:13px;opacity:.8;
  padding:8px;letter-spacing:.5px;
}
#controls-help strong{color:var(--gold);}
/* durante la pelea la ayuda de controles no debe tapar el HUD ni la acción
   (game.js pone/quita esta clase en showScreen según la pantalla activa) */
body.ea-fighting #controls-help{display:none;}

/* --- eliasarcade: responsive scaling for phones/tablets (additive) --- */
@media (max-width:1060px){
  html,body{overflow:hidden;height:100%;}
  #game-shell{
    position:fixed; left:50%; top:50%; margin:0;
    transform-origin:center center;
    transform:translate(-50%,-50%) scale(min(100vw / 1024px, 100vh / 576px));
  }
  /* #controls-help ya no vive dentro de #game-shell, así que su antiguo ancho
     fijo de 1024px se salía de pantalla y quedaba pegado arriba (tapando el
     engranaje de ajustes #ea-controls). En móvil la anclamos al pie real de
     la pantalla, angosta y chica, lejos del engranaje. */
  #controls-help{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    width:100%; max-width:100%; box-sizing:border-box;
    margin:0; font-size:11px; padding:6px 10px; letter-spacing:.2px;
    background:rgba(5,7,15,.55); z-index:5; overflow:hidden;
  }
}
@media (orientation:portrait) and (max-width:600px){
  .big-btn{min-height:120px;padding:26px 40px;font-size:28px}
}