/* Ekran startowy i menu pauzy */
#menu { position: fixed; inset: 0; z-index: 300; background: #0c0e0a; color: #d2ccb0; font-family: Bahnschrift, 'DIN Alternate', 'Segoe UI', sans-serif; transition: opacity .5s; }
#menu.out { opacity: 0; pointer-events: none; }
.mn-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mn-col { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 7vh; gap: 20px; }
#menu h1 { margin: 0; font: 800 clamp(48px, 9vw, 108px)/1 Bahnschrift, 'DIN Alternate', sans-serif; letter-spacing: .22em; text-indent: .22em; color: #e6e0c4; text-shadow: 0 0 30px rgba(0,0,0,.9), 0 4px 0 #14160f; animation: mnTitle 1.1s cubic-bezier(.2,1,.3,1) both; }
#menu h1 span { color: #c9402e; text-shadow: 0 0 26px rgba(220,50,30,.45), 0 4px 0 #14160f; }
@keyframes mnTitle { from { opacity: 0; letter-spacing: .6em; filter: blur(8px); } to { opacity: 1; filter: none; } }
.mn-form { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 2vh; }
.mn-form label { display: flex; flex-direction: column; gap: 5px; }
.mn-form label span { font: 700 11px Bahnschrift, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: #8e8a72; }
.mn-form input { width: 220px; padding: 10px 12px; font: 700 17px Bahnschrift, sans-serif; letter-spacing: .06em; color: #f0ead0; background: rgba(20,23,15,.82); border: 1px solid #5a5746; outline: none; }
.mn-form input:focus { border-color: #e6e0c4; box-shadow: 0 0 14px rgba(230,224,196,.25); }
.mn-cam{display:flex;gap:7px;align-items:center;justify-content:center;margin:8px 0 4px;font-size:12px;letter-spacing:.06em;color:#b9bda9}
.mn-cam button{width:24px;height:24px;border:2px solid #1d2019;cursor:pointer;border-radius:3px;padding:0}
.mn-cam button.on{outline:2px solid #e6d27a;outline-offset:1px}
.mn-btns { display: flex; gap: 14px; }
.mn-btn { min-width: 190px; padding: 13px 26px; font: 800 16px Bahnschrift, sans-serif; letter-spacing: .26em; text-transform: uppercase; color: #e6e0c4; background: rgba(40,44,32,.88); border: 1px solid #6a674f; cursor: pointer; transition: background .12s, border-color .12s, transform .12s; }
.mn-btn:hover { background: #47543c; border-color: #e6e0c4; transform: translateY(-2px); }
.mn-btn.main { background: linear-gradient(#5a2a22, #3c1d18); border-color: #c9402e; box-shadow: 0 0 18px rgba(200,60,40,.3); }
.mn-btn.main:hover { background: linear-gradient(#7a362b, #4c241d); border-color: #ff8a70; }
.ctl { display: flex; align-items: center; gap: 12px; font-size: 13px; letter-spacing: .04em; }
.ctl-k { flex: none; width: 150px; display: flex; gap: 2px; justify-content: flex-end; flex-wrap: wrap; } .ctl-k .kbd { margin: 0 1px; }
.ctl-d { color: #9a967e; }
.ctl-g { display: flex; flex-direction: column; gap: 6px; min-width: 0; }                 /* grupa sterowania: Ruch i walka / Drużyna / Pociąg / Okna */
.ctl-h { margin: 4px 0 2px; font: 700 11px Bahnschrift, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #8a8466; }
.mn-foot { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #5f5d4c; }

#pause { position: fixed; inset: 0; z-index: 250; display: none; align-items: center; justify-content: center; background: rgba(8,10,6,.62); backdrop-filter: blur(2px); font-family: Bahnschrift, sans-serif; }
#pause.on { display: flex; }
.ps-box { display: flex; flex-direction: column; gap: 10px; align-items: stretch; padding: 24px 30px 28px; background: rgba(22,25,17,.97); border: 1px solid #5a5746; box-shadow: 0 10px 40px rgba(0,0,0,.6); animation: bnIn .25s cubic-bezier(.2,1.2,.4,1) both; }
.ps-box h2 { margin: 0 0 8px; text-align: center; font: 800 22px Bahnschrift, sans-serif; letter-spacing: .34em; text-indent: .34em; text-transform: uppercase; color: #e6e0c4; }
.ps-box .mn-btn { min-width: 260px; }

/* niskie okno (1366×768): lista sterowania w dwóch kolumnach, a pudełko pauzy w razie czego przewija się, zamiast wychodzić poza ekran */
.ps-box { max-height: calc(100vh - 16px); overflow-y: auto; box-sizing: border-box; }
@media (max-height: 740px) { .mn-foot { display: none; } }                /* 1280×720: stopka nachodziła na listę sterowania */

/* przełącznik języka (PL / EN): prawy górny róg ekranu startowego */
.mn-lang { position: absolute; top: 16px; right: 18px; display: flex; gap: 0; z-index: 2; }
.mn-lang button { padding: 7px 14px; font: 800 13px Bahnschrift, sans-serif; letter-spacing: .2em; text-indent: .2em; color: #8e8a72; background: rgba(20,23,15,.8); border: 1px solid #5a5746; cursor: pointer; }
.mn-lang button + button { border-left: 0; }
.mn-lang button:hover { color: #e6e0c4; border-color: #e6e0c4; }
.mn-lang button.on { color: #14160f; background: #e6e0c4; border-color: #e6e0c4; cursor: default; }

/* polskie opisy sterowania są dłuższe: szersze kolumny i węższa kolumna klawiszy, żeby wiersze nie łamały się na dwie linie */
html[lang="pl"] .ctl-k { width: 118px; }

/* ---- MENU1: okno Sterowania nad pauzą (lista z ui/help.js, przewijana w środku; X / Esc / Wstecz zamykają) ---- */
#ctlwin { position: fixed; inset: 0; z-index: 262; display: none; align-items: center; justify-content: center; padding: 12px; background: rgba(8,10,6,.7); font-family: Bahnschrift, 'DIN Alternate', 'Segoe UI', sans-serif; color: #d2ccb0; }
#ctlwin.on { display: flex; }
#ctlwin .cw-box { position: relative; box-sizing: border-box; width: min(760px, 100%); max-height: calc(100vh - 24px); display: flex; flex-direction: column; gap: 12px; padding: 20px 24px 18px; background: rgba(22,25,17,.97); border: 1px solid #5a5746; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
#ctlwin .win-x { top: 10px; right: 10px; }
#ctlwin h2 { margin: 0; text-align: center; font: 800 20px Bahnschrift, sans-serif; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: #e6e0c4; }
#ctlwin .cw-scroll { display: grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: 10px 28px; min-height: 0; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #5a5746 transparent; }
#ctlwin .cw-back { align-self: center; min-width: 200px; }
@media (max-width: 720px) { #ctlwin .cw-scroll { grid-template-columns: 1fr; } }