/*
 * The menu's front-page bars and mode picker (menubar.ts, modepicker.ts), the What's new panel, and the feedback links on the death
 * card and pause menu (contact.ts). Field kit as in menu.css: gunmetal plates, ink outlines, hard shadows down and to the right,
 * orange for what you can act on, Barlow Condensed in bone.
 */

/* ---- Backdrop: one container behind everything in the menu, for the yard scene or a live match. It is the hero of the front page:
 * the plates are compact and a little see-through, and leave most of the screen to it. */
#menu .menu-backdrop { position: fixed; inset: 0; z-index: 0; }

/* ---- The page is one column the height of the screen: the top bar, the step (the mode card sits at its foot), the bottom bar. */
#menu .menu-card { display: flex; flex-direction: column; min-height: calc((100dvh - 52px - var(--st) - var(--sb)) / var(--ui, 1)); }
#menu .deploy:not([hidden]) { flex: 1 0 auto; display: flex; flex-direction: column; }
#menu .step-modes:not([hidden]) { flex: 1 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
#menu .menu-footer { margin-top: auto; padding-top: 18px; }

/* ---- Top bar, right: Log in and Register (guest) or the name chip, Account and Log out. Every one is a .top-btn: one height, one
 * padding, one baseline, and the bar packs itself tighter (data-fit, menubar.ts) before anything can spill past the edge. */
#menu { --top-h: 44px; }
#menu .menu-top { grid-template-columns: auto minmax(0, 1fr) auto; }
#menu .menu-tabs button { box-sizing: border-box; height: var(--top-h); padding-top: 0; padding-bottom: 0; }
#menu .menu-auth { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; flex-wrap: nowrap; }
#menu .menu-auth .top-btn {
  box-sizing: border-box; height: var(--top-h); margin: 0; padding: 0 16px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; vertical-align: top; white-space: nowrap;
  font: 800 16px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
}
#menu .top-pitch { max-width: 180px; font: 700 14px/1.15 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--m-gold); text-align: right; text-shadow: 2px 2px 0 var(--m-ink); }
#menu .menu-auth .top-register {
  --lip: 4px; border: 2px solid var(--m-ink); border-radius: 6px; cursor: pointer; color: #160a04;
  background: linear-gradient(var(--m-accent-hi) 0 5px, var(--m-accent) 5px) !important;
  box-shadow: 0 var(--lip) 0 0 var(--m-accent-lip), 0 var(--lip) 0 2px var(--m-ink), 5px calc(var(--lip) + 5px) 0 0 var(--m-shadow) !important;
}
#menu .menu-auth .top-register:hover { background: linear-gradient(#ff9468 0 5px, var(--m-accent-hi) 5px) !important; }
#menu .menu-auth .top-register:active { transform: translateY(3px); --lip: 1px; }
/* Signed in: your level and name over a slim XP bar, to your service record; a plate like Account beside it. */
#menu .menu-auth .top-me {
  flex-direction: column; align-items: stretch; gap: 4px; min-width: 120px; max-width: 230px; padding: 0 12px; color: var(--m-text);
  background: linear-gradient(var(--m-top) 0 5px, var(--m-face) 5px); border: 2px solid var(--m-ink); border-radius: 6px;
  box-shadow: 0 4px 0 0 var(--m-lip), 0 4px 0 2px var(--m-ink), 5px 9px 0 0 var(--m-shadow);
}
#menu .top-me:hover { border-color: var(--m-accent); }
#menu .top-me-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
#menu .top-me .acct-lv { flex: none; padding: 2px 6px 1px; font-size: 13px; }
#menu .top-me-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 16px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
#menu .top-me-bar { display: block; height: 5px; background: var(--m-well); border: 1px solid var(--m-ink); border-radius: 3px; overflow: hidden; }
#menu .top-me-bar i { display: block; height: 100%; min-width: 2px; background: var(--m-gold); }
/* Log out is a plate button like Account, a shade quieter. */
#menu .menu-auth .top-logout { color: var(--m-sub); }
#menu .menu-auth .top-logout:hover { color: var(--m-text); }
/* A guest's chip reads as the plain Log in button beside Register. */
#menu .menu-auth[data-signed-in="false"] .acct-chip .acct-name::before { display: none; }
/* Packing, tightest last: no pitch; tighter tabs; the emblem without the word; a shorter name and slimmer padding. */
#menu .menu-top:is([data-fit="1"], [data-fit="2"], [data-fit="3"], [data-fit="4"]) .top-pitch { display: none; }
#menu .menu-top:is([data-fit="2"], [data-fit="3"], [data-fit="4"]) { gap: 12px; }
#menu .menu-top:is([data-fit="2"], [data-fit="3"], [data-fit="4"]) .menu-tabs { gap: 8px; }
#menu .menu-top:is([data-fit="2"], [data-fit="3"], [data-fit="4"]) .menu-tabs button { padding: 0 13px; letter-spacing: 0.08em; }
#menu .menu-top:is([data-fit="3"], [data-fit="4"]) .logo { display: none; }
#menu .menu-top[data-fit="4"] .menu-tabs button { padding: 0 9px; letter-spacing: 0.04em; }
#menu .menu-top[data-fit="4"] .menu-auth { gap: 8px; }
#menu .menu-top[data-fit="4"] .menu-auth .top-btn { padding: 0 10px; letter-spacing: 0.05em; }
#menu .menu-top[data-fit="4"] .top-me { min-width: 0; max-width: 150px; }

