* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

body {
  background-color: #111827;
  color: #ffffff;
  font-family: 'Courier New', Courier, monospace;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.arcade-wrapper {
  width: 100%;
  max-width: 1040px;
  height: 100vh;
  max-height: 690px;
  display: flex;
  flex-direction: column;
  background: #1b2436;
  border: 4px solid #f6dc86;
  box-shadow: 0 0 0 4px #000000, 0 16px 40px rgba(0, 0, 0, 0.75);
}

/* Barra HUD Superior */
.hud-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  padding: 8px 12px;
  background: #141c2b;
  border-bottom: 4px solid #000000;
  align-items: center;
}

.hud-card {
  background: #1f2b42;
  border: 3px solid #000000;
  padding: 6px 10px;
  box-shadow: inset 0 0 0 2px #36496e;
}

.vaquito-card {
  border-color: #58ff6e;
}

.burguer-card {
  border-color: #ff9c42;
}

.hud-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.player-name {
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.5px;
}

.hud-badge {
  font-size: 11px;
  font-weight: 900;
  padding: 2px 6px;
  border: 2px solid #000;
}

.badge-normal {
  background: #3b4d71;
  color: #e2e8f0;
}

.badge-super {
  background: #ff2e4c;
  color: #fff36b;
  animation: blink-super 0.45s infinite alternate;
}

.badge-dead {
  background: #2b1215;
  color: #ff5858;
}

