/* Identidad NES y lectura cómoda: los paneles crecen con su contenido. */
body { background: #171919; color: #f2eee5; }
.topbar { border-bottom: 3px solid #e60020; box-shadow: none; }
.card { border: 1px solid #484944; border-top: 4px solid #77776e; border-radius: 12px; box-shadow: 0 8px 24px #0003; }
.card.rooms, .card.social { transform: none; }
.card.social { box-shadow: 0 8px 24px #0003; }
.card.social { display: flex; flex-direction: column; }
.card.social .chat-wrap { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.card.social .chat { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
.card h2 { font-size: clamp(20px, 2vw, 28px); line-height: 1.2; }
.panel-code { letter-spacing: .1em; line-height: 1.5; }
.card.create { border-top: 4px solid #e60020; gap: 12px; padding: 22px; }
.card.create > .hint { font: 14px/1.5 Arial, sans-serif; }
.card.create .drop { padding: 18px 12px; min-height: 112px; border-radius: 8px; }
.card.create .drop-title { font-size: 12px; line-height: 1.6; }
.card.create .drop-sub, .card.create .legal { font: 12px/1.5 Arial, sans-serif; }
.card.create .drop { min-height: 56px; height: 56px; padding: 8px 14px; display: flex; align-items: center; justify-content: center; }
.card.create .drop-icon, .card.create .drop-sub { display: none; }
.card.create .drop-title { font-size: 14px; }
.card.create .rom-lib .lib-title { font: 13px/1.5 Arial, sans-serif; }
.input { border-radius: 6px; min-width: 0; font: 16px/1.4 Arial, sans-serif; }
.btn { border-radius: 6px; min-height: 44px; white-space: normal; line-height: 1.5; }
.rooms-list > .room { border-radius: 8px; }
.room-title, #romPickedName { overflow-wrap: anywhere; min-width: 0; }
.chat { border-radius: 6px; overflow-wrap: anywhere; }
.modal-body { border-radius: 12px; max-width: 100%; }
:focus-visible { outline: 3px solid #e7b94a; outline-offset: 3px; }
/* El chat del lobby sigue disponible; la pantalla exclusiva conserva solo juego y pad. */
body.touch #viewLobby .social { display: flex !important; flex-direction: column; }
body.mobile-device .virtual-pad { gap: 8px; padding: 10px; }
body.mobile-device .joy-zone { width: clamp(88px, 26vw, 126px); height: clamp(88px, 26vw, 126px); }
body.mobile-device .joy-base { width: 90%; height: 90%; }
body.mobile-device .virtual-face { gap: 8px; padding-right: 0; }
body.mobile-device .virtual-face button { width: clamp(44px, 13vw, 64px); height: clamp(44px, 13vw, 64px); font-size: 18px; }
body.mobile-device.snes .virtual-face { grid-template-columns: repeat(3, 44px); gap: 4px; }
body.mobile-device.neogeo .virtual-face { grid-template-columns: repeat(2, 48px); gap: 8px; }
body.mobile-device.snes .virtual-face button { width: 44px; height: 44px; }
body.mobile-device.neogeo .virtual-face button { width: 48px; height: 48px; }
body.mobile-device .virtual-center { flex-direction: column; gap: 8px; }
body.mobile-device .virtual-center button { min-width: 44px; height: 44px; font-size: 9px; }
body.mobile .stage { padding-top: max(56px, env(safe-area-inset-top)) !important; }
body.mobile .virtual-pad { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
body.mobile #screen,
body.mobile #screenFx,
body.mobile.video-43 #screen,
body.mobile.video-43 #screenFx {
  flex: 0 0 auto !important;
  width: min(100%, calc((100dvh - 210px) * 4 / 3)) !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 210px) !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
}
@media (min-width: 801px) {
  .view.lobby { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; overflow: hidden; align-items: start; gap: 14px; padding: 18px 20px 24px; }
  .view.lobby .card { height: clamp(500px, calc(100dvh - 220px), 540px); max-height: none; min-width: 0; overflow: auto; padding: 16px; }
  .view.lobby .card h2 { font-size: clamp(18px, 1.7vw, 24px); }
  .view.lobby .panel-code { margin-bottom: 8px; }
  .view.lobby .card.create > .hint { font-size: 12px; }
  .view.lobby .card.create { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); align-content: start; gap: 10px 12px; overflow: hidden !important; }
  .card.create > .panel-code, .card.create > h2, .card.create > .hint, .card.create > .drop,
  .card.create > .rom-picked, .card.create > .rom-lib, .card.create > .lobby-ping,
  .card.create > .btn, .card.create > .legal { grid-column: 1 / -1; }
  .card.create > .field { grid-column: 1 / -1; }
  #viewLobby { font-size: 13px; }
  #viewLobby .card { padding: 14px; height: clamp(460px, calc(100dvh - 250px), 500px); }
  #viewLobby .card h2 { font-size: clamp(17px, 1.5vw, 22px); }
  #viewLobby .hint { font-size: 11px; line-height: 1.35; }
  #viewLobby .panel-code { font-size: 8px; }
  #viewLobby .input { min-height: 40px; padding: 7px 9px; font-size: 14px; }
  #viewLobby .btn { min-height: 40px; font-size: 8px; }
  #viewLobby .card.create .drop { height: 48px; min-height: 48px; }
  #viewLobby .card.create .drop-title { font-size: 12px; }
  #viewLobby .card.create .legal { font-size: 8px; line-height: 1.2; }
  #viewLobby .chat { font-size: 11px; }
  #viewLobby .chat-form .input { font-size: 14px; }
}
@media (max-width: 800px) {
  html { min-height: 100%; }
  body:not(.mobile) { height: auto; overflow-y: auto; }
  body::before, body::after { pointer-events: none; }
  .topbar { padding: 16px; gap: 14px; }
  .brand { min-width: 0; max-width: 100%; gap: 10px; }
  .logo-racetrack { min-width: 0; padding: 8px 12px; }
  .brand-copy b { font-size: clamp(16px, 5vw, 26px); white-space: normal; }
  .brand-copy small { font-size: 8px; line-height: 1.7; white-space: normal; }
  .topbar-right { align-items: center; justify-content: space-between; }
  .topbar .utility { order: 0; width: auto; }
  .view.lobby { height: auto; min-height: 0; padding: 18px 14px 32px; gap: 18px; overflow: visible; }
  .view.lobby > .card { margin: 0; padding: 20px 16px; min-width: 0; width: 100%; max-height: none; }
  .card.create { overflow: visible !important; gap: 14px; }
  .field { font-size: 12px; line-height: 1.5; }
  .input, .card.create .input { width: 100%; min-height: 48px; }
  .card.create .legal { padding-top: 10px; border-top: 1px solid #b7b09f; }
  .rooms-list { max-height: none; }
  .room-enter .btn { min-height: 48px; }
  .chat-form { flex-direction: row; gap: 8px; }
  .chat-form .input { flex: 1; width: 0; }
  .chat-form .btn { flex: 0 0 auto; padding: 10px; }
  .card.social .chat-wrap { flex: 0 0 auto; }
  .card.social .chat { height: 220px; min-height: 160px; max-height: 220px; flex: 0 0 220px; }
  .modal { padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .modal-body { max-height: calc(100dvh - 24px); overflow-y: auto; padding: 22px 16px; }
  .modal .check { line-height: 1.5; min-height: 44px; align-items: center; }
  body:not(.mobile) .stage-actions { gap: 8px; }
  body:not(.mobile) .stage-actions .btn { min-width: 90px; }
}

/* Sala desktop: el juego es el contenido principal; controles y estado forman un dock compacto. */
@media (min-width: 801px) {
  #viewRoom.room:not(.hidden) {
    grid-template-columns: minmax(0, 1fr) 286px;
    gap: 12px;
    padding: 12px 16px 14px;
  }
  body:not(.fschat) #viewRoom.room .stage-col {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 8px;
  }
  #viewRoom .stage-head {
    min-height: 48px;
    margin: 0;
    padding: 0 0 6px;
    gap: 9px;
  }
  #viewRoom .stage-title b { font-size: 16px; }
  #viewRoom .stage-title span { font-size: 9px; }
  #viewRoom .stage-actions { gap: 6px; flex-wrap: nowrap; }
  #viewRoom .stage-actions .btn,
  #viewRoom #btnLeave { min-height: 44px; padding: 6px 10px; font-size: 8px; }
  #viewRoom .stage { padding: 6px; box-shadow: inset 0 0 0 2px #484941, 4px 4px 0 #050605; }
  #viewRoom .overlay { inset: 6px; }
  #viewRoom .slots { margin: 0; gap: 8px; }
  #viewRoom .slot {
    min-height: 54px;
    padding: 6px 8px;
    border-top-width: 3px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
  }
  #viewRoom .slot-head { min-width: 0; gap: 6px; }
  #viewRoom .slot-name { font-size: 11px; }
  #viewRoom .slot-foot { margin: 0; gap: 6px; font-size: 8px; }
  #viewRoom .slot .btn { min-height: 36px; padding: 5px 8px; font-size: 7px; }
  #viewRoom .netbar {
    min-height: 48px;
    margin: 0;
    padding: 5px 8px;
    gap: 12px;
    flex-wrap: nowrap;
  }
  #viewRoom .stat b { font-size: 11px; }
  #viewRoom .netbar .btn { min-height: 36px; padding: 5px 8px; font-size: 7px; }
  #viewRoom .side {
    height: 100%;
    padding: 9px;
    gap: 6px;
    border-top-width: 8px;
    box-shadow: 3px 3px 0 #000;
  }
  #viewRoom .side .chat-title { margin-top: 6px; font-size: 9px; }
  #viewRoom .side .chat { margin-top: 7px; min-height: 0; }
  #viewRoom .side .chat-form { gap: 6px; }
  #viewRoom .side .input { min-height: 42px; padding: 7px 9px; font-size: 14px; }
  #viewRoom .side .btn { min-height: 42px; padding: 6px 9px; font-size: 8px; }
}

@media (min-width: 801px) and (max-width: 1100px) {
  #viewRoom.room:not(.hidden) { grid-template-columns: minmax(0, 1fr) 250px; padding-inline: 10px; }
  #viewRoom .stage-title span { display: none; }
  #viewRoom .stage-actions { gap: 4px; }
  #viewRoom .stage-actions .btn, #viewRoom #btnLeave { padding-inline: 7px; font-size: 7px; }
  #viewRoom .netbar { gap: 7px; }
}

@media (min-width: 801px) {
  body.dview-bars #viewRoom.room:not(.hidden),
  body.dview-more #viewRoom.room:not(.hidden) {
    height: 100dvh;
    padding-top: 8px;
  }
  body.dview-more #viewRoom.room:not(.hidden) {
    padding: 8px;
    gap: 0;
  }
}