:root{
  --bg:#0f172a;--panel:#11182780;--card:#0b1221cc;--accent:#eab308;--muted:#94a3b8;--text:#e5e7eb;--stroke:#061127;--shadow:0 10px 30px rgba(0,0,0,.4);
  --console-h: 220px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --sidebar-w: 320px;
  --rightbar-w: 300px; 
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 600px at 60% -10%, #1f2a4a 0%, #0b1020 35%, var(--bg) 100%);
}

header{position:sticky;top:0;z-index:5;backdrop-filter:blur(10px);background:#0b1020aa;border-bottom:1px solid #1f2937}
.wrap{max-width:1400px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:14px}
h1{font-size:clamp(18px,2.4vw,28px);margin:0;letter-spacing:.3px}
.note{color:var(--muted);font-size:.95rem;margin-left:auto}

main{max-width:1400px;margin:18px auto 40px;padding:0 20px;display:block}
.layout{
  display:grid;
  gap:16px;
  align-items:start;
  grid-template-columns:
    minmax(260px, var(--sidebar-w))
    minmax(0, 1fr);
}

.wrap, main{
  max-width: unset;
  width: min(2000px, 96vw); /* wcześniej było 1400px */
}

/* 4) Mapa wypełnia wysokość okna (pozwala się „rozepchać”) */
.{ align-self: stretch; }
.svg-wrap{
  padding: 8px;               /* było 14px – więcej miejsca na SVG */
  height: calc(100vh - 100px);/* dostosuj w razie potrzeby */
}
svg{
  width: 100%;
  height: 100%;               /* wcześniej height:auto */
  display: block;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.35));
}

.{
  overflow: visible;           /* było: hidden */
  align-self: stretch;
}

/* 2) zostaw trochę „oddechu” na dole pod podpisem Tatarów */
.svg-wrap{
  padding: 8px 8px 28px;       /* było: 8px; dodany większy dolny padding */
  height: calc(100vh - 100px); /* było: calc(100vh - 200px); więcej miejsca na dół */
}

.sidebar{  grid-column:1; grid-row:1; }
.map-card{ grid-column:2; grid-row:1; }

.round { display:flex; align-items:center; gap:8px; }
#roundLabel { letter-spacing:.8px; font-weight:800; color:#e2e8f0;}
#roundCur { font-weight:900; }

/* === TURA GRACZA (badge obok rundy) === */
.turn-badge{
  display:flex; align-items:center; gap:10px;
  padding:6px 10px; border:1px solid #334155; border-radius:999px;
  background:#0f172a; box-shadow:var(--shadow);
}
.turn-badge .label{
  color:#cbd5e1; font-weight:800; letter-spacing:.3px; opacity:.9;
}
.turn-badge .swatch{
  width:16px; height:16px; border-radius:6px; border:2px solid #1f2937;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
.turn-badge .name{
  font-weight:800; color:#e5e7eb;
  max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width: 520px){
  .turn-badge .name{ max-width:110px; }
}

.map-header .actions{
  display:flex;            /* już masz, ale zostawiam dla kompletności */
  align-items:center;
  gap:10px;
  flex: 1 1 auto;          /* <<< klucz: pozwala zająć 100% szerokości */
}

/* 2) Wewnątrz .actions, .round ma być jednym wierszem na pełną szerokość */
.round{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}

/* 3) Wyślij „RUNDA …” na skraj prawej */
#roundLabel{
  margin-left:auto;
  display:flex;
  align-items:baseline;
  gap:6px;
}

