:root { --bg: #0d1719; --ink: #e6dcc4; --dim: #a59c84; --rust: #b56a3a; --light: #f0b35e; --panel: rgba(16,14,11,0.9); --edge: rgba(181,106,58,0.45); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; overscroll-behavior: none; }
.em-map { position: fixed; inset: 0; touch-action: none; }
.em-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; outline: none; }
.em-canvas:active { cursor: grabbing; }
.em-top { position: fixed; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px; background: linear-gradient(rgba(8,7,6,0.85), rgba(8,7,6,0)); pointer-events: none; }
.em-brand { display: flex; flex-direction: column; min-width: 0; }
.em-title { font: 700 15px/1.1 "Courier New", ui-monospace, monospace; letter-spacing: 0.22em; color: var(--light); text-shadow: 0 0 10px rgba(240,179,94,0.35); }
.em-sub { font-size: 11px; color: var(--dim); letter-spacing: 0.04em; }
.em-badge { pointer-events: auto; flex: none; font: 700 10px/1 "Courier New", monospace; letter-spacing: 0.08em; color: #1a1209; background: #d9a35a; padding: 5px 7px; border-radius: 3px; }
.em-controls { position: fixed; z-index: 3; right: calc(10px + env(safe-area-inset-right)); top: 64px; display: flex; flex-direction: column; gap: 6px; }
.em-controls button { width: 42px; height: 42px; border-radius: 8px; border: 1px solid var(--edge); background: var(--panel); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.em-controls button:hover { border-color: var(--light); }
.em-controls button[aria-pressed="true"] { background: #6b3d1f; border-color: var(--light); color: #fff1d6; }
.em-status { position: fixed; z-index: 3; left: 12px; bottom: 34px; font: 11px "Courier New", monospace; color: var(--dim); pointer-events: none; text-shadow: 0 1px 2px #000; }
.em-legend, .em-info { position: fixed; z-index: 4; background: var(--panel); border: 1px solid var(--edge); border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,0.5); }
.em-legend { right: 62px; top: 64px; width: min(300px, calc(100vw - 84px)); padding: 10px 14px; max-height: calc(100dvh - 90px); overflow: auto; }
.em-legend h2, .em-info h2 { margin: 0 0 6px; font: 700 13px "Courier New", monospace; letter-spacing: 0.12em; color: var(--light); text-transform: uppercase; }
.em-legend ul { list-style: none; margin: 0; padding: 0; }
.em-legend li { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 12.5px; }
.lg { flex: none; width: 18px; height: 12px; border-radius: 2px; display: inline-block; }
.lg-land { background: #3d3b31; border: 1px solid #7c7562; } .lg-sea { background: #0f1b1c; border: 1px solid #355; }
.lg-ruin { border: 1.5px solid #b07a52; background: linear-gradient(45deg, transparent 45%, #b07a52 45% 55%, transparent 55%); width: 12px; height: 12px; }
.lg-urban { background: rgba(22,19,17,0.9); border: 1px solid rgba(150,84,44,0.8); }
.lg-road { height: 3px; background: repeating-linear-gradient(90deg, #9a5d36 0 6px, transparent 6px 9px); }
.lg-river { height: 2px; background: #547070; } .lg-light { width: 12px; height: 12px; border-radius: 50%; background: #f0b35e; box-shadow: 0 0 8px #f0b35e; }
.lg-cont { background: radial-gradient(rgba(150,170,40,0.8), rgba(120,140,30,0.1)); } .lg-burn { background: radial-gradient(#0a0604, rgba(60,22,10,0.3)); }
.lg-ash { background: radial-gradient(rgba(150,145,135,0.7), rgba(120,115,105,0.1)); }
.lg-mtn { background: repeating-linear-gradient(120deg, #463a2c 0 4px, #8a7558 4px 5px); }
.lg-desert { background: radial-gradient(circle, rgba(190,160,110,0.8) 1px, rgba(120,98,62,0.5) 1px); background-size: 4px 4px; }
.lg-herd { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(rgba(190,70,45,0.9), rgba(190,70,45,0.15)); border: 1px solid #be462d; }
.lg-cloud { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(rgba(170,165,150,0.85), rgba(170,165,150,0.1)); }
.em-info select { background: #2a2017; color: var(--ink); border: 1px solid var(--edge); border-radius: 5px; padding: 3px 6px; font: inherit; }
.lg-radio { height: 4px; background: linear-gradient(90deg, #78e6aa 0 33%, #dc5a46 33% 66%, #e6c85a 66%); }
.em-controls { max-height: calc(100dvh - 120px); overflow-y: auto; }
.lg-spawn { width: 10px; height: 10px; background: rgba(140,220,140,0.75); }
.em-info button.em-act { margin-top: 8px; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--edge); background: #2a2017; color: var(--ink); cursor: pointer; font: inherit; }
.em-note { font-size: 11.5px; color: var(--dim); margin: 8px 0 0; }
.em-info { left: 12px; bottom: 56px; width: min(380px, calc(100vw - 24px)); padding: 12px 14px; max-height: 50dvh; overflow: auto; }
.em-close { position: absolute; top: 4px; right: 6px; width: 32px; height: 32px; background: none; border: 0; color: var(--dim); font-size: 22px; cursor: pointer; }
.em-info table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13px; }
.em-info td { padding: 3px 0; border-bottom: 1px solid rgba(181,106,58,0.18); }
.em-info td:last-child { text-align: right; font-family: "Courier New", monospace; }
.em-info .warn { color: #e0a060; font-size: 11.5px; }
.em-info .dim { color: var(--dim); font-size: 12px; }
@media (max-width: 600px) {
  .em-sub { display: none; }
  .em-controls { top: 56px; }
  .em-controls button { width: 40px; height: 40px; }
  .em-info { left: 8px; right: 8px; width: auto; bottom: 44px; }
  .em-legend { right: 58px; top: 56px; }
}

.lg-precise { background: #7cffb0; border-radius: 50%; }
.em-badge.em-badge-server { background: #2f6f73; color: #e8fbff; }
.em-badge.em-badge-error { background: #8a2f22; color: #fff1e6; }
.lg-cluster { width: 12px; height: 12px; border-radius: 50%; background: #34220f; border: 2px solid #f0b35e; }
.lg-home { width: 10px; height: 10px; border-radius: 50%; background: #ffe2a8; box-shadow: 0 0 0 2px #1a120a, 0 0 0 3px #ffe2a8; }
.lg-night { width: 14px; height: 10px; background: linear-gradient(90deg, rgba(6,10,26,0.1), rgba(6,10,26,0.85)); border: 1px solid #3a3f55; }
.em-clock { display: block; font-size: 11px; color: var(--dim); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; }
/* M1-E3: wyszukiwanie osad i gildie */
.lg-guild { width: 9px; height: 9px; background: #5fb7a6; transform: rotate(45deg); border: 1px solid #1d140b; }
.em-search { width: 100%; box-sizing: border-box; padding: 9px 10px; font: inherit; font-size: 16px; color: #f3e6c8; background: rgba(12,10,8,0.85); border: 1px solid #6b5a3e; border-radius: 6px; }
.em-search:focus { outline: 2px solid #ffd27a; outline-offset: 1px; }
.em-results { list-style: none; margin: 8px 0 0; padding: 0; max-height: 46vh; overflow-y: auto; }
.em-results li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 6px; border-bottom: 1px solid rgba(160,140,100,0.18); cursor: pointer; min-height: 32px; align-items: center; }
.em-results li[aria-selected="true"], .em-results li:hover { background: rgba(255,210,122,0.12); }
.em-results .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-results .meta { flex: none; font-size: 12px; color: var(--dim); }
.em-guild { display: inline-block; width: 8px; height: 8px; transform: rotate(45deg); margin-right: 6px; border: 1px solid #1d140b; }
/* M1-F1: zlecenie budowy — karty zamiast szerokiej tabeli (czytelne na telefonie) */
.em-form { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0; }
.em-form label { display: inline-flex; align-items: center; gap: 6px; }
.em-form select { min-height: 32px; }
.em-cards { list-style: none; margin: 6px 0; padding: 0; }
.em-cards li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(160,140,100,0.16); }
.em-cards li > span:first-child { color: var(--dim); min-width: 0; }
.em-cards li > span:last-child { text-align: right; overflow-wrap: anywhere; }
.em-id { overflow-wrap: anywhere; word-break: break-all; }
.em-info p { overflow-wrap: anywhere; }
.em-form select:disabled { opacity: .6; cursor: not-allowed; }
.em-src { display: inline-block; padding: 0 5px; margin-right: 4px; border-radius: 3px; background: #2f6f73; color: #e8fbff; font-size: 11px; letter-spacing: 0.03em; }
.em-info .ok { color: #9fe0b0; }
/* M1-F2/F3: zlecenia, podgląd, czytelność telefonu i dostępność */
.em-close { position: sticky; top: -12px; float: right; margin: -8px -10px 0 6px; z-index: 1; background: var(--panel); border-radius: 6px; }
.em-info h2 { padding-right: 34px; overflow-wrap: anywhere; }
.em-info h3 { margin: 8px 0 2px; font-size: 13px; color: var(--light); overflow-wrap: anywhere; }
.em-order { border-top: 1px solid var(--edge); padding-top: 4px; margin-top: 6px; }
.em-cards li.cur { color: #ffd27a; font-weight: 600; }
.em-preview { margin: 4px 0; padding: 4px 6px; border: 1px dashed #e6c85a; border-radius: 5px; color: #e6c85a; font-size: 12px; }
.em-preview[hidden] { display: none; }
.em-info button.em-act { min-height: 36px; }
.em-controls button:focus-visible, .em-info button:focus-visible, .em-info select:focus-visible, .em-canvas:focus-visible { outline: 2px solid #ffd27a; outline-offset: 2px; }
.em-help dt { font-family: "Courier New", monospace; color: var(--light); }
.em-help dd { margin: 0 0 4px 0; font-size: 12px; }
@media (max-width: 600px) {
  .em-info { right: 60px; max-height: 58dvh; }               /* przyciski mapy po prawej zostają dostępne */
  .em-info.em-info-top { top: 56px; bottom: auto; max-height: 46dvh; } /* wyszukiwarka nad klawiaturą ekranową */
  .em-cards li { font-size: 13px; }
  .em-form label { flex: 1 1 140px; }
}