/* Menu główne (ui/mainmenu.js): żywe tło, logo i polecenia po lewej, panel światów po prawej */
#mainmenu { position: fixed; inset: 0; z-index: 300; background: #0a0b0a; color: #d8d2b8; font-family: Bahnschrift, 'DIN Alternate', 'Segoe UI', sans-serif; transition: opacity .6s; overflow: hidden; }
#mainmenu.out { opacity: 0; pointer-events: none; }
.mm-bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.mm-bg.on { opacity: 1; }
/* zasłona nad tłem: ciemniej pod logo i poleceniami (lewa strona), winieta, lekkie przygaszenie całości */
.mm-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(6,7,6,.88), rgba(6,7,6,.5) 26%, rgba(6,7,6,0) 52%), radial-gradient(ellipse at 55% 55%, rgba(0,0,0,0) 38%, rgba(0,0,0,.62) 100%), rgba(8,9,10,.14); }

.mm-left { position: absolute; left: clamp(28px, 6vw, 110px); top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; animation: mmIn .9s cubic-bezier(.2,.7,.2,1) both; }
#mainmenu h1 { margin: 0; font: 800 clamp(44px, 6.4vw, 104px)/.95 Bahnschrift, 'DIN Alternate', sans-serif; letter-spacing: .16em; color: #ece6cc; text-shadow: 0 2px 0 #0d0e0b, 0 0 40px rgba(0,0,0,.9); }
#mainmenu h1 span { display: block; color: #d1432f; text-shadow: 0 2px 0 #0d0e0b, 0 0 34px rgba(220,60,36,.45); }
.mm-nav { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.mm-item { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 300px; padding: 11px 22px 11px 20px; background: none; border: 0; border-left: 3px solid transparent; color: #bdb79c; cursor: pointer; text-align: left; transition: color .15s, border-color .15s, background .15s, padding .15s; }
.mm-item b { font: 800 clamp(19px, 2vw, 27px) Bahnschrift, sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.mm-item small { font: 600 12px Bahnschrift, sans-serif; letter-spacing: .1em; color: #8e896f; max-width: 34ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-item small:empty { display: none; }
.mm-item:hover, .mm-item:focus-visible { color: #f4eed6; border-left-color: #d1432f; background: linear-gradient(90deg, rgba(209,67,47,.2), rgba(209,67,47,0)); padding-left: 28px; outline: none; }
.mm-item.main b { color: #f4eed6; }
.mm-item.main small { color: #d8a070; }

.mm-panel { position: absolute; right: clamp(20px, 4vw, 70px); top: 50%; transform: translateY(-50%); width: clamp(330px, 30vw, 440px); max-height: 78vh; display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 16px; box-sizing: border-box; background: rgba(12,13,11,.78); border: 1px solid rgba(214,206,170,.16); box-shadow: 0 18px 60px rgba(0,0,0,.55); backdrop-filter: blur(6px); animation: mmInR .9s .12s cubic-bezier(.2,.7,.2,1) both; }
.mm-panel section { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.mm-panel h2 { margin: 0 0 2px; display: flex; align-items: center; gap: 8px; font: 700 11px Bahnschrift, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #9a9479; }
.mm-dot { width: 7px; height: 7px; border-radius: 50%; background: #6fd08a; box-shadow: 0 0 8px #6fd08a; animation: mmPulse 1.8s infinite; }
.mm-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; max-height: 30vh; padding-right: 2px; }
.mm-row { display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 9px 12px; background: rgba(34,36,28,.72); border: 1px solid rgba(214,206,170,.1); color: #d8d2b8; cursor: pointer; text-align: left; transition: background .12s, border-color .12s; }
.mm-row .nm { font: 800 16px Bahnschrift, sans-serif; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-row .sub { grid-row: 2; grid-column: 1 / 3; font: 600 11.5px Bahnschrift, sans-serif; letter-spacing: .05em; color: #948e74; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-row .pl { font: 700 12px Bahnschrift, sans-serif; letter-spacing: .08em; color: #6fd08a; }
.mm-row .go { grid-row: 1 / 3; grid-column: 3; padding: 7px 12px; font: 800 12px Bahnschrift, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #14150f; background: #d8d2b8; opacity: 0; transform: translateX(6px); transition: opacity .12s, transform .12s; }
.mm-row:hover, .mm-row:focus-visible { background: rgba(58,62,46,.9); border-color: rgba(236,230,204,.6); outline: none; }
.mm-row:hover .go, .mm-row:focus-visible .go { opacity: 1; transform: none; }
.mm-row.full { cursor: default; opacity: .55; } .mm-row.full .go { display: none; } .mm-row.full .pl { color: #d0704a; }
.mm-rw { display: flex; gap: 4px; align-items: stretch; } .mm-rw .mm-row { flex: 1; min-width: 0; }
.mm-del { flex: none; min-width: 30px; padding: 0 8px; font: 800 11px Bahnschrift, sans-serif; letter-spacing: .1em; color: #8a856c; background: rgba(34,36,28,.5); border: 1px solid rgba(214,206,170,.1); cursor: pointer; opacity: .55; transition: opacity .12s, color .12s, border-color .12s; }
.mm-rw:hover .mm-del, .mm-del.sure { opacity: 1; } .mm-del:hover, .mm-del.sure { color: #ffb09c; border-color: #d1432f; background: rgba(90,32,24,.7); }
.mm-empty { padding: 10px 2px; font: 600 12.5px Bahnschrift, sans-serif; letter-spacing: .04em; color: #7d7862; }
.mm-create { display: none; gap: 6px; width: 370px; box-sizing: border-box; margin: 0 0 8px; padding: 2px 0 2px 23px; border-left: 3px solid #d1432f; animation: mmDrop .18s ease-out both; }
.mm-create.on { display: flex; }
.mm-item.open { color: #f4eed6; border-left-color: #d1432f; padding-left: 28px; }
.mm-create input, .mm-call input, .mm-gbox input { flex: 1; min-width: 0; padding: 9px 11px; font: 700 15px Bahnschrift, sans-serif; letter-spacing: .06em; color: #f0ead0; background: rgba(8,9,7,.7); border: 1px solid rgba(214,206,170,.22); outline: none; }
.mm-create input:focus, .mm-call input:focus, .mm-gbox input:focus { border-color: #ece6cc; box-shadow: 0 0 14px rgba(236,230,204,.2); }
.mm-create input.nudge, .mm-gbox input.nudge { animation: mmNudge .5s; }
.mm-go { padding: 9px 16px; font: 800 13px Bahnschrift, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #f4eed6; background: linear-gradient(#6a2c22, #48201a); border: 1px solid #d1432f; cursor: pointer; }
.mm-go:hover { background: linear-gradient(#853629, #5a261e); border-color: #ff8a70; }

.mm-top { position: absolute; top: 16px; right: clamp(20px, 4vw, 70px); display: flex; align-items: center; gap: 14px; z-index: 2; }
.mm-call { display: flex; align-items: center; gap: 10px; }
.mm-call span { font: 700 11px Bahnschrift, sans-serif; letter-spacing: .26em; text-transform: uppercase; color: #a39d84; }
.mm-call input { width: 170px; flex: none; }
.mm-lang { display: flex; }
.mm-lang button { padding: 8px 13px; font: 800 12px Bahnschrift, sans-serif; letter-spacing: .2em; text-indent: .2em; color: #a39d84; background: rgba(8,9,7,.7); border: 1px solid rgba(214,206,170,.22); cursor: pointer; }
.mm-lang button + button { border-left: 0; }
.mm-lang button:hover { color: #ece6cc; }
.mm-lang button.on { color: #14150f; background: #d8d2b8; border-color: #d8d2b8; cursor: default; }
.mm-foot { position: absolute; left: clamp(28px, 6vw, 110px); bottom: 16px; font: 600 10.5px Bahnschrift, sans-serif; letter-spacing: .26em; text-transform: uppercase; color: rgba(214,206,170,.38); }

@keyframes mmIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; } }
@keyframes mmInR { from { opacity: 0; transform: translate(18px, -50%); } to { opacity: 1; transform: translateY(-50%); } }
@keyframes mmDrop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes mmPulse { 50% { opacity: .35; } }
@keyframes mmNudge { 20% { transform: translateX(-5px); } 50% { transform: translateX(5px); border-color: #d1432f; } 80% { transform: translateX(-2px); } }
@media (max-width: 980px) { .mm-panel { position: absolute; right: 12px; left: 12px; top: auto; bottom: 12px; transform: none; width: auto; max-height: 46vh; animation: none; } .mm-left { justify-content: flex-start; padding-top: 70px; } .mm-list { max-height: 14vh; } .mm-foot { display: none; } }
@media (max-height: 700px) { .mm-item { padding-top: 8px; padding-bottom: 8px; } }

.mm-cam{display:flex;gap:7px;align-items:center;margin:8px 0 2px;font-size:12px;letter-spacing:.06em;color:#b9bda9}
.mm-cam button{width:24px;height:24px;border:2px solid #1d2019;cursor:pointer;border-radius:3px;padding:0}
.mm-cam button.on{outline:2px solid #e6d27a;outline-offset:1px}

/* ---- N31: poziom trudności i opcje nowego świata (ui/mainmenu.js, ui/difficulty.js) ---- */
.mm-newrow { display: flex; gap: 6px; width: 100%; }
.mm-dtip { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 5; margin-top: 4px; }
/* dymek poziomu: liczby zielono (pomagają graczowi) i pomarańczowo (utrudniają) */
/* pole wyboru w formularzu nie dziedziczy stylu pól tekstowych (rozciąganie); etykiety do lewej */

/* ---- MENU1: panel Personalizacji (ksywka, kamuflaż, opaska, tytuł, podgląd żołnierza); otwiera go przycisk w menu ---- */
.mm-pers { position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; padding: 12px; background: rgba(6,7,5,.72); backdrop-filter: blur(2px); }
.mm-pers.on { display: flex; }
.mm-pbox { width: min(560px, 100%); max-height: calc(100vh - 24px); overflow-y: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 20px; background: rgba(16,18,13,.97); border: 1px solid #5a5746; box-shadow: 0 10px 40px rgba(0,0,0,.6); font-family: Bahnschrift, 'DIN Alternate', 'Segoe UI', sans-serif; color: #d2ccb0; }
.mm-phead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mm-phead h2 { margin: 0; font: 800 18px Bahnschrift, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #e6e0c4; }
.mm-pback { padding: 7px 14px; font: 800 12px Bahnschrift, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #e6e0c4; background: #22251a; border: 1px solid #6e6a56; cursor: pointer; }
.mm-pbody { display: flex; gap: 18px; align-items: flex-start; }
.mm-prev { flex: none; width: 220px; height: 250px; background: radial-gradient(circle at 50% 40%, #2a2e22, #101309); border: 1px solid #3c3f30; }
.mm-pform { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
.mm-pform .mm-call { justify-content: space-between; }
.mm-pform .mm-call input { flex: 1; width: auto; min-width: 0; }
.mm-pform .mm-cam { margin: 0; flex-wrap: wrap; }
.mm-pform .mm-look { flex-wrap: wrap; }
@media (max-width: 620px) { .mm-pbody { flex-direction: column; align-items: center; } .mm-pform { width: 100%; } }

/* ---- bramka ksywki przy pierwszym uruchomieniu: bez zamknięcia, język zostaje dostępny nad zasłoną ---- */
.mm-gbox { width: min(420px, 100%); gap: 12px; }
.mm-gbox h2 { margin: 0; font: 800 17px Bahnschrift, sans-serif; letter-spacing: .26em; text-transform: uppercase; color: #e6e0c4; }
.mm-gbox p { margin: 0; font: 600 13px/1.45 Bahnschrift, sans-serif; letter-spacing: .03em; color: #a39d84; }
#mainmenu.gate .mm-top { z-index: 40; }