.rightbar{
  background:var(--card);border:1px solid #1f2937;border-radius:16px;
  box-shadow:var(--shadow);overflow:hidden;height:100%;
}
.rightbar .head{padding:14px 16px;border-bottom:1px solid #1f2937;display:flex;align-items:center;justify-content:space-between}
.rightbar h2{margin:0;font-size:1.05rem;color:#cbd5e1}
.rightbar .section{padding:12px 14px;border-bottom:1px solid #1f2937}
.rightbar .section:last-child{border-bottom:none}
#phaseActions{display:flex;flex-wrap:wrap;gap:8px}
#phaseActions button{border:1px solid #334155;background:#0f172a;color:#e2e8f0;padding:8px 10px;border-radius:10px;font-weight:700;cursor:pointer}
#phaseActions button:hover{background:#111827;border-color:#475569}
#pickedRegion{font-weight:800;color:#e2e8f0;opacity:.9}

/* === [CSS] SIDEBAR === */
.sidebar{background:var(--card);border:1px solid #1f2937;border-radius:16px;box-shadow:var(--shadow);overflow:hidden;height:100%}
.sidebar .head{padding:14px 16px;border-bottom:1px solid #1f2937;display:flex;justify-content:space-between;align-items:center}
.sidebar h2{margin:0;font-size:1.05rem;color:#cbd5e1}
.sidebar .section{padding:14px 16px;border-bottom:1px solid #1f2937}
.sidebar .section:last-child{border-bottom:none}

/* Marszałek */
.marshal-row{display:flex;align-items:center;gap:10px}
.marshal-label{min-width:88px;color:#cbd5e1;font-weight:700}
.marshal-box{width:34px;height:34px;border-radius:8px;border:2px solid #475569;background:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.marshal-reset{margin-left:auto;border:1px solid #334155;background:#0f172a;color:#e2e8f0;padding:6px 10px;border-radius:10px;font-weight:600;cursor:pointer}
.marshal-reset:hover{background:#111827;border-color:#475569}

/* Gracze */
.players-table{width:100%;border-collapse:separate;border-spacing:0 8px}
.players-table th,.players-table td{padding:6px 6px;vertical-align:middle;text-align:center}
.players-table thead th{color:#9ca3af;font-size:.9rem;font-weight:700}
.players-table tbody td.name{font-weight:700;color:#e2e8f0;text-align:left}
.player-color{
  width:22px;height:22px;border-radius:6px;
  border:2px solid #475569;background:none;display:inline-block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)
}

/* === Pasek faz === */
.phasebar{display:flex;gap:8px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid #1f2937;background:linear-gradient(180deg, #0b1221aa, #0b122100)}
.phasebar .phase{position:relative;border:1px solid #334155;background:#0f172a;color:#e2e8f0;
  padding:8px 12px;border-radius:10px;font-weight:700;letter-spacing:.2px;cursor:pointer;user-select:none}
.phasebar .phase:hover{background:#111827;border-color:#475569}
.phasebar .phase[data-active="1"]{
  background:linear-gradient(180deg,#eab308,#c08411);
  color:#0b1221;border-color:#eab308;box-shadow:inset 0 0 0 1px #0b1221aa, var(--shadow)
}
.phasebar .phase .idx{opacity:.85;margin-right:.4rem;font-weight:900}

/* Szlachcice */
.nobles-table{width:100%;border-collapse:separate;border-spacing:0 8px}
.nobles-table th,.nobles-table td{padding:6px 6px;vertical-align:middle}
.nobles-table thead th{color:#9ca3af;font-size:.9rem;font-weight:700;text-align:center}
.nobles-table tbody th{font-weight:700;color:#e2e8f0;text-align:left;white-space:nowrap}
.noble-slot{width:30px;height:30px;border-radius:999px;border:2px solid #475569;background:none;display:grid;place-items:center;font-weight:800;font-size:.95rem;line-height:1;color:#e5e7eb;user-select:none}
.noble-slot[data-empty="1"]{opacity:.65}

/* === Szlachcice – LISTA zamiast tabeli === */
.nobles-list{
  display:flex; flex-direction:column; gap:8px;
}
.nobles-list .province-item{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border:1px solid #1f2937; border-radius:12px;
  background:#0f172a;
}
.nobles-list .province-name{
  font-weight:800; color:#e2e8f0; margin-right:auto;
}
.nobles-list .badges{
  display:flex; flex-wrap:wrap; gap:6px;
}
.noble-badge{
  display:flex; align-items:center; gap:6px;
  border:1px solid #334155; background:#0b1221; color:#e5e7eb;
  padding:4px 8px; border-radius:999px; font-weight:800;
}
.noble-badge .dot{
  width:14px; height:14px; border-radius:50%;
  border:2px solid #475569; box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
  background: var(--dot, #fff);
}
.nobles-list .empty{
  color:#94a3b8; font-style:italic; padding:4px 2px;
}


.{background:var(--card);border:1px solid #1f2937;border-radius:16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.map-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #1f2937}
.map-header h2{margin:0;font-size:1.05rem;color:#cbd5e1}
.actions{display:flex;gap:10px;align-items:center}
button,.legend button{cursor:pointer;border:1px solid #334155;background:#0f172a;color:#e2e8f0;padding:8px 12px;border-radius:10px;font-weight:600;transition:.2s ease}
button:hover,.legend button:hover{background:#111827;border-color:#475569}
.svg-wrap{position:relative;padding:14px}
svg{width:100%;height:auto;display:block;filter:drop-shadow(0 16px 24px rgba(0,0,0,.35))}

.region{stroke:#0b1221;stroke-width:2;vector-effect:non-scaling-stroke;fill-opacity:.92;transition:transform .15s ease, filter .2s ease, fill-opacity .2s ease;cursor:pointer;outline:none}
.region:hover{filter:brightness(1.1) saturate(1.1)}
.region:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}
.region.selected{stroke:#f59e0b;stroke-width:3;fill-opacity:1}

.legend{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 16px}
.legend button{font-size:.9rem}

/* Tooltip */
.tooltip{position:fixed;pointer-events:none;z-index:10;background:#0b1221f2;border:1px solid #1f2937;padding:8px 10px;border-radius:10px;font-size:.9rem;box-shadow:var(--shadow);transform:translate(-50%, calc(-100% - 14px));opacity:0;transition:opacity .12s ease}
.tooltip.shown{opacity:1}

/* Znacznik współrzędnych nad mapą */
.coords{position:absolute;left:10px;bottom:10px;background:#0a0f1bcc;border:1px solid #172036;border-radius:10px;padding:6px 10px;font-size:.85rem;color:#cbd5e1;pointer-events:none}

/* Warstwa boxów + fortów (nie zasłania klików) */
#boxLayer{pointer-events:none}
#boxLayer rect{
  /* brak fill tutaj – kolorem steruje JS (style.fill) */
  stroke:gray; stroke-width:3; vector-effect:non-scaling-stroke;
  rx:3; ry:3;
}
#boxLayer polygon[data-fort]{
  /* gwiazdka (Fort) – też bez fill w CSS */
  stroke:gray; stroke-width:3; vector-effect:non-scaling-stroke;
}

/* Warstwa armii (znaczniki) – nad boxLayer, nie zasłania klików */
#armiesLayer{ pointer-events:none; }
#armiesLayer circle{
  stroke:gray; stroke-width:3; vector-effect:non-scaling-stroke;
}
#armiesLayer text{
  font-size:20px; font-weight:800;
  fill:#e5e7eb; stroke:#061127; stroke-width:.8;
  text-anchor:middle; dominant-baseline:middle;
  pointer-events:none;
}

/* *** NOWE: Tory wrogów (X) *** */
#enemiesLayer{ pointer-events:none; }
#enemiesLayer text.label{
  font-size:clamp(30px, 2.4vw, 34px); font-weight:800; fill:#cbd5e1; stroke:#061127; stroke-width:.8;
  text-anchor:middle; dominant-baseline:middle;
}
#enemiesLayer g.cross line{ stroke:gray; stroke-width:6; vector-effect:non-scaling-stroke; stroke-linecap:round }

/* USUŃ: body{ padding-bottom: calc(var(--console-h) + var(--safe-bottom)); } */

/* ZMIEŃ konsolę z fixed na statyczną sekcję */
.console{
  position:static;
  background:var(--panel);
  border:1px solid #1f2937;
  box-shadow:var(--shadow);
  height:auto;                    /* nadpisuje wcześniejsze --console-h */
  padding-bottom:0;
}

/* Drobna korekta odstępów w środku konsoli (opcjonalnie) */
.console .log{ max-height: 260px; } /* zapobiega rozpychaniu lewej kolumny */

.console .bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #1f2937}
.console .bar .title{font-weight:700;letter-spacing:.3px}
.console .log{flex:1;overflow:auto;padding:10px 14px;line-height:1.35}
.console .log .entry{opacity:.95;margin:.25rem 0}
.console .log .ok{color:#a7f3d0}
.console .log .err{color:#fecaca}
.console form{display:flex;gap:8px;padding:10px 14px}
.console input[type="text"]{
  flex:1;border:1px solid #334155;background:#0f172a;color:#e2e8f0;
  padding:10px 12px;border-radius:10px;font-size:1rem
}
.console .hint{margin-left:auto;color:#94a3b8;font-size:.9rem}

@media (max-width: 640px){
  :root{ --console-h: 260px; }
  .console .hint{display:none}
}

.sidebar .section:has(.marshal-row){
  display: none !important;
}
footer{max-width:1200px;margin:12px auto 50px;padding:0 20px;color:var(--muted);font-size:.9rem}


/* ===== [DODAJ] Modal (popup) ===== */
.popup-backdrop{
  position:fixed; inset:0; display:grid; place-items:center;
  background:rgba(3, 6, 23, .6); backdrop-filter: blur(6px);
  z-index: 999; /* nad mapą i panelami */
}
.popup{
  width:min(720px, 92vw);
  background:#0b1221; border:1px solid #1f2937; border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  transform:translateY(6px) scale(.98); opacity:0;
  animation: popup-in .16s ease forwards;
}
@keyframes popup-in{
  to{ transform:translateY(0) scale(1); opacity:1; }
}
.popup-content{ padding:18px 18px 16px; }
.popup-title{
  margin:0 0 10px 0; font-size:1.05rem; color:#e2e8f0; letter-spacing:.2px;
}
.popup-text{
  color:#e5e7eb; line-height:1.45; white-space:pre-wrap;
  background:#0f172a; border:1px solid #1f2937; border-radius:12px; padding:12px;
  max-height:min(46vh, 520px); overflow:auto;
}
.popup-image-wrap{ margin:12px 0 10px; display:grid; place-items:center; }
.popup-image-wrap img{ max-width:100%; border-radius:12px; border:1px solid #1f2937; }
.popup-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }
.popup-btn, .popup-close{
  border:1px solid #334155; background:#0f172a; color:#e2e8f0;
  padding:8px 12px; border-radius:10px; font-weight:700; cursor:pointer;
}
.popup-btn:hover, .popup-close:hover{ background:#111827; border-color:#475569; }
.popup-close{
  position:absolute; top:8px; right:8px; width:36px; height:36px; line-height:1; font-size:22px;
  display:grid; place-items:center; border-radius:12px;
}
.popup-backdrop[hidden]{
  display: none !important;
}

.popup-image-wrap img{
  max-width:100%;
  max-height:40vh;
  object-fit:contain; /* ładne skalowanie JPG */
  border-radius:12px;
  border:1px solid #1f2937;
}

/* === Szlachcice – tryb ciasny === */
.nobles-list{ gap:4px; }
.nobles-list .province-item{
  padding:4px 8px;
  border:none;
  background:transparent;
  line-height:1.1;
  gap:6px;
}
.nobles-list .province-name{
  margin-right:6px;
  font-weight:800;
}
.nobles-list .badges{ gap:4px; }
.noble-badge{
  padding:2px 6px;
  font-weight:800;
  border:1px solid #2a3446;   /* subtelniej, cieńsza ramka */
  background:#0d1424;
}
.noble-badge .dot{
  width:10px; height:10px;
  border-width:1.5px;
}

/* Szlachcice — wymuś jedną linię na wpis */
.nobles-list .province-item{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;     /* ← nie zawijaj */
  white-space:nowrap;   /* ← nie zawijaj też tekstu */
  overflow:hidden;      /* ← obetnij nadmiar */
}

.nobles-list .province-name{
  margin-right:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;   /* ← skracaj nazwę "...", jeśli brakuje miejsca */
  flex:1 1 auto;            /* ← niech nazwa zajmuje wolną przestrzeń */
}

.nobles-list .badges{
  display:flex;
  flex-wrap:nowrap;   /* ← pigułki też w jednej linii */
  gap:4px;
  flex:0 0 auto;      /* ← bez rozciągania/kurczenia */
}

.noble-badge{
  flex:0 0 auto;      /* ← każda pigułka to „inline chip” */
  padding:2px 6px;
}

/* --- Szlachcice: twardo w jednej linii, BEZ przerwy przed pierwszą kropką --- */
.nobles-list .province-item{
  display:flex;
  align-items:center;
  gap:0;               /* zero przerwy między nazwą a pigułkami */
  flex-wrap:nowrap;    /* nie zawijaj */
  white-space:nowrap;  /* nie zawijaj tekstu */
  overflow:visible;    /* nie obcinaj całego wiersza */
  min-width:0;         /* <<< klucz: pozwól dzieciom się ścinać w poziomie */
}

.nobles-list .province-name{
  margin-right:0;          /* żadnej przerwy przed pigułkami */
  white-space:nowrap;
  overflow:hidden;         /* ścinaj tylko nazwę */
  text-overflow:ellipsis;  /* "Litwa..." gdy braknie miejsca */
  flex:1 1 auto;
  min-width:0;             /* <<< klucz: pozwól się ścinać */
}

.nobles-list .badges{
  display:inline-flex;
  flex-wrap:nowrap;   /* pigułki też w jednej linii */
  gap:4px;            /* przerwy tylko między pigułkami */
  margin-left:0;      /* zero przerwy między nazwą a pierwszą pigułką */
  flex:0 0 auto;
  white-space:nowrap;
}

.noble-badge{
  display:inline-flex;
  flex:0 0 auto;
  padding:2px 6px;
}

/* === Szlachcice — ciągła, ciasna lista w JEDNEJ linii (zawija się dopiero między prowincjami) === */
.sidebar .nobles-list{
  display:flex;
  flex-direction:row;     /* zamiast kolumny */
  flex-wrap:wrap;         /* ewentualne zawijanie między PROWINCJAMI */
  gap:6px;                /* odstęp między prowincjami */
  align-items:center;
}

.sidebar .nobles-list .province-item{
  display:inline-flex;    /* każdy wpis to „chip”, nie pełny wiersz */
  align-items:center;
  gap:4px;                /* mini odstęp: nazwa ↔ pigułki */
  padding:0;              /* zero wewnętrznych paddingów */
  border:none;
  background:transparent;
  white-space:nowrap;     /* trzymaj w jednej linii w obrębie wpisu */
  width:auto;             /* nie rozciągaj do 100% */
  flex:0 0 auto;          /* nie rośnij, nie kurcz się do pełnej szerokości */
}

.sidebar .nobles-list .province-name{
  margin:0;               /* żadnej „dziury” przed pierwszą kropką */
  flex:0 0 auto;          /* klucz: NIE rozpychaj – usuwa wyrównanie kropek do prawej */
  min-width:0;
  white-space:nowrap;
  overflow:visible;       /* nie obcinaj nazwy w chipie */
  text-overflow:clip;
}

.sidebar .nobles-list .badges{
  display:inline-flex;
  flex-wrap:nowrap;       /* pigułki też w jednej linii */
  gap:4px;                /* odstęp między pigułkami */
  flex:0 0 auto;
  margin:0;
}

.sidebar .noble-badge{
  display:inline-flex;
  padding:2px 6px;
  border:1px solid #2a3446;
  background:#0d1424;
  flex:0 0 auto;          /* każda pigułka o stałej szerokości */
}

/* Schowaj starą listę faz */
.phasebar{ display:none !important; }

/* Jedna aktualna faza – badge na środku */
.phase-now{
  margin: 0 auto;                 /* centrowanie między lewą i prawą stroną */
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 12px; border:1px solid #334155; border-radius:10px;
  background:#0f172a; color:#e2e8f0; font-weight:800; letter-spacing:.2px;
  min-width: 160px; text-align:center; box-shadow:var(--shadow);
}

.phase-now .phase-now-label{
  opacity:.85;
  margin-right:6px;
  letter-spacing:.3px;
  color:#cbd5e1;
}

/* === Gracze – lista kompakt jak „szlachcice” (tylko złoto) === */
.players-list{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.player-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 8px;
  border:none;
  background:transparent;
  line-height:1.1;
}

.player-dot{
  width:12px; height:12px; border-radius:50%;
  border:2px solid #475569;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}

.player-name{
  font-weight:800; color:#e2e8f0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex:1 1 auto; min-width:0;
}

.player-gold{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid #2a3446; background:#0d1424; color:#e5e7eb;
  padding:2px 8px; border-radius:999px; font-weight:800;
  flex:0 0 auto;
}
.player-gold .coin{
  width:10px; height:10px; border-radius:50%;
  background:#eab308;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}

/* === Gracze – tryb ciasny (jak szlachcice) === */
.players-list{
  display:flex;
  flex-wrap:wrap;      /* zawijaj tylko między chipami */
  gap:4px;             /* minimalny odstęp */
  margin:0;
  padding:0;
}

.player-item{
  display:inline-flex;
  align-items:center;
  gap:6px;             /* odstęp wewnątrz chipa */
  padding:2px 6px;     /* mała pigułka */
  border:1px solid #2a3446;
  background:#0d1424;
  border-radius:999px;
  line-height:1.1;
  font-size:.9rem;     /* mniejsze */
  white-space:nowrap;  /* wszystko w jednym wierszu */
}

.player-dot{
  width:10px; height:10px; border-radius:50%;
  border:1.5px solid #475569;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
  flex:0 0 auto;
}

.player-name{
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;   /* jakby imię było bardzo długie */
  max-width:160px;          /* możesz zmniejszyć, gdy będzie potrzeba */
}

.player-gold{
  display:inline-flex; align-items:center; gap:4px;
  flex:0 0 auto;
}

.player-gold .coin{
  width:10px; height:10px; border-radius:50%;
  border:1.5px solid #a16207;      /* obwódka „monety” */
  background:#eab308;              /* złoto */
  display:inline-block;
}

.player-gold .val{
  font-weight:800;
}

/* === Gracze – ciasne „chipsy” w jednej linii, bez ramek === */
.players-list{
  display:flex;
  flex-wrap:wrap;   /* zawijaj tylko między chipami */
  gap:4px;          /* minimalny odstęp między chipami */
  margin:0; padding:0;
}

.player-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 6px;           /* mały „oddech” wewnątrz */
  background:transparent;  /* bez tła */
  border:none;             /* bez obramowań */
  line-height:1.1;
  white-space:nowrap;      /* chip nie łamie się w środku */
  flex:0 0 auto;           /* nie rozciągaj na całą szerokość */
}

.player-dot{
  width:10px; height:10px; border-radius:50%;
  background: currentColor;      /* kropka w kolorze gracza */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  flex:0 0 auto;
}

.player-name{
  font-weight:800;
  max-width:140px;              /* skracanie bardzo długich nazw */
  overflow:hidden; text-overflow:ellipsis;
}

.player-gold{
  display:inline-flex; align-items:center; gap:4px;
  font-weight:800;
}

.player-gold .coin{
  width:8px; height:8px; border-radius:50%;
  background:#eab308;           /* „złota” kropka */
  flex:0 0 auto;
}

/* === PLAYERS: twarde nadpisania, żeby było ciasno jak u szlachty === */

/* Lista graczy = „chipsy” obok siebie */
.players-list{
  display:flex;
  flex-wrap:wrap;
  gap:4px;           /* mała przerwa tylko między graczami */
  margin:0; padding:0;
}

/* Jeden gracz jako chip bez ramek/tła */
.players-list .player-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;           /* ODSTĘP MIĘDZY KROPKĄ–NAZWĄ–ZŁOTEM */
  padding:0 4px;
  border:none;
  background:transparent;
  line-height:1.1;
  white-space:nowrap;
  flex:0 0 auto;
}

/* Kropka w kolorze gracza */
.players-list .player-dot{
  width:10px; height:10px; border-radius:50%;
  background: currentColor;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  flex:0 0 auto;
}

/* NAJWAŻNIEJSZE: nazwa NIE może się rozpychać */
.players-list .player-name{
  font-weight:800;
  max-width:140px;
  overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
  flex:0 0 auto !important;   /* zabija wcześniejsze flex:1 1 auto */
  margin:0 !important;        /* żadnych „dziur” przed złotem */
}

/* Złoto — mały chip, bez marginesów */
.players-list .player-gold{
  display:inline-flex; align-items:center; gap:4px;
  flex:0 0 auto;
  margin:0 !important;        /* zero odstępu od nazwy */
  border:none !important;     /* usuń zbędne obramowania z wcześniejszych reguł */
  background:transparent !important;
  padding:0;
}
.players-list .player-gold .coin{
  width:8px; height:8px; border-radius:50%;
  background:#eab308;
  display:inline-block;
  flex:0 0 auto;
}
.players-list .player-gold .val{ font-weight:800; }

/* Bezpieczne czyszczenie starych styli, jeśli gdzieś zostało .player-item */
.players-list .player-item{ border:none !important; background:transparent !important; padding:0 !important; }
.players-list .player-item .player-name{ flex:0 0 auto !important; margin:0 !important; }

#phaseActions{display:flex;flex-wrap:wrap;gap:8px}
#phaseActions button{
  border:1px solid #334155;background:#0f172a;color:#e2e8f0;
  padding:8px 10px;border-radius:10px;font-weight:700;cursor:pointer
}
#phaseActions button:hover{background:#111827;border-color:#475569}
#pickedRegion{font-weight:800;color:#e2e8f0;opacity:.9}

@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  .sidebar, .map-card{ grid-column:1; grid-row:auto; }
}

.map-card{
  background:var(--card);
  border:1px solid #1f2937;
  border-radius:16px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;      /* trzymamy w karcie */
  align-self:start;     /* bez pionowego rozciągania */
}

.svg-wrap{
  position:relative;
  padding: 8px 8px 16px; /* lekki oddech u dołu */
  height:auto;           /* KLUCZ: brak 100vh */
  min-height:0;
}

svg{
  width:100%;
  height:auto;           /* proporcje z viewBox */
  display:block;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.35));
}

.players-list .rankbar{
  height: 8px;
  border-radius: 6px;
  background: currentColor;
  display: inline-block;
  min-width: 14px;      /* żeby nigdy nie zniknął */
  transition: width .18s ease;
}
.players-list .player-chip{ gap:8px; }

/* --- usuń znaczniki listy wszędzie w tych blokach --- */
.players-list,
.players-list ul,
.players-list ol,
.players-list li,
.nobles-list,
.nobles-list ul,
.nobles-list ol,
.nobles-list li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Safari/WebKit – jeszcze potrafi dodać wcięcie */
.players-list, .nobles-list{
  -webkit-padding-start: 0 !important;
  padding-inline-start: 0 !important;
}

/* zabij marker całkiem */
.players-list li::marker,
.nobles-list li::marker{
  content: '' !important;
}