/* Battle Noodles - recreación no oficial. Hoja de estilos original (sin assets del sitio original). */

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

:root {
  --c1: #666699;
  --c2: #FFCC00;
  --c3: #ADC96B;
  --c4: #81C6DD;
  --c5: #25a6a8;
  --c6: #6A6A5A;
  --pink: #E24989;
}

.c1 { color: var(--c1); } .c2 { color: var(--c2); } .c3 { color: var(--c3); }
.c4 { color: var(--c4); } .c5 { color: var(--c5); } .c6 { color: var(--c6); }

.b1 { background: var(--c1); } .b2 { background: var(--c2); } .b3 { background: var(--c3); }
.b4 { background: var(--c4); } .b5 { background: var(--c5); } .b6 { background: var(--c6); }

html, body { height: 100%; }

body {
  font-family: 'Segoe UI', 'Trebuchet MS', Tahoma, sans-serif;
  color: #445;
  background: #fdfdfd radial-gradient(circle, #0000000d 1px, transparent 1.4px) 0 0/22px 22px;
  overflow: hidden;
}

.title-font { font-family: 'Brush Script MT', 'Segoe Script', cursive; }

/* ============ MENU ============ */

.menu {
  display: none;
  position: absolute; inset: 0; z-index: 5;
  overflow-y: auto;
  background: rgba(255,255,255,0.97);
  padding: 20px;
}
body.menuActive .menu { display: block; }
body.menuActive { background-color: #fff; }

.menu .content { width: 960px; max-width: 100%; margin: 0 auto; }
.menu .content:after { content: ''; display: block; clear: both; }

.menu h1 {
  font-family: 'Brush Script MT', 'Segoe Script', cursive;
  font-weight: normal;
  font-size: 84px;
  text-align: center;
  margin-bottom: 10px;
}
.menu h1 b { font-weight: normal; transition: color 1.4s linear; }

.menu h2 {
  font-family: 'Brush Script MT', 'Segoe Script', cursive;
  font-weight: normal;
  font-size: 30px;
  color: var(--c4);
  margin-bottom: 8px;
}

.menu section { position: relative; }
.menu section.about { float: right; width: 320px; font-size: 14.5px; line-height: 1.4; }
.menu section.about p { margin-bottom: 12px; }
.menu section.about a { color: var(--c4); font-weight: bold; text-decoration: none; }
.menu section.about a:hover { color: #000; }
.menu section.about p.credit { font-size: 12px; color: #999; }

.menu section.settings { float: left; width: 600px; max-width: 100%; }
.menu section.start { clear: both; text-align: center; padding-top: 10px; }

.menu .row { margin-bottom: 22px; }
.menu .row:after { content: ''; display: block; clear: both; }
.menu .row label { float: left; width: 190px; font-size: 15px; line-height: 30px; }

.menu .row.players .numBox { float: left; }

.numBox {
  width: 44px; height: 30px; line-height: 30px; text-align: center; cursor: pointer;
  font-weight: bold; color: #ccc; background: #f4f4f8; margin-right: 4px;
  box-shadow: 0 2px 0 #dadae0; border-radius: 3px; user-select: none;
}
.numBox:hover { background: #e2e2ea; color: #fff; }
.numBox.active { color: #fff; }
.numBox.active[data-value="1"] { background: var(--c1); box-shadow: 0 2px 0 #444466; }
.numBox.active[data-value="2"] { background: var(--c2); box-shadow: 0 2px 0 #cca300; }
.numBox.active[data-value="3"] { background: var(--c3); box-shadow: 0 2px 0 #819650; }
.numBox.active[data-value="4"] { background: var(--c4); box-shadow: 0 2px 0 #6399ab; }
.numBox.active[data-value="5"] { background: var(--c5); box-shadow: 0 2px 0 #1a7475; }
.numBox.active[data-value="6"] { background: var(--c6); box-shadow: 0 2px 0 #383830; }

.menu .row.controls { margin-top: -6px; }
body.touchMode .menu .row.controls { display: none; }
.menu .row.controls label { float: none; width: 100%; margin-bottom: 4px; }
.menu .row.controls .labels { display: none; }

.keysGroup { display: flex; flex-wrap: wrap; gap: 10px; }
.keysGroup .playerKeys { display: none; }
.keysGroup .playerKeys.active { display: block; }
.playerKeys .plabel { font-size: 12px; font-weight: bold; margin-bottom: 3px; }
.playerKeys .keys { display: flex; gap: 3px; }
.playerKeys .key {
  width: 62px; height: 26px; line-height: 26px; text-align: center; font-size: 11px;
  font-weight: bold; background: #f4f4f8; cursor: pointer; border-radius: 3px;
  box-shadow: 0 2px 0 #dadae0; overflow: hidden; white-space: nowrap;
}
.playerKeys .key:hover { background: #e2e2ea; }
.playerKeys .key.focused { animation: keyFocus 0.5s ease-in-out infinite; }

@keyframes keyFocus {
  0%, 100% { box-shadow: 0 0 0 2px var(--pink); }
  50% { box-shadow: 0 0 0 2px #f6bdd6; }
}

.iconRadios { display: flex; flex-wrap: wrap; gap: 10px; }
.iconRadios .opt {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; opacity: 0.4;
  display: flex; align-items: center; justify-content: center; background: #eee;
  transition: transform 0.15s, opacity 0.15s;
}
.iconRadios .opt:hover { opacity: 0.8; }
.iconRadios .opt.active { opacity: 1; transform: scale(1.15); box-shadow: 0 0 0 2px var(--c4); }
.iconRadios .opt img { width: 34px; height: 34px; }

.numRadios { display: flex; flex-wrap: wrap; gap: 4px; }
.numRadios .num {
  padding: 0 10px; height: 30px; line-height: 30px; text-align: center; cursor: pointer;
  font-weight: bold; color: #ccc; background: #f4f4f8; border-radius: 3px; box-shadow: 0 2px 0 #dadae0;
}
.numRadios .num:hover { background: #e2e2ea; color: #fff; }
.numRadios .num.active { background: var(--c3); color: #fff; box-shadow: 0 2px 0 #819650; }

.checkbox {
  float: left; width: 54px; height: 30px; line-height: 30px; text-align: center; cursor: pointer;
  color: #fff; background: #ff96cb; box-shadow: 0 2px 0 #cc78a2; border-radius: 3px; font-size: 12px; font-weight: bold;
}
.checkbox:hover { background: var(--pink); }
.checkbox:after { content: 'OFF'; }
.checkbox.active { background: var(--c3); box-shadow: 0 2px 0 #819650; }
.checkbox.active:hover { background: #9fc75d; }
.checkbox.active:after { content: 'ON'; }

.menu a.start {
  display: inline-block; background: var(--c4); color: #fff; font-weight: bold; font-size: 26px;
  text-transform: uppercase; padding: 12px 40px; text-decoration: none; border-radius: 4px;
  box-shadow: 0 4px 0 #6399ab; transition: background-color .2s, box-shadow .2s;
}
.menu a.start:hover { background: #333; box-shadow: 0 4px 0 #000; }

/* ============ GAME ============ */

body > .game { position: relative; height: 100%; display: none; overflow: hidden; background: #f2f2f5; }
body:not(.menuActive) > .game { display: block; }

.game .container {
  position: absolute; top: 0; left: 0; width: 1000px; height: 720px; overflow: hidden;
  background: #fff radial-gradient(circle, #0000000a 1px, transparent 1.4px) 0 0/20px 20px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.06);
}
canvas { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.game .sidebar { position: absolute; top: 0; right: 0; width: 160px; bottom: 0; background: #fff; box-shadow: -2px 0 6px rgba(0,0,0,0.08); overflow-y: auto; }
body.touchMode .game .sidebar { display: none; }

.player {
  padding: 10px 10px; font-weight: bold; color: #fff; position: relative; overflow: hidden; min-height: 58px;
}
.player.dead { filter: grayscale(70%) brightness(0.7); }
.player.dead:after { content: '✖'; position: absolute; top: 6px; right: 8px; font-size: 20px; opacity: 0.85; }
.player .name { font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: 22px; line-height: 1; }
.player .score { font-size: 20px; margin: 2px 0; }
.player .energyBar { height: 4px; background: rgba(255,255,255,0.3); border-radius: 2px; overflow: hidden; }
.player .energyBar i { display: block; height: 100%; width: 0%; background: rgba(255,255,255,0.85); }
.player img.powerupIcon { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: none; }

.sidebar .exit {
  position: sticky; bottom: 0; padding: 12px 10px; background: var(--pink); color: #fff; font-weight: bold; cursor: pointer; text-align: center;
}
.sidebar .exit:hover { background: #000; }

/* touch controls */
.touchControls { display: none; position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; }
body.touchMode .touchControls { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px; background: rgba(255,255,255,0.9); }
.touchPlayer { display: flex; align-items: center; gap: 4px; background: #fff; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.2); padding: 4px; }
.touchPlayer .tbtn {
  width: 46px; height: 46px; border-radius: 6px; color: #fff; font-weight: bold; font-size: 18px;
  display: flex; align-items: center; justify-content: center; user-select: none; touch-action: none;
}
.touchPlayer .tbtn:active, .touchPlayer .tbtn.pressed { filter: brightness(0.7); }

/* popups */
.overlay-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 6;
  background: #fff; border-radius: 10px; box-shadow: 0 4px 30px rgba(0,0,0,0.3); padding: 20px 24px;
  text-align: center; min-width: 320px; animation: popUp 0.2s ease-out;
}
@keyframes popUp { from { transform: translate(-50%,-50%) scale(0.7); opacity: 0; } to { transform: translate(-50%,-50%) scale(1); opacity: 1; } }

.overlay-center h3 { color: var(--pink); font-size: 26px; margin-bottom: 4px; }
.overlay-center .hint { font-size: 13px; color: #999; margin-bottom: 14px; cursor: pointer; }

.statsRow { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 15px; }
.statsRow .place { width: 34px; font-weight: bold; }
.statsRow .plname { width: 90px; text-align: left; font-weight: bold; }
.statsRow .gauge { flex: 1; height: 8px; background: #eee; border-radius: 4px; overflow: hidden; min-width: 120px; }
.statsRow .gauge i { display: block; height: 100%; width: 0%; }
.statsRow .scoretxt { width: 110px; text-align: right; color: #888; font-size: 13px; }
.statsRow .scoretxt b { color: #223; }

.exitTouchBtn {
  position: absolute; bottom: 10px; right: 10px; z-index: 7; background: #666; color: #fff; font-weight: bold;
  padding: 10px 16px; border-radius: 6px; cursor: pointer;
}

.results-screen {
  position: absolute; inset: 0; z-index: 8; background: #f2f2f5; display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.results-screen .winnerLabel { font-size: 34px; color: #777; margin-bottom: 4px; }
.results-screen .winnerName { font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: 90px; margin-bottom: 20px; }
.results-screen .statsBox { background: #fff; border-radius: 10px; padding: 16px 20px; box-shadow: 0 3px 20px rgba(0,0,0,0.15); width: 420px; max-width: 90%; }
.results-screen .exitBtn {
  margin-top: 24px; background: #666; color: #fff; font-weight: bold; padding: 12px 30px; border-radius: 6px; cursor: pointer;
}
.results-screen .exitBtn:hover { background: #333; }

@media (max-width: 900px), (max-height: 760px) {
  .menu section.about, .menu section.settings { float: none; width: 100%; }
}

/* --- Velocidad global del juego --- */
.speedControl { display: flex; align-items: center; gap: 10px; float: left; flex-wrap: wrap; }

.speedControl .speedSlider {
  -webkit-appearance: none; appearance: none;
  width: 210px; height: 6px; margin: 0; cursor: pointer;
  background: #f4f4f8; border-radius: 3px; box-shadow: 0 2px 0 #dadae0;
}
.speedControl .speedSlider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--c3); box-shadow: 0 2px 0 #819650;
}
.speedControl .speedSlider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--c3); box-shadow: 0 2px 0 #819650;
}

.speedControl .speedNumber {
  width: 66px; height: 30px; line-height: 30px; padding: 0 6px;
  font: inherit; font-weight: bold; font-size: 14px; text-align: center;
  color: #666; background: #f4f4f8; border: 0; border-radius: 3px;
  box-shadow: 0 2px 0 #dadae0; -moz-appearance: textfield;
}
.speedControl .speedNumber:focus { outline: none; color: #fff; background: var(--c3); box-shadow: 0 2px 0 #819650; }
.speedControl .speedNumber::-webkit-outer-spin-button,
.speedControl .speedNumber::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.speedControl .speedUnit { font-size: 15px; font-weight: bold; color: #999; margin-left: -4px; }

.speedControl .speedReset {
  height: 30px; line-height: 30px; padding: 0 10px; cursor: pointer;
  font-size: 12px; font-weight: bold; color: #fff; background: #ff96cb;
  border-radius: 3px; box-shadow: 0 2px 0 #cc78a2;
}
.speedControl .speedReset:hover { background: var(--pink); }

/* ======================= Juego en línea ======================= */

.modoBox {
  float: left; width: 96px; height: 30px; line-height: 30px; text-align: center;
  cursor: pointer; font-size: 14px; font-weight: bold; color: #ccc;
  background: #f4f4f8; margin-right: 6px; box-shadow: 0 2px 0 #dadae0;
  border-radius: 3px; user-select: none;
}
.modoBox:hover { background: #e2e2ea; color: #fff; }
.modoBox.active { color: #fff; background: var(--pink); box-shadow: 0 2px 0 #b5386b; }

/* El panel en línea y los ajustes que solo valen en local se excluyen entre
   sí: en línea el número de jugadores lo decide la sala, no este menú. */
.onlinePanel { display: none; }
body.modoOnline .onlinePanel { display: block; }
body.modoOnline .row.players,
body.modoOnline .row.numPowerups,
body.modoOnline .row.ptsToWin,
body.modoOnline .row.gameSpeed,
body.modoOnline section.start { display: none; }

.onlinePanel input[type="text"] {
  float: left; height: 30px; box-sizing: border-box; padding: 0 8px;
  border: 2px solid #e2e2ea; border-radius: 3px; font-family: inherit;
  font-size: 14px; color: #445; background: #fff; outline: none;
}
.onlinePanel .nombreJugador { width: 200px; }
.onlinePanel .codigoSala {
  width: 90px; text-transform: uppercase; letter-spacing: 3px;
  font-weight: bold; text-align: center; margin-right: 6px;
}
.onlinePanel input[type="text"]:focus { border-color: var(--c4); }
.onlinePanel .pista { float: left; margin-left: 10px; font-size: 12px; color: #999; line-height: 30px; }

.btnRed {
  float: left; height: 30px; line-height: 30px; padding: 0 14px; margin-right: 6px;
  text-decoration: none; font-size: 14px; font-weight: bold; color: #fff;
  background: var(--c5); box-shadow: 0 2px 0 #1a7475; border-radius: 3px;
  user-select: none;
}
.btnRed:hover { background: var(--c4); box-shadow: 0 2px 0 #6399ab; }
.btnRed.ocupado { background: #ccc; box-shadow: 0 2px 0 #aaa; cursor: default; }

.listaSalas { float: left; width: 100%; margin-top: 8px; }
.listaSalas .sala {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  background: #f4f4f8; border-radius: 3px; margin-bottom: 4px; font-size: 14px;
}
.listaSalas .sala .codigo { font-weight: bold; letter-spacing: 2px; color: var(--c5); }
.listaSalas .sala .hueco { flex: 1; color: #999; font-size: 12px; }
.listaSalas .vacio { color: #999; font-size: 13px; padding: 6px 0; }

/* ======================= Sala de espera ======================= */

.salaEspera { min-width: 380px; }
.salaEspera .codigoGrande {
  font-size: 42px; font-weight: bold; letter-spacing: 10px; text-align: center;
  color: var(--c5); margin: 6px 0 2px;
}
.salaEspera .subcodigo { text-align: center; font-size: 12px; color: #999; margin-bottom: 14px; }
.salaEspera .jugador {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  border-radius: 3px; margin-bottom: 3px; background: #f4f4f8; font-size: 14px;
}
.salaEspera .punto { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.salaEspera .quien { flex: 1; }
.salaEspera .etiqueta { font-size: 11px; color: #999; }
.salaEspera .acciones { margin-top: 14px; text-align: center; }
.salaEspera .acciones .btnRed { float: none; display: inline-block; }
.salaEspera .aviso { font-size: 12px; color: #999; text-align: center; margin-top: 8px; }

/* Indicador de conexión en la barra lateral durante la partida. */
.estadoRed { font-size: 11px; color: #999; padding: 6px 0; text-align: center; }
.estadoRed.malo { color: var(--pink); font-weight: bold; }