/* Dark Mage of Mossfen — the game menu (v1.09, ui/menu.js): Esc with nothing else open, like
   Ragnarok's. A small box in the middle of the screen; the world doesn't wait while it is open.
   Also the status window's two little buttons: + / − (its stats) and ≡ (this menu, on a phone). */
#menu {
  left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 30;
  width: min(260px, calc(100% - 32px));
  padding: 9px 12px 12px;
}
#menu header { align-items: center; }
#menu header kbd, .menu-btn kbd { font: 400 11px/1 var(--f-num); color: var(--ink-faint); }
.menu-list { display: grid; gap: 6px; }
.menu-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 36px; padding: 8px 12px; cursor: pointer; text-align: left;
  font: 700 15px/1.15 var(--f-display); letter-spacing: 0.04em; color: var(--ink);
  background: rgba(0, 0, 0, 0.28); border: 1px solid var(--edge); border-radius: 4px;
}
.menu-btn:hover, .menu-btn:focus-visible { border-color: var(--edge-strong); background: rgba(243, 214, 138, 0.09); outline: none; }
.menu-btn.is-quiet { color: var(--ink-dim); background: transparent; margin-top: 2px; }

/* the status window's buttons, at the right of its header */
#status header { align-items: center; }
#status header .win-meta { margin-left: auto; white-space: nowrap; }
.st-btn {
  flex: none; width: 22px; height: 22px; padding: 0; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--edge); background: transparent; color: var(--ink-dim);
  font: 700 15px/1 var(--f-body);
}
.st-btn:hover, .st-btn[aria-pressed="true"], .st-btn[aria-expanded="true"] { color: var(--ink); border-color: var(--edge-strong); }
.st-btn:focus-visible { outline: 2px solid #f3d68a; outline-offset: 2px; }
#status.is-folded .stats { display: none; }
#menu-btn { display: none; }                 /* a keyboard has Esc; a phone gets the button */

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  #menu-btn { display: block; }
}
@media (max-width: 760px) {
  #st-fold { display: none; }                /* the stats never show this narrow */
  #status header { gap: 6px; }
  #status .win-title { min-width: 0; overflow-wrap: anywhere; }
  .st-base { display: none; }                /* "Lv 1": room for the ≡ button */
  #menu { top: 40%; }
}