/* ---- The guest's reason to register: one slim strip, left-aligned, so the scene shows beside it. */
#menu .step-modes .enlist { margin: 0; max-width: 100%; }
#menu .enlist[data-form="closed"] .enlist-plate {
  width: fit-content; max-width: 100%; box-sizing: border-box; grid-template-columns: auto auto minmax(0, auto) auto; gap: 4px 18px; padding: 8px 14px 8px 12px;
  background: linear-gradient(rgba(79, 85, 96, 0.94) 0 6px, rgba(42, 47, 56, 0.86) 6px);
}
#menu .enlist[data-form="closed"] .enlist-tag { width: 30px; margin: 0; }
#menu .enlist[data-form="closed"] .enlist-head { max-width: 280px; padding: 0; }
#menu .enlist[data-form="closed"] .enlist-title { font-size: 22px; }
#menu .enlist[data-form="closed"] .enlist-sub { margin-top: 3px; font-size: 13px; line-height: 1.2; }
#menu .enlist[data-form="closed"] .enlist-body { grid-column: auto; padding: 0; grid-template-columns: minmax(0, auto) auto; gap: 8px 18px; }
#menu .enlist[data-form="closed"] .enlist-perks { padding: 0 0 0 16px; gap: 5px 18px; }
#menu .enlist[data-form="closed"] .enlist-perks li { font-size: 14px; gap: 7px; }
#menu .enlist[data-form="closed"] .enlist-icon { width: 20px; height: 20px; }
#menu .enlist[data-form="closed"] .enlist-actions { grid-auto-flow: column; padding: 0; gap: 14px; align-items: center; }
#menu .enlist[data-form="closed"] .enlist-go { padding: 9px 16px 8px !important; font-size: 16px; --lip: 4px; }
#menu .enlist[data-form="closed"] .enlist-alt { font-size: 14px; }
#menu .enlist[data-form="closed"] .enlist-x { position: static; align-self: center; font-size: 13px; }

/* ---- The mode card: what you are about to play, in one compact plate at the foot of the screen. Title and steps, the dropdown,
 * the pitch, a squad's invite link, and Next. A little see-through, so the match behind still reads around and through it. */
#menu .mode-pick {
  margin-top: auto; width: min(400px, 100%); box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 16px 20px;
  background: linear-gradient(rgba(79, 85, 96, 0.95) 0 7px, rgba(42, 47, 56, 0.84) 7px);
}
#menu .mode-pick::before { content: ""; position: absolute; left: 6px; top: 6px; width: 14px; height: 14px; border-top: 3px solid var(--m-accent); border-left: 3px solid var(--m-accent); border-top-left-radius: 2px; pointer-events: none; }
#menu .mode-pick-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0 2px 8px; }
#menu .mode-pick-title::before { display: none; }
#menu .mode-pick-title { display: block; margin: 0; font: italic 900 23px/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--m-text); text-shadow: 2px 2px 0 var(--m-ink); white-space: nowrap; }
#menu .mode-pick-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The steps, small, in the card's corner: 1 Mode, then 2 Loadout (reachable once a mode is chosen). */
#menu .mode-pick .steps { position: static; display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
#menu .mode-pick .steps li + li::before { content: "\203A"; margin-right: 4px; color: var(--m-sub); font: 800 14px/1 var(--display); }
#menu .mode-pick .crumb { gap: 5px; padding: 3px 7px 3px 3px; font-size: 12px; letter-spacing: 0.12em; border-width: 2px; box-shadow: none; background: rgba(21, 23, 28, 0.7); }
#menu .mode-pick .crumb b { width: 17px; height: 17px; font-size: 11px; }

