:root {
  --bg: #0f1c2b;
  --panel: rgba(16, 26, 40, 0.9); /* bez backdrop-filter: rozmazání pod panely by GPU přepočítávalo každý snímek mapy */
  --panel-solid: #16263a;
  --border: rgba(255, 255, 255, 0.09);
  --text: #e8eef5;
  --muted: #8fa3b8;
  --accent: #e5a13a;
  --accent-2: #f3c26b;
  --danger: #ef5350;
  --good: #66bb6a;
  --ally: #4fc3f7;
  --troops: #6cc24a;      /* vojáci: zelená */
  --troops-2: #a9e38c;    /* světlá varianta pro text */
  --def: #4a90e2;         /* obrana: modrá */
  --def-2: #9cc7f5;
  --land: #ef7d3c;        /* území: oranžová */
  --land-2: #ffb488;
  --radius: 12px;
  color-scheme: dark;
  font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.tiny { font-size: 11px; }
.mt { margin-top: 14px; }
kbd {
  display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid var(--border);
  font-size: 11px; line-height: 17px; text-align: center; font-family: inherit;
}

/* ------------------------------------------------------------ obrazovky */
.screen {
  position: fixed; inset: 0; display: flex; align-items: safe center; justify-content: center;
  padding: 16px; overflow-y: auto;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cpath d='M28 0L56 16.17V48.5L28 64.66L0 48.5V16.17ZM28 64.66V97' fill='none' stroke='%23ffffff' stroke-opacity='.035' stroke-width='1.5'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 20% 10%, rgba(229, 161, 58, 0.14), transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(30, 99, 214, 0.18), transparent 55%),
    var(--bg);
}
.card {
  background: var(--panel-solid); border: 1px solid var(--border); border-radius: 18px;
  padding: 28px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.menu-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; padding: 32px; }
