/* The main menu's look, shared by the room page (index.html, its start and pause screens) and the city's pause menu
   (city.html). The colours (--navy, --sun, --ink, --shadow) come from the page's own stylesheet. */
/* The main menu: the start screen and the pause screen (src/ui/menu.js). Navy, round, one soft shadow. Two columns,
   the buttons on the left, so that it fits a phone held sideways (360 px high): five buttons of 48 px, 8 px apart. */
#overlay { position: fixed; inset: 0; display: grid; place-items: center; overflow: auto; padding: 10px;
  background: rgba(11,16,41,.5); backdrop-filter: blur(6px); z-index: 10; }
#overlay.hidden { display: none; }
.menu { display: grid; grid-template-columns: 186px 1fr; gap: 14px; width: min(700px, 100%);
  padding: 12px 14px; border-radius: 20px; background: var(--navy); color: #fff; box-shadow: var(--shadow); }
.menu h1 { margin: 0 0 6px; line-height: 0; }
.menu h1 img { width: 172px; height: auto; }
.menu nav { display: grid; gap: 8px; }
.menu button { min-height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: rgba(255,255,255,.1); color: #fff;
  font-family: Rubik, ui-sans-serif, system-ui, sans-serif; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
  transition: background .15s, transform .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.menu button:focus-visible, .menu #login button[type=submit], .menu #signup button[type=submit], .menu #code-form button[type=submit] { background: var(--sun); color: var(--ink); }
.menu button.on { background: #fff; color: var(--ink); }
/* Hover only where there is a mouse: on a phone a tapped button would stay sun. The button the arrow keys are on
   looks the same (above, with the ring). Pressed: the same sun a shade darker, nothing moves (DESIGN.md, "Buttons"). */
/* Hover and the arrows' button lift a little (owner, 15 Oct: "lift on hover"); pressed, it sits back down */
.menu button:where(:not(.link, .more, #by-phone, #forgot)):focus-visible { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(11,16,41,.35); }
@media (hover: hover) { :where(#overlay:not(.by-keys)) .menu button:hover:not(:disabled) { background: var(--sun); color: var(--ink); }
  :where(#overlay:not(.by-keys)) .menu button:where(:not(.link, .more, #by-phone, #forgot, :disabled)):hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(11,16,41,.35); }
  #wallet-history .link:hover, #wallet-history .more:hover, .menu #by-phone:hover, .menu #forgot:hover { text-decoration-thickness: 2px; }
  .menu .choice:hover { background: rgba(255,255,255,.2); } }
.menu button:active:not(:disabled) { filter: brightness(.9); transform: none; box-shadow: none; }
.menu button:disabled { opacity: .6; cursor: default; }
.menu .main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#panels { flex: 1; max-height: 290px; overflow: auto; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.08); }
#panels h3 { margin: 12px 0 4px; font: 600 12px Inter, sans-serif; color: rgba(255,255,255,.7); }
#panel-options label { margin-top: 6px; font-weight: 600; }
.menu select, .menu input[type=tel], .menu input[type=text], .menu input[type=email], .menu input[type=password] { min-height: 48px; padding: 0 12px; border: 0; border-radius: 12px; background: #fff;
  color: var(--ink); font: 500 16px Inter, ui-sans-serif, system-ui, sans-serif; }
.menu input[type=range] { height: 48px; accent-color: var(--sun); }
@media (max-width: 560px) { .menu { grid-template-columns: 1fr; } }
/* A phone held sideways (360 px high): six or seven buttons do not fit in one column, so the left side takes two
   (the title over both) and the panel the rest of the width */
@media (max-height: 480px) and (min-width: 561px) {
  .menu { grid-template-columns: auto 1fr; }
  /* down the columns, as Down goes; a second column only when there are more than four buttons */
  .menu nav { grid-template-rows: repeat(4, auto); grid-auto-flow: column; grid-auto-columns: 145px; }
  #panels { max-height: calc(100dvh - 104px); }   /* the name and the status line below it stay on the screen */
  .menu nav button { padding: 0 10px; line-height: 1.15; }
}