/* The dropdown: a dark well with the mode's chip, name and who is in, and an orange caret. */
#menu .mode-dd { position: relative; }
#menu .mode-trigger {
  width: 100%; min-height: 52px; box-sizing: border-box; padding: 6px 12px 6px 10px; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  color: var(--m-text); background: rgba(21, 23, 28, 0.92) !important; border: 2px solid var(--m-ink); border-radius: 6px;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.5) !important; transform: none !important;
}
#menu .mode-trigger:hover { border-color: #6a7482; }
#menu .mode-trigger[aria-expanded="true"] { border-color: var(--m-accent); }
#menu .mode-trigger:focus-visible { outline: 3px solid var(--m-accent-text); outline-offset: 3px; border-color: var(--m-accent); }
#menu .mdd-caret { width: 14px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ff5a1f' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform 0.12s; }
#menu .mode-trigger[aria-expanded="true"] .mdd-caret { transform: rotate(180deg); }
#menu .mdd-text { display: grid; gap: 3px; min-width: 0; }
#menu .mdd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: italic 900 22px/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--m-text); text-shadow: 2px 2px 0 var(--m-ink); }
#menu .mdd-pitch { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13.5px/1.25 var(--text); color: var(--m-sub); }
#menu .mdd-live { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: 700 13px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-sub); }
#menu .mdd-live i { width: 8px; height: 8px; flex: none; background: var(--m-ok); border: 1px solid var(--m-ink); border-radius: 50%; }
#menu .mode-dd .mode { width: 56px; padding-left: 0; padding-right: 0; text-align: center; box-sizing: border-box; }

/* The list: a dark plate that opens over the scene (above or below the button, wherever there is room), never in the top layer. */
#menu .mode-list {
  position: absolute; left: -6px; top: calc(100% + 8px); z-index: 40; width: 600px; max-width: calc(100vw / var(--ui, 1) - 60px); margin: 0; padding: 6px; list-style: none;
  overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 2px; box-sizing: border-box;
  background: linear-gradient(#3d4450 0 6px, #23272e 6px); border: 2px solid var(--m-ink); border-radius: 7px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1), 0 5px 0 0 var(--m-lip), 0 5px 0 2px var(--m-ink), 8px 13px 0 0 var(--m-shadow);
  animation: mdd-in 0.12s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
#menu .mode-list[hidden] { display: none; }
#menu .mode-list[data-place="up"] { top: auto; bottom: calc(100% + 8px); }
/* Beside the card (no room above or below): positioned against the card itself, its foot level with the card's. */
#menu .mode-pick:has(.mode-list[data-place="side"]) .mode-dd { position: static; }
#menu .mode-list[data-place="side"] { top: auto; bottom: 0; left: calc(100% + 14px); width: min(560px, calc(100vw / var(--ui, 1) - 100% - 70px - var(--sl) - var(--sr))); }
#menu .mode-list:focus { outline: none; }
#menu .mode-list:focus-visible { outline: 3px solid var(--m-accent-text); outline-offset: 3px; }
@keyframes mdd-in { from { transform: translateY(4px); opacity: 0; } to { transform: none; opacity: 1; } }
#menu .mdd-opt {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 54px; box-sizing: border-box;
  padding: 7px 12px 7px 10px; border-radius: 5px; cursor: pointer; border: 2px solid transparent; user-select: none; -webkit-tap-highlight-color: transparent;
}
#menu .mdd-opt .mdd-name { font-size: 19px; }
#menu .mdd-opt.active { background: #3d4450; border-color: var(--m-ink); }
#menu .mode-list:focus-visible .mdd-opt.active { border-color: var(--m-accent-text); }
#menu .mdd-opt[aria-selected="true"] { box-shadow: inset 4px 0 0 var(--m-accent); }
#menu .mdd-opt[aria-selected="true"] .mdd-name { color: var(--m-accent-text); }

