/* Start menu, run tab and collapsible panel. Layout only: colours, borders and
   fonts come from the skin's variables and its .btn / .row / .card styles. */

/* ---------- start menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 40; display: none; background: var(--bg); color: var(--ink);
  padding: calc(var(--sat) + 10px) calc(var(--sar) + 14px) calc(max(var(--sab), 12px) + 8px) calc(var(--sal) + 14px);
}
.menu.open { display: block; }
.menu-screen { display: none; flex-direction: column; gap: 12px; height: 100%; width: 100%; max-width: 460px; margin: 0 auto; min-height: 0; }
.menu-screen.active { display: flex; }
.menu-top, .menu-head { display: flex; align-items: center; gap: 8px; flex: none; }
.menu-gap { flex: 1; }
.menu-head h2 { flex: 1; margin: 0; font-size: var(--fs-lg); text-align: center; color: var(--accent); }
.menu-back { min-width: 0; padding: 6px 10px; flex-direction: row; }
.menu-wallet { min-height: 34px; }
.menu-logo { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.menu-logo .spr { width: 96px; height: 96px; flex: none; }
.menu-title { margin: 0; font-size: 40px; line-height: 1.05; text-align: center; color: var(--accent); text-shadow: 4px 4px 0 var(--line); display: flex; flex-direction: column; }
.menu-tier { flex: none; text-align: center; }
.tier-pick { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tier-pick b { font-size: var(--fs-lg); color: var(--accent); }
.tier-arrow { min-width: 52px; min-height: 44px; padding: 4px; flex-direction: row; }
.tier-arrow .spr { width: 16px; height: 16px; margin: 0; }
.menu-tier-info { margin: 6px 0 8px; font-size: var(--fs-sm); }
.menu-tier .note { margin-top: 6px; }
.menu-play { flex: none; min-height: 64px; font-size: var(--fs-lg); }
.menu-play small, .menu-entry small { font-size: var(--fs-xs); opacity: .85; }
.menu-entries { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.menu-entry { min-width: 0; min-height: 76px; padding: 8px 6px; white-space: normal; gap: 3px; }
.menu-entry .spr { width: 32px; height: 32px; margin: 0; }
.menu-last { flex: none; text-align: center; min-height: 2.6em; }
.menu-list { flex: 1 1 0; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; display: flex; flex-direction: column; gap: var(--gap); padding: 4px 2px 12px; }
.menu-list .row, .lab-slots { flex: none; }
.menu .row-sub { white-space: normal; }
.menu .btn.buy { min-width: 84px; }
html.menu-open .app { visibility: hidden; }          /* the game under the menu is not reachable by touch or keyboard */

/* ---------- collapsible upgrades panel ---------- */
.panel-toggle { flex: 0 0 52px; }
.panel-arrow { font-size: var(--fs-md); line-height: 1; height: 32px; display: grid; place-items: center; }
.panel-handle {
  grid-area: handle; display: none; align-items: center; justify-content: center; gap: 8px; position: relative;
  min-height: 44px; margin: 0 auto; padding: 6px 22px calc(max(var(--sab), 10px) + 2px); font-size: var(--fs-sm);
  background: var(--panel); color: var(--ink); width: 100%;
}
.panel-handle .panel-arrow { height: auto; color: var(--accent); }
.handle-dot { display: none; width: 8px; height: 8px; background: var(--bad); }
.panel-handle.has-badge .handle-dot { display: block; }
.app.collapsed { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "hud" "stage" "handle"; }
.app.collapsed .panel, .app.collapsed .tabs { display: none; }
.app.collapsed .panel-handle { display: flex; }

@media (min-width: 820px) and (min-height: 500px) {
  .menu { padding: 24px; }
  .menu-screen { max-width: 520px; }
  .app.collapsed { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "hud handle" "stage stage"; }
  .panel-handle { width: auto; align-self: center; padding: 6px 18px; min-height: 48px; }
}