/* Interfejs: pełne, nieprzezroczyste panele o wysokim kontraście (bez szkła), żeby nie zlewały się z mapą. */
:root {
  --panel: #161b22;
  --panel2: #212836;
  --line: #4a5870;
  --accent: #f2b84b;
  --text: #f4f6fa;
  --muted: #a9b5c8;
  --danger: #ff6b5b;
  --good: #62d68c;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0c140e; color: var(--text); font: 16px/1.35 "Segoe UI", system-ui, sans-serif; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
img { -webkit-user-drag: none; }
input, textarea { user-select: text; -webkit-user-select: text; }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.panel, .chip {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(0, 0, 0, 0.55);
}
.btn {
  background: var(--panel2); border: 2px solid var(--line); color: var(--text); border-radius: 8px;
  padding: 8px 14px; font: 600 15px "Segoe UI", sans-serif; cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.accent { background: var(--accent); border-color: #ffd98a; color: #1a1306; font-weight: 800; }
.btn.accent:hover:not(:disabled) { background: #ffcb62; }
.btn.small { padding: 4px 10px; font-size: 13px; }

#topbar { position: fixed; top: 10px; left: 10px; right: 10px; display: flex; align-items: center; gap: 12px; pointer-events: none; }
#topbar > * { pointer-events: auto; }
#topbar .spacer { flex: 1; pointer-events: none; }
.chip { display: flex; align-items: center; gap: 8px; padding: 5px 11px; font-weight: 700; font-size: 17px; }
.chip b { min-width: 3.3ch; font-variant-numeric: tabular-nums; }
#res b { margin-right: 10px; }
#res b:last-child { margin-right: 0; }
#livesBox .heart { color: var(--danger); font-size: 24px; width: auto; height: auto; }
#waveBox { gap: 12px; flex: none; }
#wTxt { width: 4ch; flex: none; }
#wTimer { font-size: 15px; font-weight: 700; color: #ffe2a0; padding: 4px 10px; border-radius: 8px; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: linear-gradient(90deg, rgba(255, 186, 74, 0.42) calc(var(--p, 0) * 100%), rgba(255, 255, 255, 0.07) 0); border: 1px solid rgba(255, 210, 130, 0.25); }
#wTimer { width: 154px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
#wTimer:empty { visibility: hidden; }
#wavePrev { display: flex; flex-wrap: wrap; align-content: center; align-items: center; gap: 2px 6px; width: clamp(180px, 22vw, 350px); height: 44px; flex: none; padding: 0 8px; border-left: 2px solid var(--line); border-right: 2px solid var(--line); }
#wavePrev:empty { visibility: hidden; }
#wavePrev span { display: inline-flex; align-items: center; gap: 3px; font-size: 14px; height: 20px; font-variant-numeric: tabular-nums; }
#wavePrev img { width: 20px; height: 20px; object-fit: contain; }
#bWave { width: 132px; flex: none; white-space: nowrap; }
#wavePrev .lanes { color: var(--danger); letter-spacing: 3px; font-size: 14px; }
/* Menu debugu (klawisz O): przełącznik graczy i testowe przyciski, poza paskiem górnym */
#debug { position: fixed; top: 64px; right: 10px; z-index: 6; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; min-width: 150px; }
#debug.off { display: none; }
body.net-session #players, body.net-session #bReset { display: none; }
#players { display: flex; justify-content: center; gap: 8px; }

.ic { display: inline-block; width: 22px; height: 22px; vertical-align: middle; font-style: normal; text-align: center; line-height: 22px; flex: none; }
.ic.wood { background: linear-gradient(#b98348, #744f2c); border-radius: 5px; box-shadow: inset -5px 0 0 #e0bb88, 0 0 0 1px rgba(0, 0, 0, 0.6); transform: rotate(-20deg) scale(0.9, 0.62); }
.ic.stone { background: linear-gradient(135deg, #e0e6ee, #6e7580); clip-path: polygon(10% 80%, 20% 25%, 60% 8%, 92% 45%, 80% 90%); }

#msg { position: fixed; top: 24%; left: 50%; transform: translateX(-50%); padding: 12px 34px; background: var(--panel); border: 3px solid var(--accent); border-radius: 12px;
  font: 700 38px Georgia, serif; color: var(--accent); opacity: 0; transition: opacity 0.5s; pointer-events: none; letter-spacing: 2px; white-space: nowrap; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.55); }
#msg.on { opacity: 1; }
#msg.bad { border-color: var(--danger); color: var(--danger); }
#flash { position: fixed; inset: 0; pointer-events: none; box-shadow: inset 0 0 180px 50px rgba(255, 60, 40, 0); transition: box-shadow 0.6s; }
#flash.on { box-shadow: inset 0 0 180px 50px rgba(255, 60, 40, 0.55); transition: none; }

#minimap { position: fixed; left: 10px; bottom: 10px; padding: 6px; }
#minimap canvas { display: block; border-radius: 6px; width: 220px; height: 151px; cursor: crosshair; }

/* --- menu budowy: kategorie + duże karty --- */
#build { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 8px 10px 10px; width: 652px; } /* pięć kart w największej kategorii */
#tabs { display: flex; gap: 8px; margin-bottom: 8px; }
.tab { flex: 1; padding: 7px; font: 700 15px "Segoe UI", sans-serif; color: var(--muted); background: var(--panel2); border: 2px solid var(--line); border-radius: 9px; cursor: pointer; }
.tab:hover { color: var(--text); border-color: var(--accent); }
.tab.on { background: var(--accent); border-color: #ffd98a; color: #1a1306; }
#cards { display: flex; gap: 8px; }
.cb { position: relative; width: 120px; flex: none; padding: 6px 4px 8px; text-align: center; background: var(--panel2); border: 2px solid var(--line); border-radius: 10px; color: var(--text); cursor: pointer; font-family: inherit; }
.cb:hover { border-color: var(--accent); background: #2a3344; }
.cb.on { border-color: var(--good); background: #1f3a2c; }
.cb.no { opacity: 0.6; }
.cb img { width: 64px; height: 64px; object-fit: contain; display: block; margin: 0 auto 4px; }
.cb b { font-size: 13px; line-height: 1.15; height: 30px; display: flex; align-items: center; justify-content: center; }
.cb .key { position: absolute; left: 5px; top: 5px; padding: 0 6px; background: #0d1117; border: 1px solid var(--line); border-radius: 6px; font: 700 13px "Segoe UI", sans-serif; color: var(--accent); }
.cost { display: flex; justify-content: center; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; margin-top: 3px; }
.cost span { display: inline-flex; align-items: center; gap: 2px; }
.cost .ic { width: 13px; height: 13px; line-height: 13px; }
.cost .lack { color: var(--danger); }

/* --- panel zaznaczenia --- */
#sel { position: fixed; right: 10px; bottom: 10px; width: 290px; padding: 11px; display: none; }
#sel.on { display: block; }
.sel-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.sel-head img { width: 60px; height: 60px; object-fit: contain; background: var(--panel2); border: 2px solid var(--line); border-radius: 10px; padding: 4px; }
.sel-head h3 { margin: 0; font-size: 18px; }
.sel-head em { font-style: normal; color: var(--accent); font-weight: 700; font-size: 16px; }
.bar { position: relative; height: 20px; background: #0d1117; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.bar i { display: block; height: 100%; width: 100%; background: var(--good); }
.bar span { position: absolute; inset: 0; text-align: center; font: 700 13px/16px "Segoe UI", sans-serif; text-shadow: 0 1px 2px #000; }
.row { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; border-bottom: 1px solid #2a3344; }
.row span { color: var(--muted); }
.hint { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.hint.warn { color: var(--danger); font-weight: 700; }
.act { margin-top: 12px; }
.act .btn { width: 100%; padding: 9px; font-size: 16px; display: flex; justify-content: center; align-items: center; gap: 14px; }
.act .btn.no { opacity: 0.6; }
.act .btn .cost { margin: 0; }
.act .btn.accent .lack { color: #a3170a; }
.hero-actions { display: flex; gap: 6px; margin-top: 10px; }
.hero-actions .btn { flex: 1; min-width: 0; padding: 6px 3px; font-size: 12px; overflow-wrap: anywhere; }
.hero-status { margin-top: 10px; color: var(--accent); font-size: 14px; font-weight: 700; }
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mini { background: var(--panel2); border: 2px solid var(--line); border-radius: 8px; padding: 2px; cursor: pointer; }
.mini img { width: 100%; height: 46px; object-fit: contain; display: block; }
.mini .bar { height: 7px; margin: 2px 0 0; border-width: 1px; border-radius: 4px; }

.pl { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.3); background: var(--c); cursor: pointer; opacity: 0.6; padding: 0; }
.pl:hover { opacity: 0.9; }
.pl.on { opacity: 1; border-color: #fff; }

#loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #0c140e;
  font: 700 56px Georgia, serif; color: var(--accent); letter-spacing: 4px; transition: opacity 0.5s; z-index: 10; }
#loading.off { opacity: 0; pointer-events: none; }

/* --- pływająca podpowiedź (nie wpływa na układ) --- */
#tooltip { position: fixed; z-index: 30; left: 0; top: 0; max-width: 300px; padding: 9px 13px; background: var(--panel); border: 2px solid var(--accent); border-radius: 10px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.5); font-size: 14px; line-height: 1.35; pointer-events: none; opacity: 0; }
#tooltip.on { opacity: 1; }
#tooltip b { color: var(--accent); font-size: 15px; }
#tooltip p { margin: 4px 0 0; color: var(--text); }
#tooltip small { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; }

.ic.gold { background: radial-gradient(circle at 35% 30%, #fff2a8, #e8b020 55%, #9a6a08); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); }

/* Drewniane panele z mosiężnymi okuciami: stylistyka obozu i wojennej mapy. */
:root {
  --panel: #332015;
  --panel2: #4c3020;
  --line: #977044;
  --accent: #e7c77e;
  --text: #f5e6c8;
  --muted: #d0b991;
  --danger: #ff8072;
  --good: #91d99b;
}

.panel, .chip {
  border: 2px solid #a28150;
  border-radius: 5px;
  background-color: #3b2418;
  background-image: linear-gradient(180deg, rgba(102, 65, 39, 0.36), rgba(21, 12, 8, 0.45)),
    repeating-linear-gradient(90deg, rgba(20, 10, 6, 0.16) 0 2px, rgba(151, 103, 58, 0.09) 3px 5px, transparent 7px 39px, rgba(13, 7, 4, 0.32) 40px 42px);
  box-shadow: 0 4px 0 #21130d, 0 6px 8px rgba(0, 0, 0, 0.65), inset 0 0 0 2px #50331f, inset 0 1px 0 #d7b678;
}

/* Ćwieki są ozdobą ram, nie zakrywają elementów sterujących. */
#build::before, #build::after, #sel::before, #sel::after, #minimap::before, #minimap::after {
  content: ''; position: absolute; top: 4px; width: 4px; height: 4px; border-radius: 50%; pointer-events: none;
  background: #e6ca85; box-shadow: 0 1px 1px #211006, inset 0 1px 1px #fff0bb;
}
#build::before, #sel::before, #minimap::before { left: 4px; }
#build::after, #sel::after, #minimap::after { right: 4px; }

.btn, .tab {
  color: #f5e7ca; border: 2px solid #977043; border-radius: 4px;
  background: linear-gradient(180deg, #69482e, #47301e 52%, #342115);
  box-shadow: inset 0 1px 0 rgba(255, 225, 163, 0.2), 0 2px 0 rgba(20, 10, 5, 0.65);
  text-shadow: 0 1px 2px #211207;
}
.btn:hover:not(:disabled), .tab:hover { color: #fff5d9; border-color: #efcf88; background: linear-gradient(#80603c, #4b301d); }
.btn.accent, .tab.on {
  color: #3b2812; border-color: #d6b66f;
  background: linear-gradient(145deg, #ae8748, #f3dfa6 45%, #c8a35f 78%, #a57b40);
  box-shadow: inset 0 0 0 1px rgba(255, 242, 195, 0.48), 0 2px 0 #39240f;
  text-shadow: 0 1px 0 rgba(255, 239, 191, 0.55);
}
.btn.accent:hover:not(:disabled), .tab.on:hover { color: #30200e; border-color: #ffe5a3; background: linear-gradient(145deg, #c8a666, #fff0bc 45%, #d4b474); }
.tab { font-family: Georgia, serif; letter-spacing: 0.3px; }

#wTimer {
  color: #f5dfad; border-color: #82613c; border-radius: 3px;
  background: linear-gradient(90deg, rgba(192, 143, 68, 0.55) calc(var(--p, 0) * 100%), rgba(30, 17, 10, 0.7) 0);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55);
}
#topbar .chip { height: 56px; }
#wavePrev { border-color: #765333; }
#wavePrev .lanes { color: #f39977; }
#minimap canvas { border-radius: 2px; }

.cb {
  color: #f5e6c8; border: 2px solid #9a7549; border-radius: 4px;
  background: linear-gradient(155deg, #765138, #563820 52%, #3c2518);
  box-shadow: inset 0 1px 0 rgba(255, 224, 170, 0.35), inset 1px 0 0 rgba(255, 217, 151, 0.15), inset 0 -3px 0 rgba(29, 14, 7, 0.42), 0 2px 1px rgba(12, 6, 3, 0.65);
}
.cb:hover { border-color: #e7c77e; background: linear-gradient(155deg, #906a45, #634227 55%, #442a19); }
.cb.on { border-color: #b7e1a8; background: linear-gradient(155deg, #6c8650, #405c36 55%, #2b4029); }
.cb.no {
  opacity: 1; border-color: #514331;
  background: linear-gradient(155deg, #41392f, #302820 55%, #241d18);
  box-shadow: inset 0 1px 0 rgba(222, 203, 171, 0.12), inset 0 -3px 0 rgba(15, 10, 7, 0.35), 0 2px 1px rgba(12, 6, 3, 0.5);
}
.cb.no img { filter: grayscale(0.9) brightness(0.62); }
.cb.no b { color: #a99b86; }
.cb.no:hover { border-color: #b99968; background: linear-gradient(155deg, #514437, #382d23); }
.cb b { text-shadow: 0 1px 2px #120a06; }
.cb .key { background: #21160f; border-color: #a08050; border-radius: 3px; color: #f3dca4; }
.cost .lack { color: #ff9a88; }

.sel-head img, .mini { background: #2a1c14; border-color: #937044; border-radius: 4px; }
.sel-head h3 { color: #f9e7bd; font-family: Georgia, serif; }
.row { border-color: #765333; }
.bar { background: #1d130d; border-color: #81603d; border-radius: 3px; }
.bar i { background: linear-gradient(#b5e8a1, #4f9c57 55%, #347239); }
.hero-status { color: #f1d18c; }
.hint { color: #dfc8a2; }

#tooltip {
  color: #f5e6c8; background: #2c1c13;
  background-image: linear-gradient(145deg, #4e3220, #291a12 72%);
  border-color: #c4a164; border-radius: 4px;
  box-shadow: 0 3px 0 #1b100a, 0 6px 12px rgba(0, 0, 0, 0.6), inset 0 0 0 1px #71512d;
}
#tooltip b { color: #f4d795; }
#tooltip small { color: #d6bd92; }
#msg {
  color: #3d2915; border-color: #8b683c; border-radius: 5px;
  background: linear-gradient(135deg, #a37d46, #f0dda6 40%, #c7a562 75%, #a27b43);
  text-shadow: 0 1px 0 rgba(255, 244, 208, 0.5);
  box-shadow: 0 0 0 3px #352116, 0 6px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 238, 186, 0.4);
}
#msg.bad { color: #772d1f; border-color: #a96045; }

/* --- kupiec: okno jednorazowej wymiany --- */
#merchant { position: fixed; left: 50%; top: 26%; transform: translateX(-50%); display: none; flex-direction: column; gap: 8px; padding: 12px 14px; min-width: 380px; z-index: 5; }
#merchant.on { display: flex; }
#merchant .mTitle { display: flex; justify-content: space-between; align-items: center; font: 700 22px Georgia, serif; color: var(--accent); }
#merchant .mTitle button { background: none; border: 0; color: inherit; font-size: 18px; cursor: pointer; }
#merchant .btn { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 14px; font-size: 16px; }
#merchant .give { color: #ff9a8a; } #merchant .get { color: #8ff0a8; } #merchant .arrow { opacity: 0.7; }