/* The pitch under the dropdown, and a squad's own controls (its room and invite link) when Zombies is picked. */
#menu .mode-detail { margin: 0; padding: 0 2px; min-height: 2.7em; font: 500 15px/1.35 var(--text); color: var(--m-sub); }
#menu .mode-pick .mode-grid { display: block; padding: 0; gap: 0; }
#menu .mode-pick .mode-grid .mc-wrap { display: none; }
#menu .mode-pick .mode-grid[data-pick="ZOM"] .mc-wrap:has(#squad-room) { display: block; }
#menu .mode-pick .mode-grid .mc-wrap::before, #menu .mode-pick .mode-grid .mc-hit, #menu .mode-pick .mode-grid .mc-head,
#menu .mode-pick .mode-grid .mc-pitch, #menu .mode-pick .mode-grid .mc-cta { display: none; }
#menu .mode-pick .mode-grid .mode-card { background: none; border: 0; box-shadow: none; transform: none; cursor: default; }
#menu .mode-pick .mode-grid .mc-plate { padding: 0; background: none; }
#menu .mode-pick .mode-grid .mc-actions { margin: 0; gap: 8px; }

/* Next: the orange plate. Its label and chevrons sit side by side, so they can never overlap at any size. */
#menu button.mode-next {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; padding: 13px 18px 12px;
  font-size: 27px; letter-spacing: 0.14em; text-indent: 0;
}
#menu button.mode-next::after { display: none; }
#menu .mode-next-label { white-space: nowrap; }
#menu .mode-next-chev { flex: none; letter-spacing: -0.05em; opacity: 0.55; font-size: 1.15em; line-height: 0.8; transition: transform 0.18s, opacity 0.18s; }
#menu button.mode-next:hover:not(:disabled) .mode-next-chev { transform: translateX(4px); opacity: 0.8; }
/* Every other big orange button keeps its chevrons clear of its centred label. */
#menu button.primary:not(.mode-next) { padding-left: 64px; padding-right: 64px; }

/* ---- Bottom bar: What's new · Discord · Give feedback · Look up a player · Privacy. */
#menu .menu-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 0; }
#menu .menu-footer .foot-item { display: inline-flex; align-items: center; gap: 6px; }
#menu .menu-footer .foot-item + .foot-item::before { content: "\00b7"; margin: 0 12px; color: var(--faint); }
#menu .menu-footer .foot-item[hidden] { display: none; }
#menu .menu-footer a { color: var(--m-sub); }
#menu .menu-footer #menu-changelog { color: var(--m-accent-text); }
#menu .menu-footer a:hover { color: var(--m-accent); }
#menu .foot-discord svg { width: 18px; height: 18px; fill: currentColor; }
#menu .foot-mail { color: #a2a9b6; letter-spacing: 0.08em; text-transform: none; font-weight: 500; user-select: all; }

