:root {
  --bg: #12181f;
  --panel: #1c252f;
  --line: #2f3c4a;
  --text: #e8edf2;
  --muted: #8d9aa8;
  --accent: #e0a030;
  --sea: #173049;
  --rojo: #d64545;
  --azul: #3b74e0;
  --verde: #3fa34d;
  --amarillo: #e2c22e;
  --negro: #3a3a3a;
  --violeta: #9a55d0;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, sans-serif; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: .4em 0; }
button { background: var(--accent); color: #111; border: 0; border-radius: 6px; padding: 8px 12px; font-weight: 600; cursor: pointer; }
button.secondary { background: var(--line); color: var(--text); }
button:disabled { opacity: .5; cursor: default; }
input, select { background: #0e141a; color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 7px; font: inherit; }
label { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
label.check { flex-direction: row; align-items: center; }
.row { display: flex; gap: 6px; margin: 8px 0; }
.row input { flex: 1; min-width: 0; }
.muted { color: var(--muted); }
.screen { min-height: 100%; }
.card { background: var(--panel); border-radius: 10px; padding: 20px; }
.narrow { max-width: 420px; margin: 40px auto; }
#home > .card > button, #lobby > .card > button { width: 100%; margin-top: 8px; }
#invite { width: 100%; }

.players { list-style: none; padding: 0; margin: 6px 0; }
.players li { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 4px; }
.players li.turn { background: #2a3644; }
.players li.dead { opacity: .45; text-decoration: line-through; }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; border: 1px solid #fff4; }
.offline::after { content: ' (desconectado)'; color: var(--muted); }
.stats { margin-left: auto; color: var(--muted); font-size: 12px; }

#game { display: flex; height: 100vh; }
#map-wrap { flex: 1; background: var(--sea); overflow: hidden; position: relative; }
#map { width: 100%; height: 100%; display: block; cursor: grab; user-select: none; }
#side { width: 360px; flex: none; overflow-y: auto; padding: 10px; background: var(--panel); border-left: 1px solid var(--line); }
#side header { margin-bottom: 6px; }
.box { background: #151d25; border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin: 8px 0; }
.box:empty { display: none; }
#status { font-weight: 600; }
#controls button { margin: 3px 3px 3px 0; }
details { margin: 8px 0; }
summary { cursor: pointer; font-weight: 600; }
#log, #chat { max-height: 180px; overflow-y: auto; padding-left: 18px; margin: 4px 0; font-size: 12px; }
#cards label { flex-direction: row; align-items: center; margin: 2px 0; }

.t { stroke: #0b1016; stroke-width: .6; cursor: pointer; transition: filter .15s; }
.t:hover { filter: brightness(1.25); }
.t.sel { stroke: #fff; stroke-width: 2.5; }
.t.target { stroke: var(--accent); stroke-width: 2; }
.t.free { fill: #8f9aa5; }
.sea-line { stroke: #fff8; stroke-dasharray: 4 4; stroke-width: 1; pointer-events: none; }
.lbl { pointer-events: none; }
.lbl circle { fill: #0b1016cc; stroke: #fff9; stroke-width: 1; pointer-events: all; cursor: pointer; }
.lbl text { fill: #fff; font-size: 11px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.lbl .name { font-size: 8px; font-weight: 400; fill: #fffc; paint-order: stroke; stroke: #000a; stroke-width: 2px; }
.die { display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 4px; margin: 1px; font-weight: 700; color: #111; background: #eee; }
.die.def { background: #f2f2f2; outline: 2px solid #3b74e0; }
.die.att { outline: 2px solid #d64545; }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #b33; color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 10; }

@media (max-width: 760px) {
  #game { flex-direction: column; height: auto; }
  #map-wrap { height: 60vh; flex: none; }
  #side { width: 100%; border-left: 0; }
}