/* Visual dos diálogos copiado do CS2D: barra de título cinza, botões em faixa,
   número do atalho à esquerda. */
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #000;
  font: 14px/1.4 "Segoe UI", system-ui, sans-serif; color: #dcdcdc;
  user-select: none; cursor: none;
}
#game { display: block; width: 100%; height: 100%; }

#overlay {
  position: fixed; inset: 0; display: grid; place-items: center;
  pointer-events: none;
}
#overlay:has(.dialog:not([hidden])) { background: rgba(0, 0, 0, .35); cursor: default; }
#overlay:has(.dialog:not([hidden])) ~ #hint { opacity: 0; }

.dialog {
  pointer-events: auto; cursor: default;
  width: min(600px, 92vw);
  background: rgba(120, 120, 120, .78);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
}
.dialog > header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; font-size: 15px; color: #fff;
  background: rgba(60, 60, 60, .85);
  border-bottom: 1px solid rgba(255, 255, 255, .25);
}
.dialog .x {
  background: none; border: 0; color: #fff; font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0 4px;
}
.dialog .body { padding: 26px 22px; }

.menu { list-style: none; margin: 0 0 0; padding: 0; }
.menu.foot { margin-top: 26px; }
.menu li { margin: 0 0 3px; }
.menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 5px 10px; font: inherit; color: #f0f0f0; cursor: pointer;
  background: rgba(90, 90, 90, .75);
  border: 1px solid rgba(255, 255, 255, .28);
}
.menu button:hover { background: rgba(150, 150, 150, .85); color: #fff; }
.menu button b { font-weight: 400; color: #bdbdbd; min-width: 10px; }
.menu button .dim { margin-left: auto; color: #bdbdbd; font-size: 13px; }

/* abas do diálogo de opções */
.tabs {
  display: flex; gap: 2px; padding: 6px 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
}
.tab {
  padding: 4px 14px; font: inherit; color: #dcdcdc; cursor: pointer;
  background: rgba(70, 70, 70, .8);
  border: 1px solid rgba(255, 255, 255, .22); border-bottom: 0;
}
.tab:hover { background: rgba(110, 110, 110, .85); }
.tab.active { background: rgba(140, 140, 140, .9); color: #fff; }

.tabpane .row {
  display: grid; grid-template-columns: 130px 1fr; gap: 12px;
  align-items: center; margin-bottom: 16px;
}
.tabpane .row.top { align-items: start; }
.tabpane input[type="text"] {
  width: 240px; padding: 4px 8px; font: inherit; color: #fff;
  background: rgba(30, 30, 30, .85); border: 1px solid rgba(255, 255, 255, .3);
}
.tabpane input[type="range"] { width: 240px; vertical-align: middle; }
.tabpane canvas {
  display: block; margin-bottom: 8px;
  background: rgba(20, 20, 20, .85); border: 1px solid rgba(255, 255, 255, .25);
}
.tabpane .check { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.tabpane .pct { display: inline-block; width: 44px; }
.tabpane select {
  padding: 4px 8px; font: inherit; color: #fff; min-width: 190px;
  background: rgba(30, 30, 30, .9); border: 1px solid rgba(255, 255, 255, .3);
}
.tabpane .hintline { margin: 5px 0 0; font-size: 12px; color: #9a9a9a; }
button.act {
  padding: 4px 12px; margin-left: 8px; font: inherit; color: #f0f0f0; cursor: pointer;
  background: rgba(90, 90, 90, .85); border: 1px solid rgba(255, 255, 255, .28);
}
button.act:hover { background: rgba(150, 150, 150, .9); color: #fff; }
button.act:disabled { opacity: .5; cursor: default; }

#dlg-options .menu.foot {
  display: flex; justify-content: center; gap: 8px;
  margin: 0; padding: 10px; border-top: 1px solid rgba(255, 255, 255, .2);
}
#dlg-options .menu.foot li { margin: 0; }
#dlg-options .menu.foot button { width: 120px; justify-content: center; }

.scroll { max-height: 46vh; overflow-y: auto; }
#map-search {
  width: 100%; margin-bottom: 10px; padding: 6px 9px; font: inherit; color: #fff;
  background: rgba(40, 40, 40, .8); border: 1px solid rgba(255, 255, 255, .28);
}
#map-search:focus { outline: 1px solid rgba(255, 255, 255, .5); }

/* menu principal e telas de multiplayer */
.dialog .row.nick { margin-bottom: 22px; }
.dialog .body > .row {
  display: grid; grid-template-columns: 130px 1fr; gap: 12px;
  align-items: center; margin-bottom: 16px;
}
.dialog .body > .row.top { align-items: start; }
.dialog .body input[type="text"] {
  width: 100%; max-width: 300px; padding: 4px 8px; font: inherit; color: #fff;
  background: rgba(30, 30, 30, .85); border: 1px solid rgba(255, 255, 255, .3);
}
.dialog .body input[type="range"] { width: 220px; vertical-align: middle; }

.note { margin: 14px 0 0; min-height: 18px; font-size: 13px; color: #ffd45e; }
.note.err { color: #ff8a6a; }

/* lista de servidores */
table.srv { width: 100%; border-collapse: collapse; font-size: 13px; }
table.srv th {
  text-align: left; padding: 4px 8px; color: #bdbdbd; font-weight: 400;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
}
table.srv th.num, table.srv td.num { text-align: right; }
table.srv td { padding: 5px 8px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
table.srv tbody tr { cursor: pointer; }
table.srv tbody tr:hover { background: rgba(150, 150, 150, .5); color: #fff; }
table.srv tbody tr.full { color: #9a9a9a; cursor: not-allowed; }
table.srv tbody tr.empty:hover { background: none; cursor: default; }
table.srv td.dim { color: #bdbdbd; }

/* escolha de mapa dentro do Create Server */
.menu.pick { max-height: 34vh; }
.menu.pick button.sel { background: rgba(180, 180, 180, .9); color: #000; }
.menu.pick button.sel b { color: #333; }

/* Barra de chat (Y). Fica ACIMA da faixa de vida/colete do HUD, que ocupa os 44px de
   baixo — antes o "Say:" caía em cima do número da vida. */
#chatbar {
  position: fixed; left: 14px; bottom: 58px; display: flex; align-items: center; gap: 8px;
  padding: 5px 9px; background: rgba(0, 0, 0, .65);
  border: 1px solid rgba(255, 255, 255, .25); pointer-events: auto;
}
#chatbar span { color: #ffd45e; font-size: 13px; }
#chatbar input {
  width: 380px; padding: 2px 6px; font: 13px monospace; color: #fff;
  background: transparent; border: 0; outline: none;
}

#loading {
  pointer-events: none; color: #cfcf60; font-size: 18px; letter-spacing: .06em;
}
#hint {
  position: fixed; left: 50%; top: 8px; transform: translateX(-50%);
  color: #8a8a8a; font-size: 12px; pointer-events: none; transition: opacity .2s;
}
#hint.fade { opacity: 0; }