/* ---- What's new: a modal plate over the menu (outside #menu, so its colours are spelt out). */
.changelog {
  position: fixed; inset: 0; margin: auto; z-index: 90;
  width: min(560px, calc(100vw - 24px)); max-height: min(640px, calc(100dvh - 24px)); padding: 0; overflow: hidden;
  display: none; flex-direction: column; color: #ece6d6; background: linear-gradient(#4f5560 0 7px, #2a2f38 7px);
  border: 2px solid #1c1f26; border-radius: 7px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.13), 0 6px 0 0 #272c34, 0 6px 0 2px #1c1f26, 10px 16px 0 0 rgba(5, 6, 9, 0.6), 0 0 0 100vmax rgba(8, 10, 14, 0.66);
}
.changelog[open] { display: flex; }
.changelog .cl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 10px; border-bottom: 2px solid #1c1f26; }
.changelog h2 { margin: 0; font: italic 900 30px/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; color: #ece6d6; text-shadow: 2px 2px 0 #1c1f26; }
.changelog .cl-close { padding: 8px 14px; font: 800 15px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: #ece6d6; background: linear-gradient(#5b6371 0 5px, #4f5560 5px); border: 2px solid #1c1f26; border-radius: 6px; box-shadow: 0 4px 0 0 #272c34, 0 4px 0 2px #1c1f26; cursor: pointer; }
.changelog .cl-close:focus-visible { outline: 3px solid #ffa57c; outline-offset: 3px; }
.changelog .cl-body { overflow-y: auto; overscroll-behavior: contain; padding: 6px 18px 18px; }
.changelog .cl-day h3 { margin: 14px 0 6px; font: 800 15px/1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: #ffd34d; }
.changelog .cl-day ul { margin: 0; padding: 0 0 0 18px; }
.changelog .cl-day li { margin: 5px 0; font: 500 15px/1.35 var(--text); color: #d3cdbc; }
.changelog .cl-day li::marker { color: #ff5a1f; }

/* ---- Feedback on the death card: in the button row on a desktop, inside More on a phone (the stepped card keeps its row lean). */
.death-feedback { flex: none; margin-right: auto; padding: 0 4px; font: 700 var(--t-label) var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: #b8b2a2; text-decoration: none; }
.death-feedback:hover, .death-contact a:hover { color: var(--accent); }
.death.compact .death-feedback { display: none; }
.death-contact { margin: 10px 0 2px; font: 600 13px/1.3 var(--text); color: #a2a9b6; }
.death-contact a { font: 700 13px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.death-contact span { user-select: all; }
.death:not(.compact) .death-contact { display: none; }

/* ---- Feedback in the pause menu's home tab. */
.pz-feedback { margin: 10px 0 0; font: 600 13px/1.3 var(--text); color: #a2a9b6; text-align: center; }
.pz-feedback a { font: 700 14px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); text-decoration: none; margin-right: 6px; }
.pz-feedback span { user-select: all; }

/* ---- Your own service record: the way back to account settings. */
.profile-settings { display: inline-block; margin-top: 10px; font: 700 var(--t-label) var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.profile-settings:hover { color: var(--text, #ece6d6); }

/* ---- Below a wide desktop the guest's strip stacks: its benefits two by two, then its buttons on a row of their own that wraps.
 * (Benefits and buttons side by side, on `minmax(0, 1fr) auto`, gave the unwrappable buttons every pixel and crushed the benefits to
 * nothing, so their words overprinted each other and Create account: on a phone held upright, and on a 1024px laptop.) */
@media (max-width: 1180px) {
  #menu .enlist[data-form="closed"] .enlist-plate { grid-template-columns: auto minmax(0, 1fr) auto; }
  #menu .enlist[data-form="closed"] .enlist-body { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
  #menu .enlist[data-form="closed"] .enlist-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; border: 0; }
  #menu .enlist[data-form="closed"] .enlist-perks li { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
  #menu .enlist[data-form="closed"] .enlist-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; }
}
@media (max-width: 640px) {
  #menu .mode-pick { width: 100%; }
  #menu .menu-footer .foot-item + .foot-item::before { margin: 0 8px; }
}
/* A phone on its side: a shorter bar and card, the guest's strip in one line with no benefits, and slimmer options (the list opens
 * beside the card there, over the empty scene, since it fits neither above nor below). */
@media (max-height: 520px) and (min-width: 600px) {
  #menu { --top-h: 38px; }
  #menu .menu-top { grid-template-columns: auto minmax(0, 1fr) auto; }
  #menu .menu-tabs { grid-column: auto; grid-row: auto; justify-content: center; }
  #menu .menu-tabs button { flex: none; }
  #menu .top-pitch { display: none; }
  #menu .menu-auth .top-btn { padding: 0 12px; font-size: 14px; }
  #menu .menu-auth .top-me { gap: 3px; padding: 0 9px; }
  #menu .top-me-name { font-size: 14px; }
  #menu .top-me .acct-lv { font-size: 12px; }
  #menu .menu-tabs button { font-size: 14px; }
  #menu .step-modes:not([hidden]) { gap: 10px; }
  #menu .menu-footer { padding-top: 10px; }
  #menu .enlist[data-form="closed"] .enlist-plate { grid-template-columns: auto auto auto auto; padding: 5px 12px 6px 10px; gap: 4px 14px; }
  #menu .enlist[data-form="closed"] .enlist-sub, #menu .enlist[data-form="closed"] .enlist-perks { display: none; }
  #menu .enlist[data-form="closed"] .enlist-title { font-size: 19px; }
  #menu .enlist[data-form="closed"] .enlist-tag { width: 24px; }
  #menu .enlist[data-form="closed"] .enlist-body { grid-column: auto; grid-template-columns: auto; }
  #menu .mode-pick .steps { display: none; }
  #menu .enlist[data-form="closed"] .enlist-go { padding: 7px 12px 6px !important; font-size: 14px; }
  #menu .enlist[data-form="closed"] .enlist-alt { font-size: 13px; }
  #menu .mode-pick { width: 340px; gap: 7px; padding: 8px 12px 14px; }
  #menu .mode-pick-title { font-size: 19px; }
  #menu .mode-trigger { min-height: 44px; }
  #menu .mdd-name { font-size: 19px; }
  #menu .mode-detail { min-height: 0; font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #menu button.mode-next { font-size: 21px; padding: 8px 14px 7px; --lip: 6px; }
  #menu .mdd-opt { min-height: 42px; padding: 3px 10px 3px 8px; gap: 10px; }
  #menu .mdd-opt .mdd-text { gap: 2px; }
  #menu .mdd-opt .mdd-name { font-size: 17px; }
  #menu .mdd-pitch { font-size: 12.5px; }
}

/* The full-screen tip's arrow stands in for "Tap … then" only on a phone held upright (below). */
#menu .a2hs-arrow { display: none; }

/* ---- A phone held upright (and a tablet in portrait, or any window narrower than a phone on its side). The mode card is the hero:
 * it comes straight under a compact top bar and a one-line full-screen tip, so the dropdown and Next are on screen without scrolling;
 * the guest's enlist strip follows it. Desktop and a phone on its side never match this block. */
@media (orientation: portrait) and (max-width: 1024px), (max-width: 599px) and (min-height: 521px) {
  #menu { --top-h: 38px; padding-top: calc(10px + var(--st)); }
  /* Top bar: the emblem and the auth buttons on one row, the tabs as one segmented plate under them, every piece the same height. */
  #menu .menu-top { margin-bottom: 10px; gap: 8px 10px; }
  #menu .emblem { width: 38px; }
  #menu .logo { font-size: 30px; }
  #menu .menu-auth { gap: 8px; }
  #menu .menu-auth .top-btn { padding: 0 12px; font-size: 15px; letter-spacing: 0.08em; }
  #menu .top-me-name { font-size: 15px; }
  /* (#menu-tabs by id: the menu's plate-button rule, with its run of :not()s, would otherwise win.) The segments keep 4px apart,
   * the gap the bar's fit check (menubar.ts spillPx) asks of neighbours on a row. */
  #menu #menu-tabs {
    grid-column: 1 / -1; grid-row: 2; display: flex; gap: 4px; padding: 3px; justify-content: stretch;
    background: rgba(21, 23, 28, 0.88); border: 2px solid var(--m-ink); border-radius: 7px; box-shadow: 4px 5px 0 var(--m-shadow);
  }
  #menu #menu-tabs button {
    flex: 1 1 0; min-width: 0; height: 34px; padding: 0 4px; border: 0; border-radius: 5px; background: none; box-shadow: none; transform: none;
    font-size: 15px; letter-spacing: 0.08em; white-space: nowrap; color: var(--m-sub);
  }
  #menu #menu-tabs button[aria-selected="true"] {
    color: var(--m-text); background: linear-gradient(var(--m-accent) 0 4px, #5a626f 4px); box-shadow: inset 0 0 0 2px var(--m-ink);
  }
  #menu #menu-tabs button:active:not(:disabled) { transform: translateY(1px); }
  #menu .acct-sheet { top: 96px; }

  /* The full-screen tip: one slim strip, its key steps only, and a small Got it. */
  #menu .a2hs { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; margin: 0 0 12px; padding: 6px 6px 6px 10px; }
  #menu .a2hs-icon { width: 22px; height: 22px; }
  #menu .a2hs p { font: 600 14px/1.35 var(--text); }
  #menu .a2hs b { font-size: 14px; }
  #menu .a2hs-step { white-space: nowrap; }
  #menu .a2hs-why, #menu .a2hs small, #menu .a2hs-tap, #menu .a2hs-then { display: none; }
  #menu .a2hs-arrow { display: inline; margin: 0 6px 0 2px; color: var(--accent); font-weight: 800; }
  #menu .a2hs button { min-height: 34px; padding: 0 12px; font-size: 14px; }

  /* The mode card first, full width, right under the bar; the guest's strip below it. */
  #menu .step-modes:not([hidden]) { gap: 22px; }
  #menu .mode-pick { order: 1; margin-top: 0; width: 100%; max-width: 560px; gap: 9px; padding: 10px 12px 16px; }
  #menu .step-modes .enlist { order: 2; width: 100%; max-width: 560px; }
  #menu .mode-pick-head { flex-wrap: wrap; row-gap: 8px; padding: 4px 0 0 8px; }
  #menu .mode-pick-title { font-size: 21px; }
  #menu .mode-pick .steps { display: flex; }
  /* The dropdown: the mode's name gets the whole width, who is in goes under it. */
  #menu .mode-trigger { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 4px; min-height: 56px; }
  #menu .mode-trigger > .mode { grid-row: 1 / 3; }
  #menu .mode-trigger > .mdd-text { grid-column: 2; grid-row: 1; }
  #menu .mode-trigger > .mdd-live { grid-column: 2; grid-row: 2; font-size: 12px; }
  #menu .mode-trigger > .mdd-caret { grid-column: 3; grid-row: 1 / 3; }
  #menu .mode-list { left: 0; width: 100%; max-width: none; }
  #menu .mdd-opt { gap: 10px; padding: 6px 10px 6px 8px; }
  #menu .mode-detail { font-size: 14px; }
  #menu button.mode-next { font-size: clamp(20px, 6.4vw, 27px); letter-spacing: 0.1em; padding: 12px 12px 11px; gap: 10px; }

  /* The guest's strip: tag and one line of pitch, the benefits two by two, then Create account, Log in and Not now on one row. */
  #menu .enlist[data-form="closed"] .enlist-plate {
    width: 100%; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tag head head" "perks perks perks" "acts acts x";
    gap: 10px 12px; padding: 10px 12px 12px;
  }
  #menu .enlist[data-form="closed"] .enlist-body { display: contents; }
  #menu .enlist[data-form="closed"] .enlist-tag { grid-area: tag; width: 28px; }
  #menu .enlist[data-form="closed"] .enlist-head { grid-area: head; max-width: none; }
  #menu .enlist[data-form="closed"] .enlist-title { font-size: 21px; }
  #menu .enlist[data-form="closed"] .enlist-sub { font-size: 13.5px; }
  #menu .enlist[data-form="closed"] .enlist-perks { grid-area: perks; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 0; border: 0; }
  #menu .enlist[data-form="closed"] .enlist-perks li { font-size: 14px; line-height: 1.15; gap: 7px; white-space: normal; min-width: 0; overflow-wrap: anywhere; }
  #menu .enlist[data-form="closed"] .enlist-icon { width: 20px; height: 20px; }
  #menu .enlist[data-form="closed"] .enlist-actions { grid-area: acts; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 0; min-width: 0; }
  #menu .enlist[data-form="closed"] .enlist-go { padding: 9px 14px 8px !important; font-size: 16px; }
  #menu .enlist[data-form="closed"] .enlist-x { grid-area: x; position: static; align-self: center; justify-self: end; }
  /* An open form (sign up, log in, reset: asked for from the bar or the strip) comes up top, under the bar, its fields in one column. */
  #menu .step-modes .enlist:not([data-form="closed"]) { order: 0; }
  #menu .enlist:not([data-form="closed"]) .enlist-form { width: auto; }

  /* Loadout: a tighter head, and Deploy rides the foot of the screen the whole way down the step. */
  #menu .step-head { gap: 8px 14px; margin: 2px 0 14px; min-height: 0; }
  #menu .back-btn { padding: 8px 12px 8px 10px; font-size: 15px; }
  #menu .back-btn span { font-size: 22px; }
  #menu .step-title { font-size: 34px; }
  #menu .mission { gap: 10px; padding: 7px 12px; font-size: 15px; flex-wrap: wrap; }
  #menu .mission b { font-size: 18px; }
  #menu .gear-grid { gap: 18px; padding-bottom: 10px; }
  #menu .gear-left { gap: 16px; }
  #menu .gear-right { display: contents; }
  #menu .play-actions { bottom: calc(10px + var(--sb)); margin: 0; }
  #menu .gear-tag { font-size: 20px; }
  #menu button.primary { font-size: 28px; padding: 14px 18px 13px; --lip: 7px; }
}
/* The narrowest phones: the benefits drop out so the strip stays three short rows. */
@media (orientation: portrait) and (max-width: 359px), (max-width: 359px) and (min-height: 521px) {
  #menu .enlist[data-form="closed"] .enlist-plate { grid-template-areas: "tag head head" "acts acts x"; }
  #menu .enlist[data-form="closed"] .enlist-perks { display: none; }
  #menu #menu-tabs button { font-size: 14px; letter-spacing: 0.05em; }
}