/* Powiat Dwunastu: nocna mapa w pikselach obok jasnej tablicy pokoju (lib/tablica.css). Ostre ramki, bez gradientów. */
.strona { max-width: 1240px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left)); }
.uklad { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .uklad { grid-template-columns: minmax(0, 1fr); } }
.kolumna-mapa, .kolumna-panel { min-width: 0; }
.tryby { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tryby .pa-btn { margin: 0; }

.plik { font: 12px var(--mono); color: var(--szary); margin-bottom: 6px; overflow-wrap: anywhere; }
.scena { position: relative; background: #0a0c1e; border: 2px solid var(--tusz); display: flex; justify-content: center; align-items: center; min-height: 260px; overflow: hidden; }
.scena canvas { display: block; background: #0a0c1e !important; image-rendering: pixelated; max-width: 100%; transform-origin: 50% 50%; will-change: transform;
  /* bez przybliżenia pionowy ruch palcem przewija stronę, a dotknięcie i dwa palce obsługuje gra; po przybliżeniu palec przesuwa mapę */
  touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.scena.przyblizona canvas { touch-action: none; cursor: grab; }
.zoom { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 4px; }
.zoom-btn { min-width: 44px; min-height: 44px; border: 2px solid #e8ecff; background: #0a0c1e; color: #e8ecff; font: 700 18px var(--mono); cursor: pointer; padding: 0 8px; touch-action: manipulation; }
.zoom-btn:active { background: #e8ecff; color: #0a0c1e; }
.zoom-btn:focus-visible { outline: 3px solid #ffd60a; outline-offset: 1px; }
.scena canvas:focus-visible { outline: 2px solid #ffd60a; outline-offset: -2px; }
.hud { position: absolute; top: 6px; left: 6px; right: 6px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; pointer-events: none;
  font-family: var(--piksel); font-size: 10px; color: #e8ecff; }
.hud > span { background: #0a0c1e; border: 1px solid #3a3f74; padding: 2px 5px; }
.iskry { display: inline-flex; gap: 2px; align-items: center; }
.iskry canvas { width: 10px; height: 14px; image-rendering: pixelated; background: transparent !important; }
.nakladka { position: absolute; inset: 0; background: #0a0c1e; color: #e8ecff; padding: 16px; overflow: auto; display: flex; flex-direction: column; gap: 8px; justify-content: flex-start; }
.scena:has(.nakladka:not([hidden])) { min-height: 600px; }
.nakladka[hidden] { display: none; }
.nakladka h2 { color: #fff; margin: 0; }
.nakladka p { margin: 0; max-width: 60ch; }
.nakladka .role { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.nakladka .role button { text-align: left; white-space: normal; line-height: 1.35; margin: 0; height: auto; min-height: 44px; padding: 8px 10px; }
.nakladka .role button small { display: block; font: 12px/1.35 system-ui, sans-serif; text-transform: none; letter-spacing: 0; }
.nakladka input { font: 16px var(--mono); padding: 8px; min-height: 44px; border: 2px solid #e8ecff; background: #12153a; color: #fff; max-width: 280px; box-sizing: border-box; }
.pole-info { margin: 6px 0; font: 13px/1.4 var(--mono); min-height: 2.8em; }
.pasek-przyciskow { display: flex; flex-wrap: wrap; gap: 8px; }
.pasek-przyciskow .pa-btn, .akcje .pa-btn { margin: 0; }

.dziennik { font: 13px/1.5 var(--mono); max-height: 320px; overflow: auto; overflow-wrap: anywhere; }
.dziennik p { margin: 0; color: var(--grin); }
.dziennik p::before { content: ">"; }
.dziennik h3 { font-size: 10px; margin: 8px 0 2px; color: var(--zielen); }

.siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 4px 12px; font: 13px/1.5 var(--mono); }
.siatka b { color: var(--temat); }
.pasek-hp { display: inline-block; vertical-align: middle; width: 80px; height: 8px; border: 1px solid var(--tusz); background: #fff; }
.pasek-hp > i { display: block; height: 100%; background: var(--rdza); }
.akcje { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.akcje select, .akcje input { font: 16px var(--mono); padding: 6px 8px; min-height: 44px; max-width: 100%; box-sizing: border-box; }
.akcje input[type="number"] { width: 72px; }
.kolejka { list-style: none; padding: 0; margin: 6px 0; font: 13px/1.5 var(--mono); }
.kolejka li { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px dashed var(--linia); padding: 3px 0; }
.kolejka li button { font: 14px var(--mono); border: 2px solid var(--tusz); background: #fff; cursor: pointer; min-height: 44px; min-width: 44px; padding: 0 10px; }
.koszt-info { font: 13px var(--mono); }
.koszt-info.za-duzo { color: var(--rdza); font-weight: 700; }
.grupa { border-top: 1px dashed var(--linia); padding-top: 6px; margin-top: 6px; }
.grupa > b { font: 700 12px var(--mono); color: var(--zielen); display: block; }

.tabela { width: 100%; border-collapse: collapse; font: 13px/1.5 var(--mono); }
.tabela th, .tabela td { text-align: left; padding: 3px 4px; border-bottom: 1px solid var(--linia); }
.tabela td:last-child, .tabela th:last-child { text-align: right; }
.tabela tr.upadl { color: var(--szary); text-decoration: line-through; }
.tabela tr.wygral { background: #fff6c8; }
.kolor { display: inline-block; width: 10px; height: 10px; border: 1px solid var(--tusz); margin-right: 4px; vertical-align: -1px; }
.mem { border: 2px dashed var(--tusz); background: #fff; padding: 6px 8px; margin: 6px 0; display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.mem canvas { width: 64px; height: 48px; image-rendering: pixelated; border: 1px solid var(--tusz); }
.mem p { margin: 0; font: 13px/1.4 var(--mono); flex: 1 1 160px; }
.wezel-pasek { display: flex; gap: 2px; margin: 4px 0; }
.wezel-pasek i { width: 18px; height: 10px; border: 1px solid var(--tusz); background: #fff; }
.wezel-pasek i.jest { background: #5aa8ff; }
.uwaga { font: 13px var(--mono); color: var(--rdza); }

/* dolny panel na telefonie: iskry, liczba rozkazów i wysłanie bez zasłaniania mapy (strona dostaje odstęp na jego wysokość) */
.dolny-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #0a0c1e; color: #e8ecff; border-top: 2px solid #e8ecff;
  padding: 6px max(10px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); font: 13px/1.4 var(--mono); }
.dolny-panel[hidden] { display: none; }
.dolny-panel .rzad { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dolny-panel .iskry canvas { width: 12px; height: 17px; }
.dolny-panel .licznik { flex: 1 1 auto; min-width: 0; }
.dolny-panel .pa-btn { margin: 0; padding: 8px 12px; font-size: 14px !important; border-color: #e8ecff; }
.dolny-panel .pa-btn.jasny { background: #0a0c1e; color: #e8ecff; }
.dolny-panel ol { list-style: none; margin: 6px 0 0; padding: 0; max-height: 34vh; overflow: auto; overscroll-behavior: contain; }
.dolny-panel li { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px dashed #3a3f74; padding: 2px 0; }
.dolny-panel li button { min-height: 44px; min-width: 44px; border: 2px solid #e8ecff; background: #0a0c1e; color: #e8ecff; font: 14px var(--mono); }
.dolny-panel .uwaga { color: #ff9b8a; margin: 4px 0 0; }
body.z-panelem { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (min-width: 901px) { .dolny-panel { display: none !important; } body.z-panelem { padding-bottom: 0; } }
@media (max-width: 900px) {
  .hud { font-size: 11px; }
  .hud .iskry { display: none; } /* iskry są w dolnym panelu */
  .tryby .pa-btn { flex: 1 1 140px; }
  .pasek-przyciskow .pa-btn { flex: 1 1 auto; }
}
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .op .zielony, .op > p:not(.etykieta) { display: none; } /* w poziomie mapa ma pierwszeństwo */
}