.logo { font-size: 44px; font-weight: 800; letter-spacing: -1px; display: flex; align-items: center; gap: 12px; }
.logo-hex {
  width: 38px; height: 42px; background: linear-gradient(160deg, var(--accent-2), var(--accent));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  filter: drop-shadow(0 0 14px rgba(229, 161, 58, 0.5));
}
.tagline { margin: -10px 0 4px; color: var(--muted); }
.panel-sec {
  display: flex; flex-direction: column; gap: 14px; padding: 14px 16px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border);
}
.menu-links { justify-content: space-between; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 13px; color: var(--muted); }
input, select {
  background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; outline: none;
}
input:focus, select:focus { border-color: var(--accent); }
select:disabled { opacity: 0.7; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 30px; height: 30px; border-radius: 50%; border: 3px solid transparent; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.swatches.small .swatch { width: 24px; height: 24px; }
.swatch.selected { border-color: #fff; transform: scale(1.1); }
.swatch.taken { opacity: 0.25; cursor: not-allowed; }

.btn {
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.07); border-radius: 10px;
  padding: 10px 16px; cursor: pointer; font-weight: 500; transition: background 0.15s, transform 0.05s;
}
.btn:hover { background: rgba(255, 255, 255, 0.13); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(160deg, var(--accent-2), var(--accent)); color: #1b1305; border: none; font-weight: 700; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.big { padding: 13px 20px; font-size: 17px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.danger { color: #ffb4b1; }
.btn.sm { padding: 6px 10px; font-size: 13px; border-radius: 8px; }
.link-btn { background: none; border: none; color: var(--accent-2); cursor: pointer; text-decoration: underline; padding: 4px; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.join-row { display: flex; gap: 8px; }
.join-row .btn { white-space: nowrap; }
.join-row input { min-width: 0; }
.play-modes { display: flex; flex-direction: column; gap: 8px; }
.play-mode {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; text-align: left;
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.05); cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.play-mode:hover:not(:disabled) { background: rgba(229, 161, 58, 0.1); border-color: rgba(229, 161, 58, 0.45); }
.play-mode:active:not(:disabled) { transform: translateY(1px); }
.play-mode:disabled { opacity: 0.45; cursor: not-allowed; }
.play-icon { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; }
.play-icon svg { width: 40px; height: 40px; overflow: visible; transition: transform 0.2s, filter 0.2s; }
.play-mode:hover:not(:disabled) .play-icon svg { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(229, 161, 58, 0.45)); }
.play-mode:disabled .play-icon svg { filter: grayscale(0.7); }
.play-text { display: flex; flex-direction: column; gap: 2px; }
.play-text b { font-size: 16px; }
.play-text span { font-size: 13px; color: var(--muted); }
.mp { display: flex; flex-direction: column; gap: 18px; }
.mp-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.icon-btn {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 10px; cursor: pointer;
  color: var(--muted); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border);
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.05s;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { color: var(--accent-2); background: rgba(229, 161, 58, 0.08); border-color: rgba(229, 161, 58, 0.35); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mp-head-icon { flex: none; width: 36px; height: 36px; }
.mp-title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.mp-title b { font-size: 17px; }
.mp-title span { font-size: 13px; color: var(--muted); }
.mp-sec { display: flex; flex-direction: column; gap: 8px; }
.mp-sec-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.menu-wrap { display: flex; gap: 18px; align-items: stretch; justify-content: center; width: 100%; max-width: 900px; }
.menu-wrap .menu-card { flex: 0 0 auto; }
.join-row input { flex: 1; text-transform: uppercase; letter-spacing: 6px; font-weight: 700; text-align: center; font-size: 18px; }

/* ------------------------------------------------------------ lobby */
/* Lobby se musí vejít do okna: karta má výšku nejvýš okna, při přetečení se posouvá jen seznam hráčů / nastavení */
.lobby-card { width: 100%; max-width: 1180px; padding: 18px 28px; max-height: 100%; display: flex; flex-direction: column; }
.lobby-head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  flex: none; padding: 6px 18px; border-radius: 14px; border: 1px solid var(--border);
  background: linear-gradient(120deg, rgba(229, 161, 58, 0.14), rgba(255, 255, 255, 0.03) 60%);
}
.room-code { font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: 8px; color: var(--accent-2); }
.lobby-share { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 240px; text-align: right; }
.lobby-grid {
  display: grid; grid-template-columns: 1fr 3fr; grid-template-rows: minmax(0, 1fr); gap: 24px; margin-top: 14px;
  flex: 0 1 auto; min-height: 0;
}
.lobby-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.lobby-col > * { flex: none; }
.lobby-col .members, .lobby-col .settings { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.lobby-grid h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 500; display: flex; align-items: baseline; gap: 8px; }
.lobby-grid h3 .count { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--accent-2); }
.members { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.members li {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid transparent;
}
.members li.me { border-color: rgba(229, 161, 58, 0.35); background: rgba(229, 161, 58, 0.07); }
.members li.off { opacity: 0.45; }
.avatar {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.mname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mtags { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--muted); }
.tag.host { background: rgba(229, 161, 58, 0.18); color: var(--accent-2); }
.dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
.settings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: stretch; }
.cheat-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer;
  padding: 12px 16px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03);
}
.cheat-toggle:hover { background: rgba(255, 255, 255, 0.06); }
.ct-text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--text); }
.ct-text b { display: inline-flex; align-items: center; gap: 8px; }
.ct-icon { width: 20px; height: 20px; flex: none; color: #ce93d8; --ic-acc: #ba68c8; }
.switch {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; position: relative; width: 44px; height: 24px; padding: 0;
  border-radius: 999px; cursor: pointer; background: rgba(255, 255, 255, 0.16); border: none; transition: background 0.2s;
}
.switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transition: transform 0.2s;
}
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.switch:disabled { opacity: 0.5; cursor: not-allowed; }
.set-group {
  margin: 0; min-width: 0; border: 1px solid var(--border); border-radius: 14px; padding: 6px 16px 14px;
  background: rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; gap: 12px;
}
.set-group legend { padding: 0 8px; margin-left: -8px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.lg-icon { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: var(--accent-2); --ic-acc: #fff; }
.set-row { display: flex; flex-direction: column; gap: 6px; }
.set-label { font-size: 13px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button {
  padding: 5px 12px; border-radius: 999px; cursor: pointer; font-size: 13px; line-height: 1.4;
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.05); transition: background 0.15s, border-color 0.15s;
}
.chips button:hover:not(:disabled):not(.on) { background: rgba(255, 255, 255, 0.13); }
.chips button.on { background: var(--accent); border-color: var(--accent); color: #1b1305; font-weight: 700; }
.chips button:disabled { cursor: default; }
.chips button:disabled:not(.on) { opacity: 0.55; }
.step-slider {
  --c: var(--accent-2); --fill: 50%;
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 8px; font-size: 13px; color: var(--muted);
}
.step-slider .ss-label { white-space: nowrap; }
.step-slider .ss-value { color: var(--c); font-weight: 600; font-size: 12px; text-align: right; transition: color 0.2s; }
.step-slider input[type='range'] {
  grid-column: 1 / -1; width: 100%; height: 22px; margin: 2px 0 -4px; padding: 0; background: none;
  appearance: none; -webkit-appearance: none; cursor: grab; touch-action: none;
}
.step-slider input[type='range']:active { cursor: grabbing; }
.step-slider input[type='range']::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--c) var(--fill), rgba(255, 255, 255, 0.12) var(--fill));
}
.step-slider input[type='range']::-moz-range-track {
  height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--c) var(--fill), rgba(255, 255, 255, 0.12) var(--fill));
}
.step-slider input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
  background: var(--c); border: 3px solid #0f1722; box-shadow: 0 0 0 2px var(--c); transition: transform 0.15s;
}
.step-slider input[type='range']::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: var(--c); border: 3px solid #0f1722; box-shadow: 0 0 0 2px var(--c); transition: transform 0.15s;
}
.step-slider input[type='range']:not(:disabled):hover::-webkit-slider-thumb,
.step-slider input[type='range']:not(:disabled):active::-webkit-slider-thumb { transform: scale(1.15); }
.step-slider input[type='range']:not(:disabled):hover::-moz-range-thumb,
.step-slider input[type='range']:not(:disabled):active::-moz-range-thumb { transform: scale(1.15); }
.step-slider input[type='range']:disabled { cursor: default; opacity: 0.7; }
.step-slider .ss-steps { grid-column: 1 / -1; display: flex; justify-content: space-between; margin: 0 -4px; }
.step-slider .ss-steps button {
  width: 28px; height: 26px; padding: 0; background: none; border: none; border-radius: 6px; cursor: pointer; font-size: 16px;
  color: var(--muted); opacity: 0.55; filter: grayscale(0.6); transition: opacity 0.15s, filter 0.15s, transform 0.15s;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.step-slider .ss-steps button:hover:not(:disabled) { opacity: 0.8; }
.step-slider .ss-steps button.on { opacity: 1; filter: none; color: var(--c); transform: scale(1.15); }
.step-slider .ss-steps button:disabled { cursor: default; }
.step-slider .ss-icon { width: 18px; height: 18px; --ic-acc: currentColor; }
.step-slider .ss-steps button.on .ss-icon { --ic-acc: #fff; }
.lobby-actions { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.lobby-actions .btn.primary { min-width: 200px; }
#leave { margin-right: auto; }
@media (max-width: 1000px) and (min-width: 721px) {
  .settings { grid-template-columns: 1fr 1fr; }
}
@media (max-height: 640px) {
  .lobby-card { padding: 12px 20px; }
  .lobby-grid { margin-top: 10px; }
  .set-group { gap: 8px; padding-bottom: 10px; }
  .lobby-actions { margin-top: 10px; padding-top: 10px; }
}
@media (max-width: 720px) {
  .card { padding: 20px; }
  .lobby-card { padding: 20px; }
  .lobby-grid { grid-template-columns: 1fr; gap: 20px; }
  .settings { grid-template-columns: 1fr; }
  .room-code { font-size: 36px; letter-spacing: 6px; }
  .lobby-share { align-items: flex-start; text-align: left; max-width: none; }
  .lobby-actions .btn.primary { width: 100%; order: -1; }
  #leave { margin-right: 0; }
}

/* ------------------------------------------------------------ hra */
#game { position: fixed; inset: 0; }
#map { position: absolute; inset: 0; display: block; cursor: crosshair; touch-action: none; }
#map-gl { position: absolute; inset: 0; display: block; pointer-events: none; }
/* vlastní kurzory nad mapou podle toho, co udělá klik (data-act nastavuje updateTooltip v main.js) */
#map[data-act='attack'] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M2 2l7 1.5 12.5 12.5-5 5L4 8.5z' fill='%23e9eef5' stroke='%23141821' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M4.5 4.5l14 14' stroke='%23aab4c2' stroke-width='1'/%3E%3Cpath d='M14 25l11-11' stroke='%23141821' stroke-width='5.5' stroke-linecap='round'/%3E%3Cpath d='M14 25l11-11' stroke='%23d9a84a' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M20.5 20.5l5 5' stroke='%23141821' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M20.5 20.5l5 5' stroke='%238a5a30' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='27' cy='27' r='3' fill='%23d9a84a' stroke='%23141821' stroke-width='1.6'/%3E%3C/svg%3E") 2 2, crosshair; }
#map[data-act='boat'] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 3v17' stroke='%23141821' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M16 3v17' stroke='%238a5a30' stroke-width='1.6'/%3E%3Cpath d='M17.5 5l8 12h-8z' fill='%23f2f4f8' stroke='%23141821' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M14.5 7l-7 10h7z' fill='%23dfe5ee' stroke='%23141821' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M4 21h24l-4.5 6h-15z' fill='%239a6a3a' stroke='%23141821' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, crosshair; }
#map[data-act='bad'] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg opacity='0.75'%3E%3Cpath d='M2 2l7 1.5 12.5 12.5-5 5L4 8.5z' fill='%23e9eef5' stroke='%23141821' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M4.5 4.5l14 14' stroke='%23aab4c2' stroke-width='1'/%3E%3Cpath d='M14 25l11-11' stroke='%23141821' stroke-width='5.5' stroke-linecap='round'/%3E%3Cpath d='M14 25l11-11' stroke='%23d9a84a' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M20.5 20.5l5 5' stroke='%23141821' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M20.5 20.5l5 5' stroke='%238a5a30' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='27' cy='27' r='3' fill='%23d9a84a' stroke='%23141821' stroke-width='1.6'/%3E%3C/g%3E%3Ccircle cx='22' cy='22' r='7.5' fill='%23ffffff' stroke='%23141821' stroke-width='1.4'/%3E%3Ccircle cx='22' cy='22' r='5.6' fill='none' stroke='%23e5484d' stroke-width='2.4'/%3E%3Cpath d='M18 26l8-8' stroke='%23e5484d' stroke-width='2.4'/%3E%3C/svg%3E") 2 2, not-allowed; }
#map.over-target { cursor: pointer; }
#map.dragging { cursor: grabbing; }
.panel {
  position: absolute; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.panel h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 500; }

#topbar {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; gap: 6px;
  border-top: none; border-radius: 0 0 var(--radius) var(--radius);
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.stat { padding: 6px 14px; min-width: 118px; border-radius: 8px; cursor: help; display: flex; flex-direction: column; gap: 1px; }
.stat:hover { background: rgba(255, 255, 255, 0.05); }
.stat + .stat { border-left: 1px solid var(--border); border-radius: 0; }
.stat:hover + .stat, .stat + .stat:hover { border-radius: 0; }
.stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.stat-value { font-size: 18px; line-height: 1.25; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat-value b { font-weight: 700; }
.stat-value .muted { font-size: 13px; font-weight: 400; }
#st-troops, #st-gold { width: 150px; }
#st-troops .stat-value, #st-gold .stat-value { font-size: 22px; }
/* Vojáci a zlato: plné barevné karty */
#topbar #st-troops, #topbar #st-gold { border: none; border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 8px rgba(0, 0, 0, 0.25); }
#topbar #st-troops:hover, #topbar #st-gold:hover { filter: brightness(1.08); }
#st-troops { background: linear-gradient(160deg, #57a83f, #2f6e27); color: #fff; }
#st-troops .stat-label, #st-troops .stat-value .muted { color: rgba(240, 255, 232, 0.78); }
#st-troops .ri-troops { color: #fff; --ic-acc: #d6f5c4; }
#st-troops .bar { background: rgba(0, 0, 0, 0.28); }
#st-troops .bar > div { background: #d6f5c4; }
#st-gold { margin-left: 6px; background: linear-gradient(160deg, var(--accent-2), var(--accent)); color: #1b1305; }
#st-gold .stat-label { color: rgba(27, 19, 5, 0.72); }
#st-gold .ri-gold { color: #1b1305; --ic-acc: #fff3d0; }
#st-gold .stat-inc { font-size: 13px; font-weight: 500; color: #5a3a08; }
/* Obrana a území: plné barevné karty */
#topbar #st-def, #topbar #st-land { border: none; border-radius: 8px; margin-left: 6px; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 8px rgba(0, 0, 0, 0.25); }
#topbar #st-def:hover, #topbar #st-land:hover { filter: brightness(1.08); }
#st-def { background: linear-gradient(160deg, #4f92dc, #2a5c9c); }
#st-land { background: linear-gradient(160deg, #f08a4b, #c2511d); }
#st-def .stat-label { color: rgba(232, 243, 255, 0.8); }
#st-land .stat-label, #st-land .stat-value .muted { color: rgba(255, 238, 226, 0.82); }
#st-def .ri-def { color: #fff; --ic-acc: #cfe4fb; }
#st-land .ri-land { color: #fff; --ic-acc: #ffd9bf; }
#st-def .bar, #st-land .bar { background: rgba(0, 0, 0, 0.28); }
#st-def .bar > div { background: #cfe4fb; }
#st-land .bar > div { background: #ffe2cc; }
#topbar #st-land + .stat { border-left: none; margin-left: 6px; }
.stat.full #v-troops { color: var(--accent-2); }
.stat.near .bar > div { background: var(--accent-2); }
.bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); margin: 4px 0 3px; overflow: hidden; }
.bar.ph { background: none; }
.bar > div { height: 100%; width: 0; background: var(--good); transition: width 0.25s; }
.bar.def > div { background: var(--ally); }
.bar.land > div { background: var(--accent); }
.stat.full .bar > div { background: var(--accent-2); }

.banner {
  position: absolute; top: 90px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(160deg, var(--accent-2), var(--accent)); color: #1b1305; font-weight: 700;
  padding: 12px 22px; border-radius: 12px; font-size: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  text-align: center; pointer-events: none;
}
.banner.dark { background: var(--panel-solid); color: var(--text); border: 1px solid var(--border); }

#economy { left: 0; top: 0; width: 240px; padding: 14px; border-top: none; border-left: none; border-radius: 0 0 var(--radius) 0; }
.split { margin-bottom: 10px; }
.split-head { display: flex; justify-content: space-between; font-size: 14px; }
.split input[type='range'] { width: 100%; padding: 0; margin: 4px 0 0; }
.split-sub { font-size: 12px; color: var(--muted); min-height: 15px; }
.warn {
  margin-top: 10px; font-size: 12px; line-height: 1.4; padding: 8px 10px; border-radius: 8px;
  background: rgba(243, 194, 107, 0.14); border: 1px solid rgba(243, 194, 107, 0.4); color: var(--accent-2);
}
input[type='range'] { accent-color: var(--accent); background: none; border: none; }

#side {
  right: 0; top: 0; width: 270px; padding: 14px; border-top: none; border-right: none; border-radius: 0 0 0 var(--radius); max-height: calc(100vh - 32vh - 150px); overflow-y: auto;
}

/* varování o útocích mimo výhled */
#alert-layer { position: absolute; inset: 0; pointer-events: none; z-index: 12; overflow: hidden; }
.atk-arrow {
  position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: none; background: none;
  pointer-events: none; cursor: pointer; animation: aaIn 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.atk-arrow > * { pointer-events: auto; }
.aa-dir {
  position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 45, 45, 0.95) 0 55%, rgba(255, 45, 45, 0) 56%);
  box-shadow: 0 0 0 2px var(--pc), 0 0 18px rgba(255, 40, 40, 0.8);
}
.aa-dir::after {
  content: ''; position: absolute; left: 44px; top: 50%; transform: translate(-6px, -50%);
  border: 9px solid transparent; border-left: 13px solid #ff3b3b; filter: drop-shadow(0 0 4px rgba(255, 40, 40, 0.9));
}
.aa-ic { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font-size: 20px; line-height: 1; }
.aa-n {
  position: absolute; left: 0; top: 26px; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: #fff;
  background: rgba(120, 0, 0, 0.85); padding: 1px 6px; border-radius: 999px; white-space: nowrap;
}
.aa-n:empty { display: none; }
.atk-arrow.hot .aa-dir { animation: aaPulse 0.5s ease-in-out infinite alternate; }
@keyframes aaIn { from { opacity: 0; scale: 2.2; } }
@keyframes aaPulse { to { box-shadow: 0 0 0 2px var(--pc), 0 0 34px 8px rgba(255, 40, 40, 0.95); } }