@keyframes blink-super {
  from { transform: scale(1); background: #ff2e4c; }
  to { transform: scale(1.05); background: #ff8c1a; }
}

.hud-hearts-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.hearts-icons {
  font-size: 15px;
  letter-spacing: 2px;
}

.hits-label {
  font-size: 11px;
  color: #cbd5e1;
  font-weight: bold;
}

.hits-bar-bg,
.extra-bar-bg {
  width: 100%;
  height: 8px;
  background: #0c1017;
  border: 2px solid #000000;
  overflow: hidden;
}

.hits-bar-fill {
  height: 100%;
  width: 100%;
  background: #44e85b;
  transition: width 0.15s ease;
}

.power-key-hint {
  margin-top: 4px;
  font-size: 10.5px;
  color: #ffe066;
  font-weight: bold;
}

.highlight-ctrl {
  color: #58ff6e;
  font-weight: bold;
}

.extra-bar-wrap {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.extra-bar-label {
  font-size: 10px;
  color: #7dff8b;
  font-weight: bold;
}

.extra-bar-fill {
  height: 100%;
  width: 100%;
  background: #38d8ff;
}

.extra-bar-fill.burguer-extra {
  background: #58ff6e;
}

.hud-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
}

.game-mini-title {
  font-size: 12px;
  font-weight: 900;
  color: #ffe066;
  text-shadow: 2px 2px 0 #000;
  text-align: center;
}

.score-display {
  font-size: 15px;
  font-weight: 900;
  color: #ffffff;
  background: #0b111e;
  padding: 2px 10px;
  border: 2px solid #38b6ff;
}

.hud-actions {
  display: flex;
  gap: 6px;
}

/* Escenario y Canvas */
.canvas-stage {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0c1322;
  overflow: hidden;
}

#game-canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Botones Pixel-Art */
.pixel-btn {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 900;
  font-size: 13px;
  padding: 9px 14px;
  border: 3px solid #000000;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.35), inset 3px 3px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.06s;
}

.pixel-btn:active {
  transform: translateY(2px);
}

.small-btn {
  font-size: 11px;
  padding: 4px 8px;
  background: #334155;
  color: #ffffff;
}

.primary-btn {
  background: #2ecc40;
  color: #06210a;
  font-size: 14px;
}

.secondary-btn {
  background: #ff9c2a;
  color: #241000;
  flex: 1;
}

.host-btn {
  background: #38b6ff;
  color: #041d2e;
}

.join-btn {
  background: #ffcf33;
  color: #291d00;
}

.full-w {
  width: 100%;
}

/* Pantalla de Menú y Modales */
.overlay-screen {
  position: absolute;
  inset: 0;
  background: rgba(10, 18, 34, 0.88);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px;
  z-index: 20;
}

.hidden {
  display: none !important;
}

.menu-box {
  width: 100%;
  max-width: 920px;
  max-height: 100%;
  overflow-y: auto;
  background: #1a253a;
  border: 4px solid #f6dc86;
  box-shadow: 0 0 0 4px #000, 0 12px 30px rgba(0, 0, 0, 0.85);
  padding: 16px 20px;
}

.retro-badge {
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  color: #58ff6e;
  margin-bottom: 4px;
}

.main-title {
  text-align: center;
  font-size: 26px;
  line-height: 1.1;
  color: #ffe066;
  text-shadow: 3px 3px 0 #000000, -2px -2px 0 #d45113;
  margin-bottom: 14px;
}

.main-title span {
  color: #38b6ff;
}

.menu-columns {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 16px;
}

.menu-col h2 {
  font-size: 15px;
  color: #ffcf33;
  margin-bottom: 8px;
  border-bottom: 2px solid #334155;
  padding-bottom: 4px;
}

.single-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.online-box {
  margin-top: 12px;
  background: #111929;
  border: 3px solid #38b6ff;
  padding: 10px;
}

.online-box h3 {
  font-size: 13px;
  color: #38b6ff;
  margin-bottom: 6px;
}

.online-help {
  font-size: 11.5px;
  color: #cbd5e1;
  margin-bottom: 8px;
  line-height: 1.35;
}

.online-input-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.online-stack {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.public-access-box {
  background: #111929;
  border: 3px solid #58ff6e;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
}

.public-url-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.url-tag {
  font-size: 10.5px;
  font-weight: 900;
  color: #86efac;
}

.url-copy-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.public-access-box code {
  flex: 1;
  background: #060b14;
  border: 2px solid #334155;
  color: #ffe066;
  padding: 5px 7px;
  font-size: 11.5px;
  font-weight: 900;
  word-break: break-all;
  user-select: text;
  -webkit-user-select: text;
}

.pixel-input {
  flex: 1;
  min-width: 120px;
  background: #060b14;
  border: 3px solid #000;
  color: #ffe066;
  font-family: 'Courier New', monospace;
  font-weight: 900;
  font-size: 13px;
  padding: 6px 8px;
  text-transform: uppercase;
}

.online-status {
  margin-top: 8px;
  font-size: 11.5px;
  padding: 6px;
  background: #172136;
  border: 2px solid #2d3e5e;
  color: #e2e8f0;
  font-weight: bold;
}

.status-ready {
  border-color: #44e85b;
  color: #68ff70;
}

.rules-list {
  list-style: none;
  font-size: 11.5px;
  line-height: 1.4;
  color: #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rules-list ul {
  list-style: none;
  padding-left: 10px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.ctrl-box {
  background: #111929;
  border: 2px solid #475569;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
}

.ctrl-box strong {
  color: #ffe066;
}

kbd {
  background: #334155;
  border: 1px solid #94a3b8;
  padding: 1px 4px;
  font-size: 10px;
  font-weight: bold;
}

.end-box {
  background: #1a253a;
  border: 4px solid #ffe066;
  padding: 28px 36px;
  text-align: center;
  box-shadow: 0 0 0 4px #000;
}

.end-box h2 {
  font-size: 28px;
  margin-bottom: 10px;
  text-shadow: 3px 3px 0 #000;
}

.end-box p {
  font-size: 15px;
  margin-bottom: 18px;
}

/* Galería de los 5 Personajes en Inicio */
.roster-section {
  margin-bottom: 12px;
  background: #111929;
  border: 3px solid #334155;
  padding: 8px 10px;
}

.roster-title {
  font-size: 12.5px;
  color: #ffe066;
  margin-bottom: 8px;
  text-align: center;
}

.roster-grid,
.select-row-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.single-char-card,
.char-opt-btn {
  background: #1e293b;
  border: 3px solid #000;
  padding: 6px 4px;
  color: #fff;
  font-family: 'Courier New', monospace;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  box-shadow: inset 0 0 0 2px #475569;
  transition: transform 0.08s, border-color 0.1s;
}

.single-char-card:hover,
.char-opt-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #ffe066;
}

.single-char-card img,
.char-opt-btn img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  image-rendering: pixelated;
}

.single-char-card strong,
.char-opt-btn span {
  font-size: 12px;
  font-weight: 900;
  color: #ffe066;
}

.diet-badge {
  font-size: 9.5px;
  font-weight: bold;
  padding: 1px 5px;
  border: 1px solid #000;
}

.lettuce-diet {
  background: #14532d;
  color: #86efac;
}

.meat-diet {
  background: #7c2d12;
  color: #fdba74;
}

.single-char-card small,
.char-opt-btn small {
  font-size: 9.5px;
  color: #cbd5e1;
  line-height: 1.2;
}

/* Modal Selección 2 Jugadores (Sin repetir personajes) */
.select-modal-box {
  width: 100%;
  max-width: 820px;
  background: #1a253a;
  border: 4px solid #38b6ff;
  box-shadow: 0 0 0 4px #000;
  padding: 16px 20px;
}

.select-modal-box h2 {
  text-align: center;
  color: #ffe066;
  font-size: 20px;
  margin-bottom: 4px;
}

.select-sub {
  text-align: center;
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 12px;
}

.player-select-block {
  background: #111929;
  border: 2px solid #334155;
  padding: 10px;
  margin-bottom: 10px;
}

.player-select-block h3 {
  font-size: 13px;
  color: #58ff6e;
  margin-bottom: 8px;
}

.char-opt-btn.selected {
  background: #14532d;
  border-color: #58ff6e;
  box-shadow: inset 0 0 0 2px #58ff6e;
}

.char-opt-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  filter: grayscale(0.7);
}

.lock-tag {
  font-size: 9px;
  color: #ff5858;
  font-style: normal;
  font-weight: 900;
  min-height: 11px;
}

.select-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

/* Modal ESC "¿Seguro que quieres salir?" */
.esc-box h2 {
  font-size: 24px;
  color: #ffe066;
  margin-bottom: 18px;
}

.esc-buttons {
  display: flex;
  justify-content: center;
  gap: 18px;
}

.esc-choice-btn {
  min-width: 110px;
  font-size: 16px;
}

.danger-btn {
  background: #ef4444;
  color: #ffffff;
}

/* Controles táctiles para dispositivos móviles (celulares y tablets):
   - Abajo a la izquierda: Botón de "Lanzar"
   - Abajo a la derecha: Botones de Arriba, Abajo, Izquierda y Derecha */
.touch-controls {
  position: absolute;
  bottom: 12px;
  left: 14px;
  right: 14px;
  display: none;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
  z-index: 15;
  touch-action: none;
}

body.force-touch-controls .touch-controls {
  display: flex;
}

.touch-left-zone {
  pointer-events: auto;
  display: flex;
  align-items: flex-end;
  touch-action: none;
}

.touch-lanzar-btn {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(22, 163, 74, 0.85);
  border: 4px solid #86efac;
  box-shadow: 0 0 0 3px #000000, inset 0 -5px 0 rgba(0, 0, 0, 0.45);
  color: #ffffff;
  font-family: 'Courier New', monospace;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 2px 2px 0 #000000;
  touch-action: none;
  cursor: pointer;
}

.touch-lanzar-btn.active {
  background: #4ade80;
  color: #052e16;
  border-color: #ffffff;
  transform: scale(0.95);
}

.touch-right-dpad {
  pointer-events: auto;
  display: grid;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(3, 52px);
  gap: 4px;
  touch-action: none;
}

.dpad-btn {
  font-family: 'Courier New', monospace;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  background: rgba(20, 28, 43, 0.85);
  color: #ffffff;
  border: 3px solid #f6dc86;
  box-shadow: 0 0 0 2px #000000, inset 0 -3px 0 rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  touch-action: none;
  cursor: pointer;
}

.dpad-btn span {
  font-size: 8.5px;
  color: #fde047;
  letter-spacing: -0.3px;
}

.dpad-btn.active {
  background: #f6dc86;
  color: #000000;
  border-color: #ffffff;
}

.dpad-btn.active span {
  color: #000000;
}

.dpad-up {
  grid-column: 2;
  grid-row: 1;
}

.dpad-left {
  grid-column: 1;
  grid-row: 2;
}

.dpad-center {
  grid-column: 2;
  grid-row: 2;
  background: rgba(15, 23, 42, 0.65);
  border: 2px solid #475569;
  border-radius: 4px;
}

.dpad-right {
  grid-column: 3;
  grid-row: 2;
}

.dpad-down {
  grid-column: 2;
  grid-row: 3;
}

@media (pointer: coarse), (hover: none), (max-width: 1024px) {
  .touch-controls {
    display: flex;
  }
  .arcade-wrapper {
    max-width: 100vw;
    max-height: 100vh;
    height: 100dvh;
    border-width: 2px;
  }
  .menu-columns {
    grid-template-columns: 1fr;
  }
  .hud-bar {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 4px 8px;
  }
  .hud-center {
    grid-column: span 2;
    order: -1;
  }
  .power-key-hint {
    display: none;
  }
}

@media (max-width: 640px) {
  .roster-grid,
  .select-row-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .main-title {
    font-size: 20px;
  }
  .touch-right-dpad {
    grid-template-columns: repeat(3, 48px);
    grid-template-rows: repeat(3, 44px);
  }
  .touch-lanzar-btn {
    width: 82px;
    height: 82px;
    font-size: 14px;
  }
}