/* ================= VALÓDI FŐ- ÉS SZÜNETMENÜ ================= */
#gameMenuButton{
  position:fixed;z-index:27;display:none;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  padding:0;border:1px solid rgba(255,209,102,.50);border-radius:17px;
  background:linear-gradient(180deg,rgba(18,23,48,.94),rgba(8,11,27,.97));
  color:#ffe08a;box-shadow:0 10px 28px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.10);
  cursor:pointer;touch-action:manipulation
}
html.show-game-menu-button #gameMenuButton{display:flex}
#gameMenuButton>span{font:900 24px/1 "Segoe UI",system-ui,sans-serif}
#gameMenuButton>small{font:900 8px/1 "Segoe UI",system-ui,sans-serif;letter-spacing:.08em;color:rgba(240,244,255,.88)}
#gameMenuButton:hover{border-color:#ffd166;filter:brightness(1.08)}
#gameMenuButton:active{transform:translateY(1px)}
#gameMenuButton:focus-visible{outline:3px solid #f2eddc;outline-offset:3px}

#gameMenuLayer{
  position:fixed;z-index:28;display:none;overflow:hidden;border-radius:14px;
  background:rgba(5,8,22,.58);backdrop-filter:blur(3px);font-family:"Segoe UI",system-ui,sans-serif;
  color:#f2eddc;pointer-events:none
}
#gameMenuLayer.show{display:block;pointer-events:auto}
#gameMenuLayer.menu-main{background:transparent;backdrop-filter:none}
#gameMenuLayer.menu-pause{background:rgba(5,8,22,.58);backdrop-filter:blur(3px)}
#gameMenuLayer[aria-hidden="true"]{visibility:hidden}
.gameMenuPanel{
  position:absolute;width:min(390px,46%);max-height:calc(100% - 28px);overflow:auto;
  padding:18px;border:1px solid rgba(255,255,255,.16);border-radius:23px;
  background:linear-gradient(180deg,rgba(17,22,47,.97),rgba(8,11,28,.98));
  box-shadow:0 24px 70px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.08)
}
#gameMenuLayer.menu-main .gameMenuPanel{left:50%;top:50%;transform:translate(-50%,-50%);width:min(430px,72%)}
#gameMenuLayer.menu-pause .gameMenuPanel{left:50%;top:50%;transform:translate(-50%,-50%);width:min(430px,70%)}
.gameMenuHeader{text-align:center;margin:0 0 13px}
.gameMenuHeader p{margin:0 0 4px;font:800 10px/1.2 "Segoe UI",system-ui,sans-serif;letter-spacing:.14em;color:rgba(171,187,241,.86)}
.gameMenuHeader h2{margin:0;font:900 25px/1.1 "Segoe UI",system-ui,sans-serif;color:#ffd166;text-shadow:0 2px 4px rgba(0,0,0,.42)}
.gameMenuPage[hidden],.gameMenuAction[hidden]{display:none!important}
.gameMenuGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.gameMenuAction{
  min-height:46px;padding:9px 10px;border:1px solid rgba(210,225,255,.18);border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.045));
  color:#edf2ff;text-decoration:none;text-align:center;display:flex;align-items:center;justify-content:center;
  font:900 12px/1.15 "Segoe UI",system-ui,sans-serif;letter-spacing:.025em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);cursor:pointer;touch-action:manipulation
}
.gameMenuAction.full{grid-column:1/-1}
.gameMenuAction.primary{border-color:rgba(255,209,102,.56);background:linear-gradient(180deg,#ffd166,#dda23b);color:#1b1320;font-size:14px;box-shadow:0 8px 20px rgba(0,0,0,.28)}
.gameMenuAction.support{border-color:rgba(142,231,201,.44);background:linear-gradient(180deg,rgba(142,231,201,.17),rgba(142,231,201,.07));color:#aef4dc}
.gameMenuAction:hover{border-color:rgba(255,209,102,.62);filter:brightness(1.09)}
.gameMenuAction:active{transform:translateY(1px);filter:brightness(.98)}
.gameMenuAction:focus-visible,.gameMenuMetaLinks a:focus-visible,.gameMenuMetaLinks button:focus-visible,input[type="range"]:focus-visible{outline:3px solid #ffd166;outline-offset:2px}
.gameMenuMetaLinks{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}
.gameMenuMetaLinks a,.gameMenuMetaLinks button{
  min-height:34px;border:0;border-radius:11px;background:rgba(255,255,255,.045);color:rgba(216,225,255,.82);
  text-decoration:none;display:flex;align-items:center;justify-content:center;font:800 10px/1 "Segoe UI",system-ui,sans-serif;
  letter-spacing:.06em;cursor:pointer;touch-action:manipulation
}
.gameMenuMetaLinks a:hover,.gameMenuMetaLinks button:hover{background:rgba(255,255,255,.10);color:#fff}
.volumeSetting{padding:12px 13px;margin-bottom:10px;border:1px solid rgba(210,225,255,.13);border-radius:15px;background:rgba(255,255,255,.045)}
.volumeHeading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.volumeHeading label{font:900 14px "Segoe UI",system-ui,sans-serif;color:#f2eddc}
.volumeHeading output{font:900 13px "Segoe UI",system-ui,sans-serif;color:#ffd166}
.volumeSetting input[type="range"]{width:100%;height:28px;margin:0;accent-color:#ffd166;cursor:pointer;touch-action:pan-x}
.gameMenuHint{margin:10px 3px 13px;text-align:center;font:600 11px/1.4 "Segoe UI",system-ui,sans-serif;color:rgba(188,201,244,.82)}
#gameMenuSettings .volumeSetting{padding:8px 11px;margin-bottom:6px;border-radius:13px}
#gameMenuSettings .volumeHeading{margin-bottom:3px}
#gameMenuSettings .volumeSetting input[type="range"]{height:22px}
#gameMenuSettings .gameMenuAction{min-height:38px;padding:6px 9px}
#gameMenuSettings .gameMenuHint{margin:4px 2px 6px;line-height:1.25}
.controlGuide{display:grid;gap:7px;margin-bottom:9px}
.controlGuide>div{display:grid;grid-template-columns:minmax(90px,.85fr) 1.4fr;gap:12px;align-items:center;padding:8px 10px;border-radius:11px;background:rgba(255,255,255,.045)}
.controlGuide strong{text-align:right;font:900 11px "Segoe UI",system-ui,sans-serif;color:#ffd166}
.controlGuide span{font:700 11px "Segoe UI",system-ui,sans-serif;color:rgba(233,238,255,.92)}

html.menu-layer-open #mobileControls{visibility:hidden;pointer-events:none}
html.mobile-pending #gameMenuLayer,html.mobile-ready #gameMenuLayer,html.is-iphone #gameMenuLayer,
html.mobile-pending #gameMenuButton,html.mobile-ready #gameMenuButton,html.is-iphone #gameMenuButton{display:none!important}

@media (pointer:coarse),(max-width:920px){
  #gameMenuButton{display:none!important}
  .gameMenuPanel{padding:13px;border-radius:18px;width:min(390px,48%);max-height:calc(100% - 14px)}
  #gameMenuLayer.menu-main .gameMenuPanel{left:50%;top:50%;transform:translate(-50%,-50%);width:min(430px,72%)}
  #gameMenuLayer.menu-pause .gameMenuPanel{width:min(430px,72%)}
  .gameMenuHeader{margin-bottom:9px}.gameMenuHeader h2{font-size:20px}
  .gameMenuGrid{gap:7px}.gameMenuAction{min-height:39px;padding:7px 8px;border-radius:11px;font-size:10px}
  .gameMenuAction.primary{font-size:12px}.gameMenuMetaLinks{gap:7px;margin-top:7px}.gameMenuMetaLinks a,.gameMenuMetaLinks button{min-height:29px;font-size:8px}
  .volumeSetting{padding:9px 10px;margin-bottom:7px}.volumeHeading{margin-bottom:5px}.volumeHeading label{font-size:12px}.volumeHeading output{font-size:11px}
  .gameMenuHint{margin:6px 2px 8px;font-size:9px}.controlGuide{gap:4px}.controlGuide>div{padding:5px 7px}.controlGuide strong,.controlGuide span{font-size:9px}
}
@media (max-height:430px) and (orientation:landscape){
  #gameMenuLayer.menu-main .gameMenuPanel{top:50%}
  .gameMenuPanel{padding:10px;max-height:calc(100% - 8px)}
  .gameMenuHeader{margin-bottom:6px}.gameMenuHeader p{font-size:8px}.gameMenuHeader h2{font-size:17px}
  .gameMenuAction{min-height:34px;padding:5px 7px}.gameMenuMetaLinks a,.gameMenuMetaLinks button{min-height:25px}
  #gameMenuSettings .volumeSetting{padding:5px 8px;margin-bottom:4px;border-radius:11px}
  #gameMenuSettings .volumeHeading{margin-bottom:1px}
  #gameMenuSettings .volumeHeading label{font-size:11px}
  #gameMenuSettings .volumeHeading output{font-size:10px}
  #gameMenuSettings .volumeSetting input[type="range"]{height:18px}
  #gameMenuSettings .gameMenuAction{min-height:30px;padding:4px 7px}
  #gameMenuSettings .gameMenuHint{margin:3px 2px 4px;font-size:8px;line-height:1.15}
}