/* minimapa */
.bl-stack { position: absolute; left: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
#minimap-wrap { position: static; padding: 6px; border-left: none; border-bottom: none; border-radius: 0 var(--radius) 0 0; }
.mm-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em; padding: 0 2px 4px; }
.mm-btn { background: rgba(255, 255, 255, 0.08); border: none; border-radius: 5px; width: 22px; height: 18px; cursor: pointer; line-height: 1; }
.mm-btn:hover { background: rgba(255, 255, 255, 0.18); }
#fps {
  position: absolute; top: 54px; left: 50%; transform: translateX(-50%); z-index: 20; pointer-events: none;
  padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.7); color: #9effa0;
  font: 11px/1.4 ui-monospace, Menlo, monospace; text-align: center; white-space: nowrap;
}
#minimap { display: block; border-radius: 6px; cursor: pointer; touch-action: none; }
#game.mm-off #minimap { display: none; }
#game.mm-off .mm-head { padding-bottom: 0; gap: 10px; }

/* nabídka aliance */
#ally-popup { position: absolute; top: 98px; left: 50%; transform: translateX(-50%); z-index: 15; width: min(560px, calc(100vw - 32px)); }
.ally-card {
  --pc: var(--ally);
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center;
  padding: 16px 18px; border-radius: 16px; background: rgba(12, 24, 38, 0.97);
  border: 2px solid var(--pc); box-shadow: 0 0 0 0 var(--pc), 0 18px 50px rgba(0, 0, 0, 0.55);
  animation: allyIn 0.35s cubic-bezier(0.2, 1.4, 0.4, 1), allyGlow 1.6s ease-in-out 0.35s infinite;
}
.ally-icon {
  grid-row: span 2; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 30px;
  background: color-mix(in srgb, var(--pc) 28%, transparent); border: 2px solid var(--pc);
}
.ally-kicker { font-size: 11px; letter-spacing: 0.14em; font-weight: 700; color: var(--ally); }
.ally-title { font-size: 20px; font-weight: 700; line-height: 1.25; }
.ally-meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.ally-meta b { color: var(--text); font-weight: 500; }
.ally-note { grid-column: 1 / -1; font-size: 12px; color: var(--muted); margin-top: 4px; }
.ally-actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 6px; align-items: center; }
.ally-actions .btn.primary { flex: 1.4; }
.ally-actions .btn:not(.primary) { flex: 1; }
.ally-more { grid-column: 1 / -1; font-size: 12px; color: var(--accent-2); }
@keyframes allyIn { from { transform: translateY(-24px) scale(0.92); opacity: 0; } }
@keyframes allyGlow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc) 60%, transparent), 0 18px 50px rgba(0, 0, 0, 0.55); }
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--pc) 0%, transparent), 0 18px 50px rgba(0, 0, 0, 0.55); }
}
.badge.req { animation: blink 1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.leaderboard, .attacks { list-style: none; padding: 0; margin: 0; }
.leaderboard { display: flex; flex-direction: column; gap: 3px; }
.leaderboard li {
  display: grid; grid-template-columns: 18px 14px 1fr auto; align-items: center; gap: 2px 8px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.leaderboard .bd { grid-column: 3 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.leaderboard .bd .badge { margin: 0; }
.leaderboard .lbar { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.07); margin-top: 4px; overflow: hidden; }
.leaderboard .lbar i { display: block; height: 100%; border-radius: 2px; opacity: 0.85; }
.leaderboard li:hover { background: rgba(255, 255, 255, 0.06); }
.leaderboard li.me { background: rgba(229, 161, 58, 0.14); }
.leaderboard li.sel { outline: 1px solid var(--accent); }
.leaderboard li.dead { opacity: 0.35; }
.leaderboard .rank { color: var(--muted); font-size: 12px; text-align: right; }
.leaderboard .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard .num b { color: var(--text); font-weight: 600; }
.leaderboard .num { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; text-align: right; white-space: nowrap; }
.lb-wrap { position: relative; }
.lb-links { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.lb-links path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
.lb-links .mine path { stroke-width: 2.5; opacity: 1; }
.lb-links circle { stroke: var(--panel-solid); stroke-width: 1.5; }
.badge { font-size: 11px; padding: 1px 6px; border-radius: 999px; margin-left: 4px; vertical-align: 1px; }
.badge.ally { background: rgba(79, 195, 247, 0.2); color: var(--ally); }
.badge.truce { background: rgba(243, 194, 107, 0.18); color: var(--accent-2); }
.badge.req { background: rgba(102, 187, 106, 0.2); color: var(--good); }
.badge.pact { background: rgba(179, 157, 219, 0.2); color: #c5b3ec; }
.badge.traitor { background: rgba(239, 83, 80, 0.2); color: var(--danger); }

#diplo:not(:empty) {
  margin-top: 10px; padding: 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border);
}
.diplo-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.diplo-head .dot { width: 16px; height: 16px; flex: none; }
.dh-name { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.diplo-rep { font-size: 12px; color: var(--muted); margin: -2px 0 10px; }
.diplo-rep.bad { color: var(--danger); }
.diplo-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.dt { background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 6px 10px; display: flex; flex-direction: column; gap: 1px; }
.dt span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.dt b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.diplo-blds { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); padding: 6px 2px 12px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.diplo-blds b { color: var(--text); font-weight: 600; }
.diplo-blds span { display: inline-flex; align-items: center; gap: 4px; }
.bi { width: 16px; height: 16px; flex: none; color: var(--text); --ic-acc: var(--accent-2); }
.diplo-blds .sites { flex-basis: 100%; }
.diplo-blds:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 2px; }
.diplo-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.diplo-btns .btn { flex: 1 1 45%; }
.request {
  padding: 10px; border-radius: 10px; margin-bottom: 10px; font-size: 13px;
  background: rgba(102, 187, 106, 0.14); border: 1px solid rgba(102, 187, 106, 0.4);
}
.request .row { display: flex; gap: 6px; margin-top: 8px; }
.request .btn { flex: 1; }

.attacks li { display: flex; align-items: center; gap: 8px; padding: 5px 6px; font-size: 13px; border-radius: 8px; }
.attacks li.in { background: rgba(239, 83, 80, 0.14); }
.attacks li.out { background: rgba(255, 255, 255, 0.04); }
.attacks .grow { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attacks .x {
  border: none; background: rgba(255, 255, 255, 0.1); border-radius: 6px; width: 24px; height: 22px; cursor: pointer;
}
.attacks .x:hover { background: var(--danger); }
.attacks .empty { color: var(--muted); font-size: 12px; }

#ready-bar {
  left: 50%; bottom: 0; transform: translateX(-50%); padding: 12px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; text-align: center;
}
#ready-info { font-size: 13px; }
#ready-info:empty { display: none; }
#ready-btn { min-width: 210px; border: none; color: #fff; font-weight: 700; background: linear-gradient(160deg, #7cc97f, var(--good) 45%, #43a047); }
#ready-btn.is-ready { background: linear-gradient(160deg, #f27370, var(--danger) 45%, #d32f2f); }
#ready-btn:hover:not(:disabled) { filter: brightness(1.08); }
#ready-btn:disabled { background: rgba(255, 255, 255, 0.07); color: var(--muted); border: 1px solid var(--border); }
#actionbar {
  left: 50%; bottom: 0; transform: translateX(-50%); padding: 10px; display: grid; border-bottom: none; border-radius: var(--radius) var(--radius) 0 0;
  grid-template-columns: auto 230px; grid-template-rows: auto auto; gap: 8px 14px; align-items: center;
}
/* rychlé menu diplomacie: záložka se jménem a tlačítka, přilepené nad lištou akcí */
#qdiplo { position: absolute; left: -1px; right: -1px; bottom: calc(100% + 8px); }
#qdiplo:empty { display: none; }
.qd-tab {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 8px 7px 12px; font-size: 14px;
  background: var(--panel-solid); border: 1px solid var(--border); border-bottom: none; border-radius: 10px 10px 0 0;
}
.qd-tab b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qd-tab .dot { width: 12px; height: 12px; flex: none; }
.qd-tab .badge { margin-left: 0; }
.qd-x { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 6px; }
.qd-x:hover { color: var(--text); background: rgba(255, 255, 255, 0.1); }
.qd-body {
  display: flex; gap: 8px; padding: 10px; background: var(--panel-solid); border: 1px solid var(--border);
  border-radius: 0 var(--radius) var(--radius) var(--radius); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.qd-btns { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qd-btns .btn { flex: 1 1 0; min-width: 150px; padding-top: 10px; padding-bottom: 10px; }
.qd-btns > span { flex: 1 1 0; min-width: 150px; text-align: center; }
.qd-focus { flex: none; width: 48px; font-size: 20px; padding: 0; }
.modes { display: flex; gap: 6px; }
.mode {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 76px;
  padding: 8px 10px 6px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.05);
  cursor: pointer; font-size: 13px;
}
.mode:hover { background: rgba(255, 255, 255, 0.12); }
.mode.active { background: rgba(229, 161, 58, 0.22); border-color: var(--accent); }
.mode.cant small { color: var(--danger); }
.mode.can { background: linear-gradient(160deg, var(--accent-2), var(--accent)); border-color: var(--accent-2); color: #1b1305; font-weight: 600; }
.mode.can:hover { filter: brightness(1.08); }
.mode.can small { color: #3a2808; }
.mode.can.active { outline: 2px solid #fff; outline-offset: 1px; }
.mode[data-mode=attack] { margin-right: 8px; position: relative; }
.mode[data-mode=attack]::after { content: ''; position: absolute; right: -9px; top: 6px; bottom: 6px; width: 1px; background: var(--border); }
.mode .cnt { position: absolute; top: 4px; left: 6px; font-style: normal; font-size: 10px; font-weight: 700; opacity: 0.8; }
.mode { --ic-acc: var(--accent-2); }
.mode-icon { width: 26px; height: 26px; margin-bottom: 1px; transition: transform 0.12s; }
.mode:hover .mode-icon { transform: translateY(-1px) scale(1.06); }
.mode.active .mode-icon { color: var(--accent-2); --ic-acc: #fff; }
.mode.can .mode-icon { color: #1b1305; --ic-acc: #6b4710; }
.mode small { font-size: 11px; color: var(--accent-2); }
.mode kbd { position: absolute; top: 4px; right: 4px; font-size: 9px; min-width: 14px; line-height: 13px; padding: 0 3px; opacity: 0.7; }
.strength-head { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.strength input { width: 100%; margin: 4px 0 0; padding: 0; }

#log-wrap { position: absolute; right: 0; bottom: 0; width: 330px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
#log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 32vh; overflow: hidden; justify-content: flex-end; }
#log li {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 13px;
  line-height: 1.35; animation: pop 0.2s ease-out; transition: opacity 1s;
}
#log li.fade { opacity: 0.35; }
#log li.danger { border-color: rgba(239, 83, 80, 0.6); }
#log li.good { border-color: rgba(102, 187, 106, 0.55); }
#log li.ally { border-color: rgba(79, 195, 247, 0.55); }
#log li.big { border-color: var(--accent); font-weight: 500; }
#log li.error { color: #ffb4b1; }
#log li.cheat { border-color: rgba(186, 104, 200, 0.7); color: #e1bee7; }
.cheat-toggle .row { display: flex; align-items: center; gap: 6px; color: var(--text); }
#log .who { font-weight: 700; }
#chat { pointer-events: auto; background: var(--panel); font-size: 13px; padding: 8px 10px; }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } }

.corner-btns { display: flex; gap: 6px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel);
  cursor: pointer; font-size: 17px; font-weight: 700;
}
.icon-btn:hover { background: var(--panel-solid); }

.tooltip {
  position: fixed; pointer-events: none; z-index: 20; background: rgba(10, 18, 28, 0.95); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 12px; font-size: 13px; line-height: 1.45; min-width: 190px; max-width: 280px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.tooltip .tt-key { display: inline-block; margin-left: 4px; padding: 0 5px; font-size: 11px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); font-weight: 500; vertical-align: 1px; }
.tooltip .tt-title { font-weight: 700; font-size: 14px; }
.tooltip .tt-row { color: var(--muted); }
.tooltip .tt-row b { color: var(--text); font-weight: 500; }
.tooltip .tt-cost { margin-top: 4px; padding-top: 5px; border-top: 1px solid var(--border); }
.tooltip .tt-action { margin-top: 5px; font-weight: 500; }
.tooltip .ok { color: var(--good); }
.tooltip .bad { color: #ff8a80; }
.tooltip .warnc { color: var(--accent-2); }
#diplo .warnc, .ally-note.warnc { color: var(--danger); }

/* ------------------------------------------------------------ modály */
.modal {
  position: fixed; inset: 0; z-index: 30; background: rgba(5, 10, 18, 0.7); display: flex; align-items: center;
  justify-content: center; padding: 16px;
}
.modal-card { position: relative; max-height: 92vh; overflow-y: auto; }
.close {
  position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 28px; color: var(--muted); cursor: pointer;
}
.help {
  max-width: 940px; width: 100%; height: min(640px, 90vh); padding: 0; overflow: hidden;
  display: grid; grid-template-columns: 210px 1fr;
}
.help-nav {
  display: flex; flex-direction: column; gap: 2px; padding: 22px 12px; overflow-y: auto;
  background: rgba(0, 0, 0, 0.18); border-right: 1px solid var(--border);
}
.help-nav h2 { margin: 0 8px 14px; font-size: 18px; }
.help-nav button {
  display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 12px; border-radius: 10px;
  background: none; border: none; cursor: pointer; font-size: 14px; color: var(--muted); transition: background 0.15s, color 0.15s;
}
.help-nav button span { width: 22px; display: flex; justify-content: center; }
.help-nav button span svg { width: 19px; height: 19px; --ic-acc: var(--accent-2); }
.help-nav button.active span svg { --ic-acc: #fff; }
.help-nav button:hover { background: rgba(255, 255, 255, 0.07); color: var(--text); }
.help-nav button.active { background: rgba(229, 161, 58, 0.16); color: var(--accent-2); font-weight: 600; }
.help-body { padding: 24px 40px 24px 28px; overflow-y: auto; min-width: 0; }
.help-body section[hidden] { display: none; }
.help h3 { margin: 0 0 12px; font-size: 20px; }
.h-icon { width: 24px; height: 24px; margin-right: 10px; vertical-align: -4px; color: var(--accent-2); --ic-acc: #fff; }
.help section > h3:not(:first-child) { margin-top: 24px; }
.help h4 { margin: 18px 0 6px; font-size: 14px; color: var(--accent-2); }
.help h4 .ri { margin-right: 6px; color: var(--accent-2); --ic-acc: #fff; }
.help kbd + .ri, .help td > .ri { color: var(--muted); }
.help p, .help li { font-size: 14px; line-height: 1.55; color: #c9d6e3; }
.help p { margin: 8px 0; }
.callout {
  margin: 12px 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; line-height: 1.5; color: #dbe5ef;
  background: rgba(255, 255, 255, 0.05); border-left: 3px solid var(--accent);
}
.callout.tip { border-left-color: var(--good); background: rgba(102, 187, 106, 0.09); }
.callout.warn { border-left-color: var(--danger); background: rgba(239, 83, 80, 0.09); }
.steps { margin: 10px 0; padding: 0; list-style: none; counter-reset: st; display: flex; flex-direction: column; gap: 8px; }
.steps li { counter-increment: st; position: relative; padding-left: 36px; min-height: 26px; }
.steps li::before {
  content: counter(st); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #1b1305; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.cards2, .cards3 { display: grid; gap: 10px; margin: 12px 0; }
.cards2 { grid-template-columns: 1fr 1fr; }
.cards3 { grid-template-columns: repeat(3, 1fr); }
.mini { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); font-size: 13px; line-height: 1.45; color: #c9d6e3; }
.mini b { font-size: 14px; color: var(--text); }
.legend { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; font-size: 14px; color: #c9d6e3; }
.legend i { display: inline-block; width: 28px; height: 10px; border-radius: 5px; margin-right: 10px; vertical-align: middle; }
table.keys { width: 100%; border-collapse: collapse; }
table.keys td { padding: 8px 6px; border-bottom: 1px solid var(--border); font-size: 14px; color: #c9d6e3; vertical-align: top; }
table.keys td:first-child { white-space: nowrap; width: 1%; padding-right: 20px; }
table.keys kbd { margin-right: 3px; }
.plain { padding-left: 18px; margin: 6px 0; }
.terrain-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.terrain-table td { padding: 4px 6px; border-bottom: 1px solid var(--border); }
.terrain-table .sw { width: 16px; height: 16px; border-radius: 4px; display: inline-block; vertical-align: -3px; }

.game-menu { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; text-align: center; }
.game-menu h2 { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.game-menu h2 svg { width: 24px; height: 24px; color: var(--accent-2); }
.game-menu .btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.game-menu .btn svg { width: 18px; height: 18px; flex: none; }
.game-menu p { margin: 0 0 6px; }
.gfx { width: 100%; max-width: 580px; display: flex; flex-direction: column; gap: 12px; }
.gfx-head { display: flex; align-items: center; gap: 14px; padding-right: 28px; margin-bottom: 4px; }
.gfx-head h2 { margin: 0 0 2px; }
.gfx-head p { margin: 0; }
.gfx-head-icon {
  --icon-bg: var(--panel-solid); flex: 0 0 auto; width: 40px; height: 40px; padding: 8px; border-radius: 12px;
  color: var(--accent-2); background: rgba(229, 161, 58, 0.12); border: 1px solid rgba(229, 161, 58, 0.3);
}
.gfx-sec-title {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.gfx-badge {
  padding: 1px 7px; border-radius: 6px; font-size: 10px; letter-spacing: 0.05em;
  color: var(--accent-2); background: rgba(229, 161, 58, 0.12); border: 1px solid rgba(229, 161, 58, 0.35);
}
.gfx-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gfx-presets button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 12px; text-align: left;
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.04); cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.gfx-presets button:hover { background: rgba(255, 255, 255, 0.08); }
.gfx-presets b { font-size: 15px; }
.gfx-presets span { font-size: 12px; color: var(--muted); }
.gfx-presets button.on { border-color: var(--accent); background: rgba(229, 161, 58, 0.12); box-shadow: 0 0 0 1px var(--accent) inset; }
.gfx-presets button.on b { color: var(--accent-2); }
.gfx-bars { width: 24px; height: 22px; margin-bottom: 6px; fill: var(--muted); }
.gfx-bars .off { fill: rgba(255, 255, 255, 0.12); }
.gfx-presets button.on .gfx-bars rect:not(.off) { fill: var(--accent); }
.gfx-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; background: rgba(0, 0, 0, 0.15); }
.gfx-row { display: grid; grid-template-columns: 1fr 230px; align-items: center; gap: 16px; padding: 12px 14px; }
.gfx-row + .gfx-row { border-top: 1px solid var(--border); }
.gfx-desc { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gfx-label { font-size: 14px; font-weight: 500; }
.gfx-hint { font-size: 12px; color: var(--muted); line-height: 1.4; }
.gfx-hint:empty { display: none; }
.gfx-hint.warn { color: var(--accent-2); }
.gfx-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--border); }
.gfx-foot .btn { min-width: 120px; }
.gfx-auto { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; user-select: none; }
@media (max-width: 560px) {
  .gfx-row { grid-template-columns: 1fr; gap: 8px; }
  .gfx-presets button { padding: 10px; }
  .gfx-presets span { display: none; }
  .gfx-foot { flex-direction: column; align-items: stretch; }
}
.seg { display: flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.seg button {
  flex: 1; padding: 8px 6px; background: rgba(255, 255, 255, 0.04); border: none; color: var(--text); font: inherit; font-size: 13px;
  cursor: pointer;
}
.seg button + button { border-left: 1px solid var(--border); }
.seg button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
.seg button.on { background: var(--accent); color: #1b1305; font-weight: 700; }
.seg button:disabled { opacity: 0.4; cursor: not-allowed; }
.menu-links { display: flex; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.menu-links .sub-btn { flex: 1; }
/* Vedlejší tlačítka (nápověda, grafika): tlumená, s ikonou, při najetí zlatá */
.sub-btn {
  --icon-bg: var(--panel-solid);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03);
  color: var(--muted); font-size: 14px; font-weight: 500;
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.05s;
}
.sub-btn svg { width: 18px; height: 18px; flex: 0 0 auto; transition: transform 0.25s; }
.sub-btn:hover { color: var(--accent-2); background: rgba(229, 161, 58, 0.08); border-color: rgba(229, 161, 58, 0.35); }
.sub-btn:hover svg { transform: rotate(-12deg) scale(1.1); }
.sub-btn:active { transform: translateY(1px); }
.sub-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Opuštění hry na desktopu: tlačítko se musí podržet, červená výplň ukazuje průběh */
#gm-leave { position: relative; overflow: hidden; isolation: isolate; user-select: none; -webkit-user-select: none; }
#gm-leave::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(214, 48, 49, 0.6);
  transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease-out;
}
#gm-leave.holding { color: #fff; }
#gm-leave.holding::before { transform: scaleX(1); transition: transform var(--hold, 1.5s) linear; }
#gm-note:empty { display: none; }
.gm-confirm { border-top: 1px solid var(--border); padding-top: 10px; }
.gm-confirm p { margin: 0 0 10px; }
.gm-confirm .row { display: flex; gap: 8px; }
.gm-confirm .btn { flex: 1; }

.over { max-width: 720px; width: 100%; text-align: center; }
.over-chart-head { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.chart-tabs { display: flex; gap: 2px; background: rgba(255, 255, 255, 0.06); border-radius: 8px; padding: 2px; }
.chart-tabs button { border: 0; background: none; padding: 4px 10px; border-radius: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
.chart-tabs button.active { background: rgba(255, 255, 255, 0.12); color: var(--text); }
.over-chart { position: relative; margin-top: 6px; }
.over-chart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: none; }
.over-chart .grid line { stroke: var(--border); }
.over-chart .axis text, .over-chart .end text { fill: var(--muted); font-size: 11px; }
.over-chart .end text.me { fill: var(--text); font-weight: 600; }
.over-chart .halo { fill: none; stroke: var(--panel-solid); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.over-chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.over-chart .line.me { stroke-width: 3; }
.over-chart.focus g:not(.hot) > .line, .over-chart.focus .dead:not(.hot) { opacity: 0.18; }
.over-chart .cross { stroke: var(--muted); stroke-dasharray: 3 3; }
.over-chart .dead circle { fill: var(--panel-solid); stroke-width: 2; }
.over-chart .dead path { stroke: var(--text); stroke-width: 1.5; stroke-linecap: round; }
.over-chart .hov circle { stroke: var(--panel-solid); stroke-width: 2; }
.chart-tip {
  position: absolute; top: 0; pointer-events: none; text-align: left; font-size: 12px; white-space: nowrap;
  background: var(--panel-solid); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.chart-tip .tt-h { color: var(--muted); margin-bottom: 3px; }
.chart-tip div span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.chart-tip b { float: right; margin-left: 14px; font-variant-numeric: tabular-nums; }
.over-table tr[data-p] { cursor: default; }
.over-title { font-size: 30px; font-weight: 800; }
.over-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
.over-table th { color: var(--muted); font-weight: 500; font-size: 12px; text-align: right; padding: 6px; }
.over-table td { padding: 7px 6px; border-top: 1px solid var(--border); text-align: right; }
.over-table td:first-child, .over-table th:first-child { text-align: left; }
.over-table tr.win td { color: var(--accent-2); font-weight: 700; }

#toasts { position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 40; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast {
  background: rgba(10, 18, 28, 0.95); border: 1px solid var(--border); border-radius: 10px; padding: 9px 16px;
  font-size: 14px; animation: pop 0.2s ease-out; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}
.toast.error { border-color: rgba(239, 83, 80, 0.7); color: #ffcdd2; }
.toast.danger { border-color: rgba(239, 83, 80, 0.7); }
.toast.ally { border-color: rgba(79, 195, 247, 0.7); }
.toast.good { border-color: rgba(102, 187, 106, 0.7); }

/* ------------------------------------------------------------ menší obrazovky */
@media (max-width: 1250px) {
  #log-wrap { width: 260px; }
  #log { max-height: 20vh; }
  .stat { min-width: 98px; padding: 4px 8px; }
  #st-troops, #st-gold { min-width: 124px; }
}
@media (max-width: 1020px) {
  #economy { top: 80px; width: 210px; border-top: 1px solid var(--border); border-radius: 0 var(--radius) var(--radius) 0; }
  #log-wrap { display: none; }
  #side { top: 80px; width: 230px; border-top: 1px solid var(--border); border-radius: var(--radius) 0 0 var(--radius); max-height: calc(100vh - 280px); }
  #topbar { left: 0; right: 0; transform: none; overflow-x: auto; border-radius: 0; border-left: none; border-right: none; }
  .help { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 92vh; }
  .help-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 12px; border-right: none; border-bottom: 1px solid var(--border); }
  .help-nav h2 { display: none; }
  .help-nav button { white-space: nowrap; flex-shrink: 0; padding: 8px 10px; }
  .help-body { padding: 18px 18px 24px; }
  .cards2, .cards3 { grid-template-columns: 1fr; }
  /* v jednom sloupci se lobby do výšky nevejde, posouvá se celá obrazovka */
  .lobby-card { max-height: none; }
  .lobby-grid { grid-template-columns: 1fr; grid-template-rows: none; }
}
@media (max-width: 700px) {
  #economy, #minimap-wrap { display: none; }
  #actionbar { left: 0; right: 0; transform: none; grid-template-columns: 1fr; bottom: 0; border-radius: 0; border-left: none; border-right: none; }
  .mode { min-width: 0; flex: 1; }
  #side { width: 190px; font-size: 12px; }
  .settings { grid-template-columns: 1fr; }
  .room-code { font-size: 32px; }
}
.ri { width: 1.2em; height: 1.2em; flex: none; vertical-align: -0.24em; color: var(--text); --ic-acc: var(--accent-2); }
.ri-troops { --ic-acc: var(--troops); }
.ri-gold { color: var(--accent-2); --ic-acc: var(--accent); }
.ri-def { --ic-acc: var(--def); }
.ri-land { --ic-acc: var(--land); }
.ri-time { --ic-acc: #e5484d; }
.ri-pers { color: var(--muted); --ic-acc: var(--accent-2); }
/* Ikony místo emoji ve zprávách, tlačítkách a panelech (ic() / emo() v main.js) */
.ei { color: inherit; --ic-acc: var(--accent-2); }
.ei-h-crown, .ei-r-gold, .ei-e-trophy { color: var(--accent-2); --ic-acc: var(--accent); }
.ei-r-troops { color: var(--troops-2); --ic-acc: var(--troops); }
.ei-e-clash { color: #ff8a65; --ic-acc: #ffd36b; }
.ei-h-dagger, .ei-e-warn { --ic-acc: var(--danger); }
.ei-d-hard { color: var(--muted); --ic-acc: var(--muted); }
.ei-i-flask { color: #ce93d8; --ic-acc: #ba68c8; }
.btn.primary .ei { --ic-acc: currentColor; }
.ally-icon .ei { width: 32px; height: 32px; color: #fff; --ic-acc: var(--pc); }
.qd-focus .ei { width: 22px; height: 22px; vertical-align: middle; }
.aa-ic .ei { display: block; width: 22px; height: 22px; color: #fff; --ic-acc: #ff5a4f; }
.tag.host .ri { width: 1.15em; height: 1.15em; vertical-align: -0.25em; color: var(--accent-2); --ic-acc: var(--accent); }
.callout.warn b .ri { color: inherit; --ic-acc: currentColor; }
.mode.can .ri-gold { color: #3a2808; --ic-acc: #6b4710; }
.stat-label .ri { width: 14px; height: 14px; margin-right: 2px; vertical-align: -3px; }

/* Pilulky s hodnotou vojáků / zlata (tooltipy, panely, nápověda) */
.chip {
  display: inline-flex; align-items: center; gap: 3px; padding: 0 6px 0 4px; border-radius: 999px; border: 1px solid;
  font-weight: 600; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; vertical-align: 0.05em;
}
.chip .ri { width: 1.1em; height: 1.1em; vertical-align: 0; }
.chip-troops { background: rgba(108, 194, 74, 0.16); border-color: rgba(108, 194, 74, 0.5); color: var(--troops-2); }
.chip-troops .ri { color: var(--troops-2); --ic-acc: var(--troops); }
.chip-gold { background: rgba(243, 194, 107, 0.15); border-color: rgba(243, 194, 107, 0.5); color: var(--accent-2); }
.chip-gold .ri { color: var(--accent-2); --ic-acc: var(--accent); }
.mode .chip { font-size: 11px; padding: 0 5px 0 3px; }
.mode.can .chip-gold { background: rgba(27, 19, 5, 0.14); border-color: rgba(27, 19, 5, 0.3); color: #3a2808; }
.mode.can .chip-gold .ri { color: #3a2808; --ic-acc: #6b4710; }
.leaderboard .num .chip { font-size: 11px; font-weight: 500; padding: 0 5px 0 3px; margin-left: 2px; }
.split-sub .chip { font-size: 11.5px; }
.split[data-key=army] input[type='range'] { accent-color: var(--troops); }
.split[data-key=eco] input[type='range'] { accent-color: var(--accent-2); }
.btn.res-troops { background: rgba(108, 194, 74, 0.16); border-color: rgba(108, 194, 74, 0.5); color: var(--troops-2); }
.btn.res-troops:hover { background: rgba(108, 194, 74, 0.26); }
.btn.res-troops .ri { color: var(--troops-2); --ic-acc: var(--troops); }
.btn.res-gold { background: rgba(243, 194, 107, 0.15); border-color: rgba(243, 194, 107, 0.5); color: var(--accent-2); }
.btn.res-gold:hover { background: rgba(243, 194, 107, 0.25); }
.dt.troops { background: rgba(108, 194, 74, 0.14); box-shadow: inset 0 0 0 1px rgba(108, 194, 74, 0.4); }
.dt.troops span { color: var(--troops-2); display: flex; align-items: center; gap: 3px; }
.dt.troops span .ri { width: 12px; height: 12px; color: var(--troops-2); --ic-acc: var(--troops); }
.dt.troops b { color: var(--troops-2); }
.mini.res-troops { background: rgba(108, 194, 74, 0.1); border-color: rgba(108, 194, 74, 0.4); }
.mini.res-troops b { color: var(--troops-2); }
.mini.res-troops .ri { color: var(--troops-2); --ic-acc: var(--troops); }
.mini.res-gold { background: rgba(243, 194, 107, 0.1); border-color: rgba(243, 194, 107, 0.4); }
.mini.res-gold b { color: var(--accent-2); }

.chip-def { background: rgba(74, 144, 226, 0.16); border-color: rgba(74, 144, 226, 0.55); color: var(--def-2); }
.chip-def .ri { color: var(--def-2); --ic-acc: var(--def); }
.chip-land { background: rgba(239, 125, 60, 0.16); border-color: rgba(239, 125, 60, 0.55); color: var(--land-2); }
.chip-land .ri { color: var(--land-2); --ic-acc: var(--land); }
.split[data-key=def] input[type='range'] { accent-color: var(--def); }
.dt.def { background: rgba(74, 144, 226, 0.14); box-shadow: inset 0 0 0 1px rgba(74, 144, 226, 0.45); }
.dt.land { background: rgba(239, 125, 60, 0.14); box-shadow: inset 0 0 0 1px rgba(239, 125, 60, 0.45); }
.dt.def span, .dt.land span { display: flex; align-items: center; gap: 3px; }
.dt.def span, .dt.def b { color: var(--def-2); }
.dt.land span, .dt.land b { color: var(--land-2); }
.dt.def span .ri { width: 12px; height: 12px; color: var(--def-2); --ic-acc: var(--def); }
.dt.land span .ri { width: 12px; height: 12px; color: var(--land-2); --ic-acc: var(--land); }
.mini.res-def { background: rgba(74, 144, 226, 0.1); border-color: rgba(74, 144, 226, 0.45); }
.mini.res-def b { color: var(--def-2); }
.mini.res-def .ri { color: var(--def-2); --ic-acc: var(--def); }

/* Vlastní ikony budov a míst v textu (map-icons.js) */
.mi { width: 1.3em; height: 1.3em; vertical-align: -0.3em; }