/* Fort Rot menu presentation. Shared spacing and surfaces for every menu;
   gameplay HUD geometry remains in hud-layout.css. */
#title-bg img {
  transform-origin: 50% 62%;
  animation: fr-kenburns 52s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes fr-kenburns {
  from { transform: scale(1.03) translate3d(0.4%, 0.2%, 0); }
  to   { transform: scale(1.10) translate3d(-1.4%, -1.0%, 0); }
}

/* vignette on the photograph itself, under every panel */
#title-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(115% 85% at 50% 42%, transparent 48%, rgba(0, 0, 0, .62) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .34), transparent 34%, transparent 70%, rgba(0, 0, 0, .28));
}

/* The fog and ember layers overhang their box while they drift; clip them
   here or the overhang becomes scrollable overflow on the title screen. */
#title-grad {
  overflow: hidden;
  contain: paint;
}

/* fog: two soft banks that drift against each other */
#title-grad::before {
  content: "";
  position: absolute;
  inset: -22% -18%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .55;
  background:
    radial-gradient(58% 34% at 28% 72%, rgba(128, 138, 150, .16), transparent 72%),
    radial-gradient(46% 30% at 74% 66%, rgba(112, 124, 136, .13), transparent 72%),
    radial-gradient(70% 22% at 50% 88%, rgba(140, 150, 160, .10), transparent 76%);
  animation: fr-fog 44s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes fr-fog {
  from { transform: translate3d(-2.5%, 0.8%, 0) scale(1.00); }
  to   { transform: translate3d(2.5%, -0.6%, 0) scale(1.06); }
}

/* embers: a handful of warm motes lifting off the wet ground */
#title-grad::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .0;
  background-image:
    radial-gradient(2px 2px at 18% 78%, rgba(255, 176, 96, .95), transparent 65%),
    radial-gradient(1.5px 1.5px at 31% 66%, rgba(255, 150, 70, .9), transparent 65%),
    radial-gradient(2px 2px at 44% 84%, rgba(255, 190, 120, .9), transparent 65%),
    radial-gradient(1.5px 1.5px at 57% 71%, rgba(255, 160, 80, .85), transparent 65%),
    radial-gradient(2.5px 2.5px at 66% 88%, rgba(255, 178, 100, .9), transparent 65%),
    radial-gradient(1.5px 1.5px at 79% 63%, rgba(255, 150, 70, .85), transparent 65%),
    radial-gradient(2px 2px at 88% 80%, rgba(255, 186, 110, .9), transparent 65%),
    radial-gradient(1.5px 1.5px at 12% 58%, rgba(255, 160, 80, .8), transparent 65%);
  animation: fr-embers 16s linear infinite;
  will-change: transform, opacity;
}
@keyframes fr-embers {
  0%   { transform: translate3d(0, 10%, 0); opacity: 0; }
  12%  { opacity: .75; }
  70%  { opacity: .55; }
  100% { transform: translate3d(2.5%, -22%, 0); opacity: 0; }
}


:root {
  --menu-line: rgba(224, 220, 209, .16);
  --menu-copy: #b9b9b2;
  --menu-white: #f2eee3;
  --menu-accent: #d98656;
  --menu-radius: 8px;
  --menu-border: 1px solid var(--menu-line);
  --menu-panel: linear-gradient(145deg, #1a1e20f5, #101315fa);
  --menu-body-color: var(--menu-copy);
  --menu-title-color: var(--menu-white);
  --menu-title-track: .025em;
  --menu-body: 14px;
  --menu-btn-h: 48px;
  --menu-sel-glow: inset 3px 0 var(--menu-accent);
  --menu-gutter: clamp(20px, 4vw, 56px);
  --menu-pad: clamp(22px, 3vw, 40px);
}
#title-screen::after { display: none; }
html:root #title-screen.screen { padding: 0; overflow: hidden; justify-content: center; }
/* The wide-measure pages are documents, not dialogs, so they start at the top
   of the column. Centring them only ever LOOKED top-aligned because their
   content happened to fill the viewport: Field treatments is a single row of
   cards, so the same rule dropped its title to y=305 while Controls, Credits
   and Legal sat at y=76 on the identical measure. */
html:root #title-screen.screen:is([data-page="loadout"], [data-page="treatments"],
  [data-page="controls"], [data-page="credits"], [data-page="legal"]) { justify-content: flex-start; }
html:root #title-screen .mpage {
  box-sizing: border-box;
  width: min(1120px, calc(100% - 2 * var(--menu-gutter)));
  max-width: none;
  min-height: 0;
  max-height: calc(100dvh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin: 64px 0 32px;
  padding: 4px 4px 20px !important;
  overflow: auto;
  overscroll-behavior: contain;
  scroll-padding: 20px;
  scrollbar-width: thin;
  scrollbar-color: #646763 transparent;
  flex-shrink: 1;
  justify-content: flex-start;
}
html:root #title-screen .mpage .mpage-title,
html:root #pause-screen .pause-panel > h2,
html:root #account-gate h2 {
  font: 700 calc(clamp(28px, 3vw, 40px) * var(--ui-scale, 1))/1.15 var(--font-display);
  color: var(--menu-white);
  letter-spacing: .025em;
  text-align: left;
  text-shadow: none;
  text-indent: 0;
  transform: none;
  margin: 0 0 28px;
}
html:root #title-screen .mpage-title::before,
html:root #title-screen .mpage-title::after { display: none; }
html:root #title-screen .mpage > .mpage-title { width: 100%; }
html:root #title-screen .ask-card {
  box-sizing: border-box;
  width: min(640px, 100%);
  max-width: none;
  flex-shrink: 0;
  margin: 0 auto;
  padding: var(--menu-pad);
  text-align: left;
  border: var(--menu-border);
  border-radius: 12px;
  background: var(--menu-panel);
  box-shadow: 0 24px 80px #0006;
}
html:root #title-screen .ask-kicker {
  display: block;
  margin: 0 0 12px;
  color: var(--menu-accent);
  font: 600 11px/1.3 var(--font-mono);
  letter-spacing: .16em;
}
html:root #title-screen .mpage-sublabel,
html:root #title-screen .home-online-price,
html:root #title-screen .ready-recap {
  max-width: none;
  margin: -20px 0 28px;
  color: var(--menu-copy);
  font: 400 calc(14px * var(--ui-scale, 1))/1.6 var(--font-ui);
  text-align: left;
  letter-spacing: 0;
  padding: 0;
}
html:root #title-screen .menu-grid { width: 100%; margin: 0; gap: 12px; }
html:root #title-screen .mrow { max-width: none; gap: 12px; }
html:root #title-screen .mtile,
html:root #title-screen .diff-card,
html:root #title-screen .site-card,
html:root .screen .mbtn,
html:root .screen .pbtn,
html:root #account-gate .mbtn,
html:root #pause-screen .diff-btn {
  border: var(--menu-border);
  border-radius: var(--menu-radius);
  background: #ffffff05;
  box-shadow: none;
  color: var(--menu-white);
  transform: none;
  text-shadow: none;
  transition: background .16s ease, border-color .16s ease;
}
html:root #title-screen .mtile {
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  min-height: 96px;
  padding: 20px;
}
html:root #title-screen .mtile .mt-name,
html:root #title-screen .diff-card .dc-name {
  color: var(--menu-white);
  font: 700 calc(23px * var(--ui-scale, 1))/1.2 var(--font-display);
  letter-spacing: .055em;
}
html:root #title-screen .mtile .mt-note,
html:root #title-screen .diff-card .dc-line {
  margin: 8px 0 0;
  min-height: 0;
  color: var(--menu-copy);
  font: 400 calc(13px * var(--ui-scale, 1))/1.5 var(--font-ui);
  letter-spacing: 0;
  opacity: 1;
}
html:root #title-screen .mtile::before,
html:root #title-screen .mtile::after { display: none; }
html:root #title-screen .mtile.primary,
html:root .screen .mbtn.go,
html:root .screen .pbtn.primary,
/* Deploy is an ID in menu.css, so it outranked this rule and kept the older
   crimson gradient while every other primary had gone flat. One red. */
html:root .screen #btn-deploy,
html:root #account-gate .mbtn.go {
  background: #a7472d;
  color: #fff5eb;
  border-color: #c66343;
  box-shadow: none;
}
html:root #title-screen :is(.mtile, .diff-card, .site-card, .p-card, .cosmetic-card):hover,
html:root .screen :is(.mbtn, .pbtn):hover,
html:root #pause-screen .diff-btn:hover {
  background: #ffffff10;
  border-color: #c9b6a17a;
  transform: none;
}
html:root #title-screen .mtile.primary:hover,
html:root .screen .mbtn.go:hover,
html:root .screen #btn-deploy:hover,
html:root .screen .pbtn.primary:hover { background: #bc5335; }
html:root #title-screen :is(.p-card.sel, .diff-card.sel, .site-card.is-selected, .cosmetic-card.sel),
html:root #pause-screen :is(.diff-btn.sel, .diff-btn[aria-pressed="true"]) {
  border-color: var(--menu-accent);
  background: #d9865614;
  box-shadow: inset 3px 0 var(--menu-accent);
  transform: none;
}
html:root :is(#title-screen, #pause-screen, #account-gate, #controls-kit) :focus-visible {
  outline: 2px solid var(--menu-accent);
  outline-offset: 3px;
}
html:root .screen :is(.mbtn, .pbtn), html:root #account-gate .mbtn {
  min-height: 48px;
  padding: 12px 20px;
  font: 600 calc(13px * var(--ui-scale, 1))/1.3 var(--font-ui);
  letter-spacing: .035em;
}
html:root #title-screen .mpage .menu-col,
html:root #title-screen .mpage .menu-col.action-bar,
html:root #title-screen .mpage .credits-back {
  position: static;
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 28px 0 0;
  padding: 20px 0 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-top: var(--menu-border);
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}
html:root #title-screen .mpage .menu-col .mbtn {
  flex: 0 1 auto;
  width: auto;
  min-width: 112px;
  max-width: 100%;
  height: auto;
  border-radius: var(--menu-radius);
}
html:root #title-screen .mpage .menu-col .mbtn.go { margin-left: auto; min-width: 160px; }
html:root #title-screen .mpage .menu-col .mbtn.back { background: transparent; color: var(--menu-copy); }
html:root #title-screen .ready-adjust { justify-content: flex-start; margin-top: 16px; }
html:root #title-screen .ready-adjust .text-link { padding-inline: 0; margin-right: 12px; }
/* Home: wordmark and deployment choices share a baseline and generous gutter. */
html:root #title-screen[data-page="home"] .mpage[data-for="home"] {
  width: min(1140px, calc(100% - 2 * var(--menu-gutter)));
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: clamp(40px, 7vw, 100px);
  overflow: auto;
  margin: 40px 0 80px;
  max-height: calc(100dvh - 160px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
html:root #title-screen[data-page="home"] .mpage[data-for="home"] .game-title {
  width: auto;
  max-width: 100%;
  flex: 1 1 0;
  margin: 0;
  gap: 0;
  align-items: flex-start;
  text-align: left;
}
html:root #title-screen[data-page="home"] .mpage[data-for="home"] .gt-main {
  font-size: clamp(72px, 8.5vw, 122px);
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--menu-white);
  text-shadow: 0 8px 32px #0008;
}
html:root #title-screen .gt-rot { color: var(--menu-accent); }
html:root #title-screen #ask-play { flex: 0 1 440px; padding: 24px; }
html:root #title-screen #ask-play .ask-kicker { display: none; }
html:root #title-screen #ask-play .mrow-ask { grid-template-columns: 1fr; }
html:root #title-screen #ask-play .mtile { min-height: 72px; padding: 16px 20px; }
html:root #title-screen #ask-play .mtile.slim { min-height: 52px; }
html:root #title-screen #ask-play .mtile.slim .mt-name { font: 600 14px/1.3 var(--font-ui); letter-spacing: 0; }
html:root #title-screen #ask-play .mtile.slim .mt-note { margin-top: 4px; }
html:root #title-screen #ask-play .ask-more {
  display: flex;
  width: 100%;
  justify-content: space-between;
  min-height: 48px;
  margin: 16px 0 0;
  padding: 12px 0 0;
  border: 0;
  border-top: var(--menu-border);
  font: 500 14px/1.4 var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
  color: var(--menu-copy);
}
/* This was a "↗" character. Oswald and IBM Plex have no north-east arrow, so
   the browser fell back to whatever the system offered and it landed as a bare
   diagonal hairline next to the label. Draw the chevron from borders instead —
   no font dependency, and it nudges on hover like the row it belongs to. */
html:root #title-screen #ask-play .ask-more::after {
  content: "";
  flex: 0 0 auto;
  align-self: center;
  width: 7px;
  height: 7px;
  border: 2px solid var(--menu-accent);
  border-left: 0;
  border-bottom: 0;
  transform: translateX(-2px) rotate(45deg);
  transition: transform .18s ease;
}
html:root #title-screen #ask-play .ask-more:hover::after,
html:root #title-screen #ask-play .ask-more:focus-visible::after { transform: translateX(1px) rotate(45deg); }
html:root #title-screen[data-page="more"] .chrome-settings { display: none; }
html:root #title-screen .chrome-settings { top: calc(20px + env(safe-area-inset-top)); border-radius: 8px; background: #15191bbf; }
html:root #title-screen #btn-account {
  top: calc(20px + env(safe-area-inset-top));
  background: #15191bbf;
  box-shadow: none;
  border: var(--menu-border);
  border-radius: var(--menu-radius);
  font-size: 12px;
  letter-spacing: .025em;
}
html:root #title-screen[data-page="home"] .home-chrome-footer {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 12px 0 0;
  border-top: var(--menu-border);
  background: none;
}
html:root #title-screen[data-page="home"] .home-chrome-footer :is(.corner-stat, .live-presence) {
  position: static;
  inset: auto;
  transform: none;
  margin: 0;
  max-width: none;
  color: var(--menu-copy);
  font: 500 10px/1.5 var(--font-mono);
  letter-spacing: .035em;
  opacity: 1;
}
html:root #title-screen[data-page="home"] .home-chrome-footer .live-presence {
  position: fixed;
  top: max(24px, env(safe-area-inset-top));
  padding: 0;
  min-height: 24px;
  border: 0;
  background: none;
  box-shadow: none;
}
html:root #title-screen[data-page="home"] .home-chrome-footer #studio-credit.corner-stat { position: static; inset: auto; margin: 0; font-size: 10px; letter-spacing: .025em; }
html:root #title-screen[data-page="home"] .home-footer-links .text-link { font-size: 11px; text-transform: none; text-decoration: none; }
/* Choice pages and dossiers. */
html:root #title-screen .home-online-more { margin: 0 0 16px; padding: 0; max-width: none; text-align: left; }
html:root #title-screen .home-online-more summary::after { content: "+"; margin-left: 12px; color: var(--menu-accent); }
html:root #title-screen .home-online-more[open] summary::after { content: "−"; }
html:root #title-screen .home-online-more summary { text-transform: none; padding: 8px 0; min-height: 44px; font: 500 13px/1.5 var(--font-ui); color: var(--menu-copy); letter-spacing: 0; }
html:root #title-screen .home-online-more p { margin: 4px 0 12px; font: 400 13px/1.6 var(--font-ui); color: var(--menu-copy); }
html:root #title-screen .home-trial-status { text-align: left; margin: 0 0 20px; padding: 12px 14px; background: #d986560b; border-left: 2px solid var(--menu-accent); font: 500 13px/1.5 var(--font-ui); color: #e0ba97; }
html:root #title-screen .home-subscribe { margin-bottom: 20px; border-radius: 8px; }
html:root #title-screen .more-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Four entries were a bare word and the fifth carried a note, so the grid
   held two heights and the odd one out read as the only real choice. */
html:root #title-screen .more-list .mtile { min-height: 78px; padding: 18px 20px; align-items: flex-start; justify-content: center; }
html:root #title-screen .more-list .mtile .mt-name { font: 600 15px/1.4 var(--font-ui); letter-spacing: .025em; }
html:root #title-screen .more-list .mtile .mt-note { margin-top: 6px; font-size: 13px; }
html:root #title-screen #btn-more-deadnight { grid-column: 1 / -1; }
html:root #title-screen #btn-more-deadnight .mt-name { font: inherit; }
html:root #title-screen #predeploy-accessibility :is(.zr-check, .a11y-scare) { font: 400 13px/1.5 var(--font-ui); color: var(--menu-copy); }
html:root #title-screen #diff-grid { gap: 12px; margin: 0; }
html:root #title-screen .mpage[data-for="night"] #diff-grid .diff-card { padding: 18px 20px; min-height: 88px; }
html:root #title-screen #site-strip { gap: 12px; width: 100%; }
html:root #title-screen #site-strip .site-card { max-width: none; min-height: 112px; padding: 20px; }
html:root #title-screen .site-card::before { display: none; }
html:root #title-screen .site-name { font-size: 22px; letter-spacing: .025em; }
html:root #title-screen .site-intel { font: 400 13px/1.5 var(--font-ui); color: var(--menu-copy); }
html:root #title-screen :is(.p-card, .cosmetic-card, .lobby-player, .lobby-code-block, .lobby-facts, .credits-body) { border: var(--menu-border); border-radius: 8px; background: var(--menu-panel); box-shadow: none; }
/* The portraits are cards already; the grid drew a sixth surface around them,
   so the panel held a box that held the cards. */
html:root #title-screen #persona-grid {
  width: 100%;
  max-width: none;
  gap: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
html:root #title-screen .p-card .p-body { padding: 16px; }
html:root #title-screen .p-card .p-name { font-size: 19px; letter-spacing: .02em; }
html:root #title-screen .p-card .p-role { color: var(--menu-copy); font: 400 12px/1.5 var(--font-ui); letter-spacing: 0; }
/* Soldier was the one page that mixed alignments: a left-aligned title over a
   full-width card grid, then a 640px blurb and a 520px callsign row centred
   under it. Both now run the full column like everything else, and the reroll
   button takes the right edge instead of leaving a dead strip inside the row. */
html:root #title-screen .soldier-detail {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 20px 0;
  padding: 16px 20px;
  border: var(--menu-border);
  border-radius: 8px;
  background: #ffffff05;
  text-align: left;
  font: 400 14px/1.6 var(--font-ui);
  color: var(--menu-copy);
}
html:root #title-screen .soldier-detail .sd-blurb { letter-spacing: 0; color: var(--menu-copy); opacity: 1; }
/* A fact about the operator, not a warning: in the ember accent "NO NOTED
   APTITUDE" under Recruit read as an error the player had caused. */
html:root #title-screen .soldier-detail .sd-perk {
  margin-top: 8px;
  color: #8d8b83;
  font: 600 11px/1.4 var(--font-mono);
  letter-spacing: .12em;
}
html:root #title-screen #callsign-row {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 8px 12px 8px 20px;
  gap: 12px;
  min-height: 56px;
  justify-content: flex-start;
  border: var(--menu-border);
  border-radius: 8px;
  background: #ffffff05;
  box-shadow: none;
}
html:root #title-screen #callsign-row #callsign-reroll { margin-left: auto; }
html:root #title-screen #cosmetic-loadout { width: 100%; margin: 0; }
html:root #title-screen #cosmetic-grid { gap: 12px; }
html:root #title-screen .cosmetic-card { padding: 18px; }
/* Each treatment card wrote its unlock condition directly under a description
   that wraps to one or two lines, so the status lines and meters sat at four
   different heights across the row. Pin them to the bottom of the card. */
html:root #title-screen .cosmetic-card { align-items: stretch; }
html:root #title-screen .cosmetic-copy { display: flex; flex-direction: column; min-height: 100%; }
html:root #title-screen .cosmetic-progress { margin-top: auto; padding-top: 10px; }
html:root #title-screen .cosmetic-meter { margin-top: 8px; }
html:root #title-screen .cosmetic-card.locked { filter: none; border-style: dashed; }
html:root #title-screen .cosmetic-description,
html:root #title-screen .cosmetic-card.locked .cosmetic-name { color: var(--menu-copy); }
html:root #title-screen .credits-body { width: 100%; max-width: none; padding: var(--menu-pad); text-align: left; }
html:root #title-screen .credits-body :is(p, li) { font-size: 14px; line-height: 1.75; }
html:root #title-screen .legal-section { margin-block: 32px; }
html:root #title-screen .legal-lead { display: block; overflow: visible; }
html:root #title-screen .lobby-head,
html:root #title-screen .lobby-roster,
html:root #title-screen .lobby-site { width: 100%; max-width: none; gap: 12px; }
html:root #title-screen .lobby-code-block,
html:root #title-screen .lobby-facts { padding: 24px; }
html:root #title-screen .lobby-code { font-size: clamp(32px, 4vw, 48px); color: var(--menu-white); }
html:root #title-screen .lobby-player { padding: 16px 20px; }
html:root #title-screen .lobby-sub { width: 100%; margin: 24px 0 12px; text-align: left; color: var(--menu-copy); letter-spacing: .1em; }
html:root #title-screen .cc-input { width: 100%; margin: 0; padding: 16px; min-height: 64px; border: var(--menu-border); border-radius: 8px; background: #080b0d; color: var(--menu-white); }
html:root #title-screen :is(.cc-help, .cc-status, .cc-error) { text-align: left; font: 400 13px/1.5 var(--font-ui); margin: 12px 0 0; }
/* Settings: one scrollable content column, persistent navigation and Back. */
html:root #pause-screen.screen { padding: max(24px, env(safe-area-inset-top)) max(var(--menu-gutter), env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(var(--menu-gutter), env(safe-area-inset-left)); background: #06090bec; justify-content: center; }
html:root #pause-screen .panel.pause-panel {
  /* The column, so Settings is the same width as the pages either side of it. */
  width: min(var(--menu-col), 100%);
  min-height: 0;
  max-height: 100%;
  padding: var(--menu-pad);
  border: var(--menu-border);
  border-radius: 12px;
  background: var(--menu-panel);
  overflow: auto;
  align-items: stretch;
  justify-content: flex-start;
  box-shadow: 0 24px 80px #0005;
}
html:root #pause-screen[data-view="settings"] .panel.pause-panel { height: min(680px, 100%); overflow: hidden; }
html:root #pause-screen[data-view="settings"] .pause-settings { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 24px; width: 100%; margin: 24px 0 0; min-height: 0; }
html:root #pause-screen .set-tabs { grid-column: 1; grid-row: 1; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 6px; margin: 0; padding: 0; border: 0; }
html:root #pause-screen .set-tab { flex: 0 0 auto; min-height: 48px; padding: 12px 16px; text-align: left; color: var(--menu-copy); font: 500 14px/1.4 var(--font-ui); text-transform: none; letter-spacing: 0; border: 1px solid transparent; background: none; border-radius: 6px; }
html:root #pause-screen .set-tab.sel { color: var(--menu-white); background: #d9865614; border-color: #d986564d; box-shadow: inset 3px 0 var(--menu-accent); }
html:root #pause-screen .set-tab:hover { color: var(--menu-white); background: #ffffff08; }
html:root #pause-screen .set-body { grid-column: 2; grid-row: 1; min-width: 0; padding: 0 0 16px 24px; border-left: var(--menu-border); mask-image: none; -webkit-mask-image: none; }
html:root #pause-screen .set-panel { gap: 16px; max-width: none; text-align: left; }
html:root #pause-screen .set-head { text-align: left; text-indent: 0; margin: 16px 0 0; padding-bottom: 8px; border-bottom: var(--menu-border); color: var(--menu-accent); font: 600 11px/1.5 var(--font-mono); letter-spacing: .1em; }
html:root #pause-screen .set-panel > .set-head:first-child { margin-top: 0; }
html:root #pause-screen .slider-row { grid-template-columns: minmax(100px, 1fr) minmax(0, 1.7fr) 48px; gap: 14px; margin: 0; padding: 12px 0; border-bottom: 1px solid #ffffff08; min-height: 52px; }
html:root #pause-screen .slider-row label { color: var(--menu-white); font: 400 calc(14px * var(--ui-scale, 1))/1.4 var(--font-ui); letter-spacing: 0; text-transform: none; }
html:root #pause-screen .slider-control { min-width: 0; grid-template-columns: minmax(0, 1fr); }
html:root #pause-screen :is(.slider-min, .slider-max) { display: none; }
html:root #pause-screen .slider-row .val { font-size: 13px; color: var(--menu-accent); }
html:root #pause-screen .slider-row input[type="range"] { height: 44px; max-width: none; }
html:root #pause-screen .slider-row input[type="range"]::-webkit-slider-thumb { background: var(--menu-white); border: 3px solid var(--menu-accent); box-shadow: none; }
html:root #pause-screen .set-note { text-align: left; color: var(--menu-copy); font: 400 calc(13px * var(--ui-scale, 1))/1.6 var(--font-ui); opacity: 1; letter-spacing: 0; }
html:root #pause-screen .adaptive-row.zr-check { padding: 8px 0; color: var(--menu-copy); font: 400 calc(14px * var(--ui-scale, 1))/1.5 var(--font-ui); letter-spacing: 0; }
html:root #pause-screen .diff-btn { min-height: 44px; font: 500 13px/1.4 var(--font-ui); letter-spacing: 0; padding: 10px 12px; text-transform: none; }
html:root #pause-screen .pause-actions.set-back { grid-column: 1 / -1; grid-row: 2; width: 100%; margin: 0; padding: 16px 0 0; border-top: var(--menu-border); align-items: flex-start; }
html:root #pause-screen .set-back .pbtn { width: auto; min-width: 112px; }
html:root #pause-screen .pause-main { width: 100%; }
/* Six stats separated by interpuncts wrap inside this panel, and the dot after
   whichever stat lands last on a line dangles with nothing after it. menu.css
   fought this by widening the row; spacing alone cannot dangle. */
html:root #pause-screen .pause-run-stats { margin: 0 0 24px; gap: 8px 22px; justify-content: flex-start; font: 500 12px/1.5 var(--font-mono); color: var(--menu-copy); }
html:root #pause-screen .pause-run-stats span::after { content: none; }
html:root #pause-screen .pause-actions { width: 100%; gap: 10px; }
html:root #pause-screen[data-view="main"] .panel.pause-panel { width: min(620px, 100%); }
html:root #pause-screen .pause-actions .pbtn { text-align: left; box-shadow: none; transform: none; border-radius: 8px; }
/* The same rhythm extends to bindings and modal flows. */
html:root #pause-controls-slot #controls-kit { max-height: none; overflow: visible; }
html:root #controls-kit .ctl-tabs { justify-content: flex-start; padding: 8px 0 16px; gap: 8px; background: #111517; }
html:root #controls-kit :is(.controls-panel, #ctl-settings, #ctl-test, #ctl-controller-status) { border: var(--menu-border); background: var(--menu-panel); border-radius: 8px; padding: 20px; }
html:root #controls-kit .ctl-row { min-height: 64px; }
html:root #controls-kit :is(.ctl-action, .ctl-setting, .ctl-check) { font: 400 14px/1.5 var(--font-ui); color: var(--menu-white); }
html:root #controls-kit #ctl-list h3 { color: var(--menu-accent); margin: 24px 0 8px; padding-bottom: 12px; }
html:root #controls-kit #ctl-list h3:first-child { margin-top: 0; }
html:root #controls-kit :is(#ctl-help, #ctl-controller-status) { text-align: left; color: var(--menu-copy); font: 400 13px/1.6 var(--font-ui); }
html:root #controls-kit .ctl-tab { font: 500 13px/1.4 var(--font-ui); letter-spacing: 0; border-radius: 6px; }
html:root #controls-kit .ctl-binding { background: #22282c; border-color: #ffffff26; border-radius: 6px; }
html:root #account-gate .ag-card,
html:root #quickmatch .qm-panel,
html:root #confirm-screen .confirm-panel,
html:root #gameover-screen .panel,
html:root #firstrun .fr-panel,
html:root #cache-index-screen .cache-index-panel { border: var(--menu-border); border-radius: 12px; background: #14181a; box-shadow: 0 24px 80px #0008; padding: var(--menu-pad); }
html:root #account-gate .ag-field { color: var(--menu-copy); font-size: 13px; letter-spacing: 0; text-transform: none; }
html:root #account-gate .ag-field input { border-radius: 6px; padding: 14px; border-color: var(--menu-line); }
html:root #account-gate .ag-actions { flex-wrap: wrap; gap: 10px; }
html:root #account-gate .ag-actions .mbtn { flex: 1 1 40%; width: auto; min-width: 0; max-width: none; min-height: 48px; padding: 12px; white-space: normal; font-size: 13px; letter-spacing: .025em; }
html:root #account-gate .ag-actions .mbtn.go { background: #a7472d; border-color: #c66343; }
html:root #account-gate .ag-actions .mbtn:not(.go) { background: #ffffff05; border-color: var(--menu-line); box-shadow: none; }
html:root #account-gate .ag-actions .mbtn:hover { border-color: var(--menu-accent); }
html:root #account-gate .ag-legal { padding-top: 20px; border-top: var(--menu-border); font-size: 12px; line-height: 1.65; color: var(--menu-copy); }

/* ---------------------------------------------------------------------------
   Accessibility block on "Settings & extras".

   menu.css still styles this fieldset the way the old card did: centred text,
   a 320px stack centred inside a 420px box, and a legend with float:none and
   width:100%. Under the presentation layer's full-width panel that produced the
   one centred island on an otherwise left-aligned page, with the legend sitting
   on the border line and a band of empty box above the first control. Restate
   the whole block here so it reads as two settings rows: label left, control
   right, the same rhythm the Settings panels use.
   --------------------------------------------------------------------------- */
html:root #title-screen #predeploy-accessibility {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 28px 0 0;
  padding: 18px 20px 8px;
  border: var(--menu-border);
  border-radius: 8px;
  background: #ffffff05;
  text-align: left;
  font: 400 14px/1.5 var(--font-ui);
  color: var(--menu-copy);
}
/* A legend whose computed float is none is the fieldset's "rendered legend":
   the browser cuts a notch in the top border and hangs the text across the
   line, which is where the stray gap and the band of empty box came from.
   Floating it opts out of that layout entirely, so it becomes an ordinary
   block heading inside the padding box and the border closes up. */
html:root #title-screen #predeploy-accessibility legend {
  float: left;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  text-align: left;
  text-transform: uppercase;
  color: var(--menu-accent);
  font: 600 11px/1.5 var(--font-mono);
  letter-spacing: .1em;
}
html:root #title-screen #predeploy-accessibility .a11y-stack {
  display: block;
  clear: both;
  width: 100%;
  max-width: none;
  margin: 0;
  gap: 0;
}
html:root #title-screen #predeploy-accessibility .a11y-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 8px 0;
  text-align: left;
  cursor: pointer;
}
html:root #title-screen #predeploy-accessibility .a11y-row + .a11y-row { border-top: 1px solid #ffffff0f; }
/* The checkbox keeps box and label together on the left; only the select row
   pushes its control to the right edge. */
html:root #title-screen #predeploy-accessibility .zr-check { justify-content: flex-start; gap: 12px; }
/* The 18px hairline box all but vanished against the panel. */
html:root #title-screen #predeploy-accessibility .zr-check__box {
  width: 22px;
  height: 22px;
  margin-top: 0;
  border: 1px solid #ffffff2e;
  border-radius: 5px;
  background: #0b0e10;
  box-shadow: none;
}
html:root #title-screen #predeploy-accessibility .zr-check__box::after { left: 7px; top: 4px; width: 6px; height: 11px; }
html:root #title-screen #predeploy-accessibility .zr-check__input:checked + .zr-check__box {
  border-color: var(--menu-accent);
  background: #d986561f;
}
html:root #title-screen #predeploy-accessibility :is(.zr-check__label, .a11y-row__label) {
  color: var(--menu-white);
  font: 400 14px/1.4 var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
}
html:root #title-screen #predeploy-accessibility .zr-select { flex: 0 0 auto; width: min(200px, 48%); }
html:root #title-screen #predeploy-accessibility .zr-select__native {
  width: 100%;
  min-height: 44px;
  padding: 10px 34px 10px 14px;
  text-align: left;
  border: var(--menu-border);
  border-radius: 6px;
  background: #0b0e10;
  color: var(--menu-white);
  font: 500 13px/1.4 var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
}

/* A brand-new player has no record, and the home corner read
   "Best Round — · Best Score —". refreshBest() now hides the line outright;
   the page-scoped display:block rules in menu.css and menu-chrome.css would
   otherwise win over the hidden attribute. */
html:root #title-screen .best-line[hidden] { display: none !important; }

/* The settings sliders drew a hard square outline around the whole focused row.
   Two problems: it was shaped nothing like the rest of the panel, and
   :focus-within fires for pointer input too, so opening Settings with a mouse
   showed a rectangle around Master that read as a rendering artefact. Shape it
   like the panel, and show it only for keyboard focus. The :focus-within rule
   stays as-is where :has() is unsupported, so the indicator is never lost. */
html:root #pause-screen .slider-row { padding-inline: 10px; margin-inline: -10px; border-radius: 8px; }
html:root #pause-screen .slider-row:focus-within {
  outline: 1px solid #d9865666;
  outline-offset: 0;
  background: #ffffff06;
}
@supports selector(:has(*)) {
  html:root #pause-screen .slider-row:focus-within { outline: 0; background: none; }
  html:root #pause-screen .slider-row:has(input:focus-visible) {
    outline: 1px solid #d9865666;
    outline-offset: 0;
    background: #ffffff06;
  }
}

/* The trial disclosure was a bare word with a lone "+" beside it. Make it a
   chip so it reads as the one thing on the page you can open. */
html:root #title-screen .home-online-more summary {
  display: inline-flex;
  width: auto;
  min-height: 40px;
  padding: 8px 14px;
  border: var(--menu-border);
  border-radius: 999px;
  list-style: none;
  background: #ffffff05;
  transition: border-color .18s ease, color .18s ease;
}
html:root #title-screen .home-online-more summary:hover,
html:root #title-screen .home-online-more summary:focus-visible { color: var(--menu-white); border-color: var(--menu-accent); }
html:root #title-screen .home-online-more summary::after { margin-left: 10px; font: 400 16px/1 var(--font-ui); }
@media (max-width: 800px), (max-height: 560px) {
  :root { --menu-gutter: 20px; --menu-pad: 24px; }
  html:root #title-screen[data-page="home"] .mpage[data-for="home"] { flex-direction: column; justify-content: center; gap: 28px; margin-top: 32px; }
  html:root #title-screen[data-page="home"] .mpage[data-for="home"] .game-title { flex: 0 0 auto; align-items: center; text-align: center; }
  html:root #title-screen[data-page="home"] .mpage[data-for="home"] .gt-main { font-size: clamp(58px, 12vw, 90px); }
  html:root #title-screen #ask-play { flex: 0 0 auto; width: min(440px, 100%); }
  html:root #title-screen[data-page="home"] .home-chrome-footer { justify-content: center; gap: 0 20px; }
  html:root #title-screen[data-page="home"] .home-footer-links { order: -1; flex-basis: 100%; }
  html:root #pause-screen[data-view="settings"] .pause-settings { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px; margin-top: 20px; }
  html:root #pause-screen .set-tabs { grid-column: 1; grid-row: 1; display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  html:root #pause-screen .set-tab { flex: 1 1 auto; padding: 10px 12px; text-align: center; }
  html:root #pause-screen .set-body { grid-column: 1; grid-row: 2; border: 0; padding: 0 8px 16px 2px; }
  html:root #pause-screen .pause-actions.set-back { grid-row: 3; }
}
@media (max-width: 560px) {
  /* Small phones reclaim the gutter: 12px a side, not 16. Expressed once, so
     the pages, the chrome rail and the home footer move together. This was a
     hardcoded `width: calc(100% - 24px)` fighting a 16px gutter, which put the
     page 12px from the screen edge and the gear button 16px from it. */
  :root { --menu-gutter: 12px; --menu-pad: 20px; }
  html:root #title-screen .mpage .mpage-title { font-size: calc(28px * var(--ui-scale, 1)) !important; margin-bottom: 20px; }
  html:root #title-screen .mrow-ask-3 { grid-template-columns: 1fr; }
  html:root #title-screen .mtile { min-height: 76px; padding: 16px; }
  html:root #title-screen .mtile .mt-name { font-size: 21px; }
  html:root #title-screen .mtile .mt-note { margin-top: 4px; }
  html:root #title-screen .more-list { grid-template-columns: 1fr; gap: 8px; }
  html:root #title-screen .more-list .mtile { min-height: 52px; }
  html:root #title-screen .mpage .menu-col { margin-top: 24px; }
  html:root #title-screen .mpage .menu-col .mbtn { min-width: 88px; padding-inline: 16px; }
  html:root #title-screen .mpage .menu-col .mbtn.go { min-width: 112px; }
  html:root #title-screen #predeploy-accessibility { padding: 16px; }
  html:root #title-screen .p-card .p-body { padding: 12px; }
  html:root #title-screen .p-card .p-name { font-size: 16px; }
  /* Two cards to a 390px row left ~90px for the name, so RECRUIT set as
     "RECRU / IT" and CONTRACTOR as "CONTR / ACTOR". One card to a row. */
  html:root #title-screen #persona-grid { gap: 10px; grid-template-columns: minmax(0, 1fr); }
  html:root #title-screen .p-card :is(.p-name, .p-role) { overflow-wrap: normal; word-break: normal; }
  html:root #title-screen .cosmetic-card { padding: 14px; }
  html:root #pause-screen .slider-row { grid-template-columns: minmax(0, 1fr) 48px; gap: 4px 12px; }
  html:root #pause-screen .slider-row label { grid-column: 1; grid-row: 1; }
  html:root #pause-screen .slider-row .val { grid-column: 2; grid-row: 1; }
  html:root #pause-screen .slider-control,
  html:root #pause-screen .slider-row > input { grid-column: 1 / -1; grid-row: 2; }
  html:root #pause-screen .cb-row .diff-btn { flex-basis: 45%; }
  html:root #pause-screen .set-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  html:root #pause-screen .set-tab { grid-column: span 2; font-size: 12px; min-width: 0; padding-inline: 6px; }
  html:root #pause-screen .set-tab:nth-last-child(-n+2) { grid-column: span 3; }
  html:root #controls-kit :is(.controls-panel, #ctl-settings, #ctl-test) { padding: 14px; }
  html:root #account-gate .ag-actions .mbtn { flex-basis: 40%; }
}
@media (max-width: 560px) and (max-height: 700px) {
  html:root #title-screen[data-page="home"] .mpage[data-for="home"] { gap: 20px; }
  html:root #title-screen #ask-play { padding: 16px; }
  html:root #title-screen #ask-play .mtile { min-height: 60px; padding: 12px 16px; }
  html:root #title-screen #ask-play .mtile.slim { min-height: 48px; }
  html:root #title-screen #ask-play .menu-grid,
  html:root #title-screen #ask-play .mrow { gap: 8px; }
}
/* Narrow phones: the Solo and Online tiles now carry a line of copy, and at
   320px that is enough to push the home page into a scroll. The page is a
   single screen by contract (check_menu_presentation asserts it), so buy the
   height back from padding and gaps rather than dropping the copy. */
@media (max-width: 380px) {
  html:root #title-screen[data-page="home"] .mpage[data-for="home"] { gap: 14px; }
  html:root #title-screen #ask-play { padding: 14px; }
  /* 44px stays the floor here — check_layout_matrix holds every menu button to
     it, and "Deploy last night" is a single line of text that would otherwise
     collapse to 38px. */
  html:root #title-screen #ask-play .mtile { min-height: 56px; padding: 10px 14px; }
  html:root #title-screen #ask-play .mtile.slim { min-height: 44px; padding: 9px 14px; }
  html:root #title-screen #ask-play .menu-grid,
  html:root #title-screen #ask-play .mrow { gap: 6px; }
  html:root #title-screen #ask-play .ask-more { min-height: 44px; margin-top: 10px; padding-top: 10px; }
}
@media (max-height: 560px) {
  :root { --menu-pad: 20px; }
  html:root #title-screen .mpage { max-height: calc(100dvh - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin: 52px 0 12px; }
  html:root #title-screen .mpage .mpage-title { font-size: 26px !important; margin-bottom: 16px; }
  html:root #title-screen[data-page="home"] .mpage[data-for="home"] { flex-direction: row; gap: 32px; margin: 24px 0 64px; max-height: calc(100dvh - 104px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  html:root #title-screen[data-page="home"] .mpage[data-for="home"] .game-title { flex: 1 1 0; }
  html:root #title-screen[data-page="home"] .mpage[data-for="home"] .gt-main { font-size: clamp(48px, 7vw, 80px); }
  html:root #title-screen #ask-play { flex: 0 1 360px; padding: 16px; }
  html:root #title-screen #ask-play .ask-kicker { display: none; }
  html:root #title-screen #ask-play .mrow-ask { grid-template-columns: 1fr 1fr; }
  html:root #title-screen #ask-play .mtile { min-height: 52px; padding: 12px; }
  html:root #title-screen #ask-play .mtile .mt-name { font-size: 20px; }
  html:root #title-screen #ask-play .ask-more { margin-top: 8px; padding-top: 8px; }
  html:root #title-screen[data-page="home"] .home-chrome-footer { bottom: max(4px, env(safe-area-inset-bottom)); padding-top: 4px; }
  html:root #title-screen[data-page="home"] .home-footer-links { order: 0; flex-basis: auto; }
  html:root #title-screen[data-page="home"] .home-chrome-footer .live-presence { top: max(8px, env(safe-area-inset-top)); }
  html:root #title-screen .mrow-ask-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html:root #pause-screen.screen { padding-block: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-bottom)); }
  html:root #pause-screen .panel.pause-panel { padding: 16px 20px; }
  html:root #pause-screen .pause-panel > h2 { font-size: 26px; margin-bottom: 12px; }
  html:root #pause-screen[data-view="settings"] .pause-settings { margin-top: 12px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #title-bg img, #title-grad::before, #title-grad::after { animation: none; }
  #title-grad::after { display: none; }
}
html.reduce-motion #title-bg img,
html.reduce-motion #title-grad::before,
html.reduce-motion #title-grad::after { animation: none; }

/* ── One column, one edge ─────────────────────────────────────────────────
   Measured at 1440px, five sibling menu pages used five content widths (440,
   640, 820, 1000, 1120) and five left edges (846, 400, 310, 220, 160), so
   walking More -> Soldier -> Controls -> Settings slid the content sideways
   by up to 240px a step. Nothing was misaligned inside any one page; every
   page simply disagreed about where the page was, and that disagreement is
   what reads as unfinished.

   Two measures from here on. Dense pages fill the column. Pages that ask a
   single question sit on the narrower ask measure, centred on the same axis,
   so the two never fight over a left edge — they share a centre line. Home
   keeps its own framing: the deploy card is a flex item with its own basis
   and is deliberately hung off the right of the key art. */
html:root #title-screen,
html:root #pause-screen {
  --menu-col: 1120px;
  --menu-ask: 820px;
  /* The rail meets the outer edge of the panel under it. The old +4px offset
     existed because .mpage's focus-ring padding was where every visible panel
     began; the document pages draw the panel on .mpage itself now, so panel
     and column are the same edge. */
  --menu-edge: max(var(--menu-gutter), calc((100% - var(--menu-col)) / 2));
}
html:root #title-screen :is(.ask-card, .ask-card-wide) { width: min(var(--menu-ask), 100%); }

/* The rail hung off the viewport gutter (56px) while the content it sits
   above started at the column edge (160px), so the gear and the sign-in
   button floated 100px outboard of everything they belong to. */
html:root #title-screen .chrome-settings,
html:root #title-screen #btn-account { right: max(var(--menu-edge), env(safe-area-inset-right)); }
html:root #title-screen[data-page="home"] .home-chrome-footer {
  inset: auto var(--menu-edge) max(16px, env(safe-area-inset-bottom));
}
html:root #title-screen[data-page="home"] .home-chrome-footer .live-presence {
  right: max(var(--menu-edge), env(safe-area-inset-right));
}

/* Bindings were a 760px panel centred inside a 1120px page whose title sat on
   the page edge: the heading and the thing it titles were 176px apart. */
html:root #title-screen .controls-page #controls-slot { width: 100%; }
html:root #controls-kit #ctl-search-row { margin: 12px 0 16px; }
html:root #controls-kit .ctl-actions { justify-content: flex-start; margin-inline: 0; }
/* The bindings list inherited the menu's centred text: every touch row had a
   left-aligned label with its description centred underneath, and the section
   headings floated in the middle of a left-aligned table. Section headings
   here now read like every other section heading in the menus. */
html:root #controls-kit :is(.controls-panel, #ctl-settings) { text-align: left; }
html:root #controls-kit #ctl-list h3 { text-align: left; }
html:root #controls-kit :is(#ctl-help, #ctl-controller-status) { margin-block: 12px; }
html:root #controls-kit .ctl-tabs { padding-inline: 0; }
html:root #controls-kit #ctl-search {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* One rhythm inside a question card, instead of a negative top margin under
   the title and four different gaps below it. */
html:root #title-screen .ask-card .mpage-title { margin: 0 0 28px; }
html:root #title-screen .ask-card :is(.mpage-sublabel, .home-online-price, .ready-recap) {
  margin: -20px 0 28px;
}
html:root #title-screen .ask-card .home-online-more { margin: 0 0 28px; }
html:root #title-screen .ask-card .home-trial-status {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 0 0 28px;
}

/* Accessibility was a bordered box inside the Settings & extras card — the
   same box-in-a-box that made Credits read as a debug outline. It becomes a
   section under a rule, using the mono accent header the settings panel
   already uses, so there is one section-header pattern in the menus. */
html:root #title-screen #predeploy-accessibility {
  width: 100%;
  margin: 28px 0 0;
  padding: 24px 0 0;
  border: 0;
  border-top: var(--menu-border);
  border-radius: 0;
  background: none;
}
html:root #title-screen #predeploy-accessibility legend {
  margin: 0 0 4px;
  padding: 0;
  color: var(--menu-accent);
  font: 600 11px/1.5 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* Tint, border and inset bar all said the same thing about the selected tab. */
html:root #pause-screen .set-tab.sel { border-color: transparent; }

/* Copy that reserves a line before it has anything to say. The live regions
   keep their box in the accessibility tree and merely stop taking vertical
   space, so the first message they receive is still announced; a tile note
   with nothing in it is just a blank line inside a button. */
html:root #title-screen :is(#cosmetic-feedback, #site-strip-note, .cc-status, .cc-error):empty {
  height: 0;
  min-height: 0;
  margin-block: 0;
  padding-block: 0;
  overflow: hidden;
}
html:root #title-screen .mtile .mt-note:empty { display: none; }

/* ── One page shell ───────────────────────────────────────────────────────
   At 1440px a page could begin in three places: the dialogs drew a panel with
   their title 41px inside it (x=351), Settings drew one on the wide measure
   (x=201), and Soldier, Field treatments, Controls, Credits and Legal drew no
   panel at all (x=164, photograph showing through, and on the last two a
   second bordered card a further 44px in). Every page below home is now one
   panel with its title on the panel's inner edge. Two measures remain — a
   three-card dialog is not a thirteen-section notice — but the treatment no
   longer varies: wide pages start at 201, ask pages at 351. */
html:root #title-screen.screen:is([data-page="loadout"], [data-page="treatments"],
  [data-page="controls"]) .mpage {
  padding: var(--menu-pad) !important;
  border: var(--menu-border);
  border-radius: 12px;
  background: var(--menu-panel);
  box-shadow: 0 24px 80px #0006;
}
/* A direct child of .mpage is a flex item, so the kicker shrank to its own
   text and centred itself over a left-aligned title. Inside a card it was a
   block and never showed the fault. */
html:root #title-screen .mpage > .ask-kicker { width: 100%; text-align: left; }
/* The card Credits and Legal carried becomes plain content: two nested
   surfaces with two radii is the box-in-a-box this set out to remove. */
html:root #title-screen .credits-body {
  width: 100%;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
/* Legal ran ~150 characters to the line, twice a readable measure. The card
   is the measure now (738px, near 80 characters), so the body fills it
   instead of being capped inside it and leaving a ragged right gutter. */
html:root #title-screen .credits-body p { max-width: none; }

/* Back is an escape hatch, not a footer you reach the end of thirteen
   sections to find. menu.css pinned it with position:fixed; the one-column
   pass then set every action bar to static, which dropped it to the end of
   the document and left check_legal.py failing on six viewport/page pairs.
   It sticks to the bottom of the scrollport, flush with its card. */
html:root #title-screen .mpage .credits-back {
  position: sticky;
  bottom: 0;
  z-index: 2;
  /* .menu-col sets width:100%, and a fixed width slides left rather than
     stretching to meet a negative margin — the bar came up 2 * --menu-pad
     short of the card's right edge. */
  width: auto;
  margin: 32px calc(-1 * var(--menu-pad)) calc(-1 * var(--menu-pad));
  padding: 18px var(--menu-pad);
  border-top: var(--menu-border);
  /* Square corners poke past a 12px card. */
  border-radius: 0 0 12px 12px;
  /* Opaque: at 88% the headings scrolling under it stayed legible through the
     bar, which reads as a rendering fault rather than depth. */
  background: #101315;
}

/* Controls carried the same fault a level down: the bindings list drew its
   own bordered card inside the page panel. The device tabs stop being sticky
   because the panel is the scroller now — stuck at the top of a 40px padding
   box they would let rows scroll visibly above them. In the pause dialog,
   where the kit is a section and not a page, they stay as they were. */
html:root #title-screen #controls-kit .controls-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
html:root #title-screen #controls-kit .ctl-tabs {
  position: static;
  justify-content: flex-start;
  padding: 0 0 14px;
  background: none;
  border-bottom: var(--menu-border);
}

/* An always-full unlock meter is not a meter: Standard Issue is owned from
   the first launch, so its bar could only read 100% beside the word
   "Available". The bar belongs to cards with something left to earn. */
html:root #title-screen .cosmetic-card:not(.locked) .cosmetic-meter { display: none; }

/* ── Premium spacing pass ─────────────────────────────────────────────────
   One rhythm for every menu and settings surface: 8 / 12 / 16 / 24 / 32.
   Dead copy is hidden, forced empty panels hug their content, and the title
   file stamp returns above the wordmark. */
html:root #title-screen,
html:root #pause-screen {
  --menu-space-1: 8px;
  --menu-space-2: 12px;
  --menu-space-3: 16px;
  --menu-space-4: 24px;
  --menu-space-5: 32px;
}

html:root #title-screen .gt-file {
  display: block;
  margin: 0 0 14px;
  color: var(--menu-accent);
  font: 600 11px/1.3 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px #0008;
}
html:root #title-screen[data-page="home"] .mpage[data-for="home"] .game-title {
  align-items: flex-start;
}
html:root #title-screen #ask-play {
  padding: 28px 28px 22px;
}
html:root #title-screen #ask-play .ask-kicker {
  display: block;
  margin: 0 0 16px;
}
html:root #title-screen #ask-play .menu-grid,
html:root #title-screen #ask-play .mrow { gap: 10px; }
html:root #title-screen #ask-play .ask-more {
  margin-top: 14px;
  padding-top: 14px;
}

html:root #title-screen .ask-card .mpage-title { margin: 0 0 10px; }
html:root #title-screen .ask-card :is(.mpage-sublabel, .home-online-price, .ready-recap) {
  margin: 0 0 16px;
}
html:root #title-screen .ask-card .home-online-more { margin: 0 0 12px; }
html:root #title-screen .mpage[data-for="online"] .home-online-more { margin: 0 0 20px; }
html:root #title-screen .ask-card .home-trial-status { margin: 0 0 20px; }

/* Pricing is a disclosure, not a third call to action. */
html:root #title-screen .home-online-more summary {
  display: inline-flex;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--menu-copy);
  text-decoration: underline;
  text-decoration-color: #d9865666;
  text-underline-offset: 3px;
}
html:root #title-screen .home-online-more summary::after {
  content: none;
  margin: 0;
}
html:root #title-screen .home-online-more[open] summary::after { content: none; }
html:root #title-screen .home-online-more summary:hover,
html:root #title-screen .home-online-more summary:focus-visible {
  color: var(--menu-white);
  border-color: transparent;
}
html:root #title-screen .home-online-more p { margin: 8px 0 4px; max-width: 42em; }

html:root #title-screen .mpage[data-for="online"] .mtile {
  min-height: 88px;
  padding: 18px 18px 16px;
}

html:root #title-screen #predeploy-accessibility .a11y-scare {
  justify-content: flex-start;
  gap: 20px;
}
html:root #title-screen #predeploy-accessibility .zr-select { margin-left: 0; }

html:root #title-screen:is(
  [data-page="loadout"],
  [data-page="treatments"],
  [data-page="controls"],
  [data-page="credits"],
  [data-page="legal"]
) .chrome-settings { display: none; }

html:root #title-screen .mpage[data-for="credits"] .ask-card,
html:root #title-screen .mpage[data-for="legal"] .ask-card {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden;
}
html:root #title-screen[data-page="credits"] .mpage[data-for="credits"],
html:root #title-screen[data-page="legal"] .mpage[data-for="legal"] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html:root #title-screen .mpage[data-for="credits"] .ask-card,
html:root #title-screen .mpage[data-for="legal"] .ask-card {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
html:root #title-screen .mpage[data-for="credits"] .credits-body,
html:root #title-screen .mpage[data-for="legal"] .credits-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding-bottom: 8px;
}
html:root #title-screen .mpage[data-for="credits"] .credits-back,
html:root #title-screen .mpage[data-for="legal"] .credits-back {
  position: static;
  flex: 0 0 auto;
  width: auto;
  margin: 16px calc(-1 * var(--menu-pad)) calc(-1 * var(--menu-pad));
}

html:root #pause-screen.screen[data-from-title="1"] {
  background: rgba(6, 9, 11, .55);
  backdrop-filter: blur(12px) saturate(.85);
  -webkit-backdrop-filter: blur(12px) saturate(.85);
}
html:root #pause-screen[data-from-title="1"] .set-run-only,
html:root #pause-screen[data-from-title="1"] #set-online-note { display: none; }

html:root #pause-screen[data-view="settings"] .panel.pause-panel {
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: min(720px, calc(100dvh - 48px));
  overflow: hidden;
  flex: 0 1 auto;
  align-self: center;
}
html:root #pause-screen[data-view="settings"] .pause-settings {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 20px;
  grid-template-rows: minmax(0, auto) auto;
}
html:root #pause-screen .set-body {
  overflow-y: auto;
  min-height: 0;
  max-height: min(560px, calc(100dvh - 220px));
}
html:root #pause-screen .slider-row {
  grid-template-columns: minmax(104px, 22%) minmax(0, 1fr) 52px;
  gap: 12px 16px;
  padding-block: 10px;
  min-height: 48px;
}
html:root #pause-screen .set-note--tight {
  margin-top: -8px;
  padding-left: calc(22% + 16px);
}
html:root #pause-screen .gear-row { justify-content: flex-start; }
html:root #pause-screen .gear-row .diff-btn {
  width: auto;
  min-width: 160px;
  max-width: 280px;
  flex: 0 0 auto;
}
html:root #pause-screen .pause-ledger:empty { display: none; }

html:root #title-screen .mpage .menu-col.action-bar {
  margin-top: 24px;
  padding-top: 16px;
}

@media (max-width: 800px), (max-height: 560px) {
  html:root #title-screen[data-page="home"] .mpage[data-for="home"] .game-title {
    align-items: center;
  }
  html:root #title-screen #ask-play { padding: 22px 20px 16px; }
  html:root #pause-screen .set-note--tight { padding-left: 0; }
}
@media (max-height: 500px) {
  html:root #title-screen .gt-file { display: none; }
  html:root #title-screen #ask-play .ask-kicker { display: none; }
}
@media (max-height: 580px) {
  html:root #title-screen .gt-file { display: none; }
  html:root #title-screen #ask-play .ask-kicker { display: none; }
  html:root #title-screen #ask-play { padding: 16px 16px 12px; }
  html:root #title-screen[data-page="home"] .mpage[data-for="home"] { gap: 16px; }
}
@media (max-width: 380px) {
  html:root #title-screen .gt-file { display: none; }
}

/* ── 0.33.1: empty status collapses, settings copy shares one edge ─────────
   Origin already shipped the split home. Returning clients could still be
   looking at last week's shell, and Play with others still reserved a trial
   banner whether it had anything urgent to say. Hidden status takes no space,
   question cards hug their content, and settings notes sit on the slider edge. */
html:root #title-screen .home-trial-status[hidden],
html:root #title-screen .home-subscribe[hidden] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 0;
}
html:root #title-screen .mpage[data-for="more"] .ask-card,
html:root #title-screen .mpage[data-for="online"] .ask-card,
html:root #title-screen .mpage[data-for="night"] .ask-card,
html:root #title-screen .mpage[data-for="site"] .ask-card,
html:root #title-screen .mpage[data-for="ready"] .ask-card,
html:root #title-screen .mpage[data-for="coop"] .ask-card {
  height: auto;
  max-height: 100%;
}
html:root #title-screen .mpage[data-for="more"] .action-bar,
html:root #title-screen .mpage[data-for="online"] .action-bar {
  margin-top: 16px;
  padding-top: 14px;
}
html:root #pause-screen[data-view="settings"] .panel.pause-panel {
  text-align: left;
}
html:root #pause-screen .set-note {
  text-align: left;
  letter-spacing: 0;
  opacity: 1;
  color: var(--menu-copy);
  font: 400 13px/1.5 var(--font-ui);
}
html:root #pause-screen .set-note--tight {
  padding-left: 0;
  margin-top: 0;
}
/* ── 0.34: one measure for every menu ──────────────────────────────────────
   8 / 12 / 16 / 24 / 32. Cards hug. Settings scroll instead of clipping.
   Dead chrome (Pricing disclosure, website footer rule, stacked hairlines,
   empty Ready copy) is gone. */

html:root #title-screen,
html:root #pause-screen,
html:root #account-gate,
html:root #quickmatch {
  --menu-space-1: 8px;
  --menu-space-2: 12px;
  --menu-space-3: 16px;
  --menu-space-4: 24px;
  --menu-space-5: 32px;
  --menu-radius: 10px;
}

html:root #title-screen .ask-card {
  padding: var(--menu-pad);
  border-radius: 12px;
}

html:root #title-screen .ask-card-wide {
  padding: var(--menu-pad);
}

html:root #title-screen .ask-kicker {
  margin: 0 0 10px;
}

html:root #title-screen .ask-card .mpage-title {
  margin: 0 0 8px;
}

html:root #title-screen .ask-card :is(.mpage-sublabel, .home-online-price, .ready-recap, .ask-fineprint, .cc-help) {
  margin: 0 0 20px;
  max-width: 42em;
}

html:root #title-screen .ask-fineprint {
  margin: 0 0 20px;
  color: var(--menu-copy);
  font: 400 13px/1.55 var(--font-ui);
  letter-spacing: 0;
  opacity: .88;
}

html:root #title-screen .home-online-more {
  display: none;
}

html:root #title-screen .mpage[data-for="online"] .ask-fineprint {
  margin: 0 0 22px;
}

html:root #title-screen .menu-grid,
html:root #title-screen .mrow {
  gap: 10px;
}

html:root #title-screen .mtile {
  min-height: 88px;
  padding: 18px 20px;
}

html:root #title-screen .mtile .mt-note,
html:root #title-screen .diff-card .dc-line {
  margin-top: 6px;
}

html:root #title-screen .mpage .menu-col.action-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 22px;
  padding-top: 18px;
  border-top: var(--menu-border);
}

html:root #title-screen .mpage .menu-col .mbtn {
  min-height: 48px;
  min-width: 128px;
  padding: 12px 18px;
  font: 600 13px/1 var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
}

html:root #title-screen .mpage .menu-col .mbtn.back {
  background: #ffffff05;
  color: var(--menu-white);
  border: var(--menu-border);
}

html:root #title-screen .mpage .menu-col .mbtn.back:hover,
html:root #title-screen .mpage .menu-col .mbtn.back:focus-visible {
  border-color: #d986564d;
  color: var(--menu-white);
  background: #d9865614;
}

html:root #title-screen #btn-account {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  background: #15191bcc;
  border: var(--menu-border);
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--menu-copy);
}

html:root #title-screen #btn-account:hover,
html:root #title-screen #btn-account:focus-visible {
  color: var(--menu-white);
  border-color: #d986564d;
}

/* Home: photograph, wordmark, deploy card. No website footer bar. */
html:root #title-screen[data-page="home"] .mpage[data-for="home"] {
  margin: 48px 0 96px;
  gap: clamp(36px, 6vw, 88px);
}

html:root #title-screen #ask-play {
  flex: 0 1 460px;
  padding: 28px 28px 22px;
}

html:root #title-screen #ask-play .ask-kicker {
  display: block;
  margin: 0 0 16px;
}

html:root #title-screen #ask-play .mtile {
  min-height: 78px;
  padding: 16px 18px;
}

html:root #title-screen #ask-play .mtile.slim {
  min-height: 78px;
  padding: 16px 18px;
}

html:root #title-screen #ask-play .mtile.slim .mt-name {
  font: 700 calc(23px * var(--ui-scale, 1))/1.2 var(--font-display);
  letter-spacing: .055em;
}

html:root #title-screen #ask-play .mtile.slim .mt-note {
  margin-top: 6px;
  font: 400 13px/1.5 var(--font-ui);
}

html:root #title-screen #ask-play .ask-more {
  min-height: 48px;
  margin-top: 14px;
  padding: 14px 2px 2px;
  border-top: var(--menu-border);
  font: 500 14px/1.4 var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
  color: var(--menu-copy);
}

html:root #title-screen[data-page="home"] .home-chrome-footer {
  left: max(var(--menu-gutter), env(safe-area-inset-left));
  right: max(var(--menu-gutter), env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: auto;
  padding: 0;
  border-top: 0;
  background: none;
  gap: 12px 28px;
}

html:root #title-screen[data-page="home"] .home-chrome-footer :is(.corner-stat, .home-footer-links) {
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: .08em;
  opacity: .82;
}

html:root #title-screen[data-page="home"] .home-footer-links .text-link {
  font-size: 11px;
  min-height: 36px;
}

html:root #title-screen[data-page="home"] #build-tag {
  margin-left: .55em;
  padding: 2px 7px 3px;
  border: var(--menu-border);
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: .1em;
}

/* Online: three equal tiles, price as copy, not a control. */
html:root #title-screen .mpage[data-for="online"] .mtile {
  min-height: 96px;
  padding: 18px 18px 16px;
}

html:root #title-screen .mpage[data-for="online"] .home-subscribe {
  width: 100%;
  min-height: 48px;
  margin: 0 0 16px;
  border-radius: 8px;
}

html:root #title-screen .home-trial-status {
  margin: 0 0 16px;
  padding: 12px 14px;
}

/* Settings & extras: equal cards, one accessibility section, no stacked rules. */
html:root #title-screen .more-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

html:root #title-screen .more-list .mtile {
  min-height: 92px;
  padding: 18px 20px;
}

html:root #title-screen #btn-more-deadnight {
  grid-column: 1 / -1;
  min-height: 84px;
}

html:root #title-screen #predeploy-accessibility {
  margin: 22px 0 0;
  padding: 18px 0 0;
  border: 0;
  border-top: var(--menu-border);
  border-radius: 0;
  background: none;
}

html:root #title-screen #predeploy-accessibility legend {
  float: left;
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
}

html:root #title-screen #predeploy-accessibility .a11y-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  clear: both;
}

html:root #title-screen #predeploy-accessibility .a11y-row {
  min-height: 52px;
  padding: 8px 0;
}

html:root #title-screen #predeploy-accessibility .a11y-row + .a11y-row {
  border-top: 0;
}

html:root #title-screen #predeploy-accessibility .zr-select__native {
  min-height: 44px;
  border: var(--menu-border);
  border-radius: 8px;
  background: #ffffff05;
  color: var(--menu-white);
}

html:root #title-screen .mpage[data-for="more"] .action-bar,
html:root #title-screen .mpage[data-for="online"] .action-bar,
html:root #title-screen .mpage[data-for="night"] .action-bar,
html:root #title-screen .mpage[data-for="site"] .action-bar,
html:root #title-screen .mpage[data-for="ready"] .action-bar,
html:root #title-screen .mpage[data-for="coop"] .action-bar {
  margin-top: 20px;
  padding-top: 16px;
}

/* Difficulty / night / site / join / ready */
html:root #title-screen .mpage[data-for="night"] #diff-grid {
  gap: 10px;
}

html:root #title-screen .mpage[data-for="night"] #diff-grid .diff-card {
  min-height: 84px;
  padding: 18px 20px;
  text-align: left;
}

html:root #title-screen #site-strip {
  gap: 12px;
  width: 100%;
}

html:root #title-screen #site-strip .site-card {
  min-height: 108px;
  padding: 18px 20px;
}

html:root #title-screen .cc-input {
  margin: 0 0 10px;
  padding: 16px 18px;
  min-height: 56px;
  border-radius: 8px;
}

html:root #title-screen .cc-help {
  margin: 0 0 8px;
}

html:root #title-screen .soldier-detail {
  margin: 16px 0 0;
  padding: 16px 18px;
}

html:root #title-screen #callsign-row {
  margin-top: 16px;
}

html:root #title-screen .mpage[data-for="loadout"] .action-bar,
html:root #title-screen .mpage[data-for="treatments"] .action-bar,
html:root #title-screen .mpage[data-for="controls"] .action-bar,
html:root #title-screen .mpage[data-for="lobby"] .action-bar {
  margin-top: 24px;
  padding-top: 16px;
  border-top: var(--menu-border);
}

/* Lobby uses the same card language as the question pages. */
html:root #title-screen .mpage[data-for="lobby"] {
  width: min(920px, calc(100% - 2 * var(--menu-gutter)));
  padding: 28px !important;
  border: var(--menu-border);
  border-radius: 12px;
  background: var(--menu-panel);
  box-shadow: 0 24px 80px #0006;
}

html:root #title-screen .mpage[data-for="lobby"] .mpage-title {
  margin: 0 0 18px;
}

html:root #title-screen .lobby-head,
html:root #title-screen .lobby-roster,
html:root #title-screen .lobby-site {
  gap: 12px;
}

html:root #title-screen .lobby-code-block,
html:root #title-screen .lobby-facts {
  padding: 20px 22px;
}

html:root #title-screen .credits-back {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: var(--menu-border);
}

html:root #title-screen .mpage[data-for="credits"] .credits-back,
html:root #title-screen .mpage[data-for="legal"] .credits-back {
  margin: 16px calc(-1 * var(--menu-pad)) calc(-1 * 4px);
}

/* Settings: hug short tabs, scroll long ones, never clip behind Back. */
html:root #pause-screen[data-view="settings"] .panel.pause-panel {
  display: flex;
  flex-direction: column;
  width: min(var(--menu-col), 100%);
  height: auto !important;
  max-height: min(820px, calc(100dvh - 40px));
  overflow: hidden;
  flex: 0 1 auto;
  align-self: center;
  padding: var(--menu-pad);
  text-align: left;
}

html:root #pause-screen[data-view="settings"] .pause-settings {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin: 18px 0 0;
  gap: 0 28px;
  overflow: hidden;
}

html:root #pause-screen .set-tabs {
  grid-column: 1;
  grid-row: 1;
  gap: 4px;
}

html:root #pause-screen .set-tab {
  min-height: 44px;
  padding: 10px 14px;
}

html:root #pause-screen .set-body {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 0 6px 20px 24px;
  border-left: var(--menu-border);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #8a8678 transparent;
}

html:root #pause-screen .set-panel {
  gap: 12px;
}

html:root #pause-screen .set-head {
  margin: 18px 0 0;
  padding-bottom: 8px;
}

html:root #pause-screen .slider-row {
  grid-template-columns: minmax(108px, 22%) minmax(0, 1fr) 52px;
  gap: 12px 16px;
  min-height: 48px;
  padding-block: 8px;
  margin: 0;
}

html:root #pause-screen .set-note,
html:root #pause-screen .set-note--tight {
  margin: 0;
  padding-left: 0;
  text-align: left;
  color: var(--menu-copy);
  font: 400 13px/1.5 var(--font-ui);
  letter-spacing: 0;
  opacity: 1;
}

html:root #pause-screen .pause-actions.set-back {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  padding: 16px 0 0;
  border-top: var(--menu-border);
}

html:root #pause-screen .set-back .pbtn {
  min-height: 48px;
  min-width: 128px;
  padding: 12px 18px;
}

html:root #pause-screen .gfx-row,
html:root #pause-screen .scare-row,
html:root #pause-screen .cb-row,
html:root #pause-screen .hand-row {
  gap: 10px;
  justify-content: flex-start;
}

html:root #pause-screen .diff-btn {
  min-height: 44px;
  border-radius: 8px;
}

html:root #pause-screen .adaptive-row.zr-check {
  padding: 8px 0;
}

html:root #pause-screen #set-wedge {
  margin: 4px 0 0;
}

html:root #pause-screen[data-view="main"] .panel.pause-panel {
  width: min(640px, 100%);
  padding: 28px 28px 24px;
}

html:root #pause-screen .pause-actions .pbtn {
  min-height: 48px;
  border-radius: 8px;
}

html:root #account-gate .ag-card {
  padding: 28px 28px 24px;
  border-radius: 12px;
}

html:root #account-gate .ag-actions {
  gap: 10px;
  margin-top: 20px;
}

html:root #account-gate .ag-legal {
  margin-top: 16px;
  font: 400 13px/1.55 var(--font-ui);
  color: var(--menu-copy);
}

html:root #quickmatch .qm-panel {
  padding: 28px;
  border-radius: 12px;
}

@media (max-width: 800px), (max-height: 560px) {
  html:root #title-screen .ask-card,
  html:root #title-screen .ask-card-wide,
  html:root #title-screen #ask-play {
    padding: 22px 20px 18px;
  }
  html:root #title-screen .more-list {
    grid-template-columns: 1fr;
  }
  html:root #title-screen #btn-more-deadnight {
    grid-column: auto;
  }
  html:root #title-screen .mpage[data-for="lobby"] {
    padding: 20px !important;
  }
  html:root #pause-screen[data-view="settings"] .panel.pause-panel {
    padding: var(--menu-pad);
    max-height: calc(100dvh - 24px);
  }
  html:root #pause-screen[data-view="settings"] .pause-settings {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 12px;
  }
  html:root #pause-screen .set-tabs {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    flex-wrap: wrap;
  }
  html:root #pause-screen .set-body {
    grid-column: 1;
    grid-row: 2;
    border: 0;
    padding: 0 2px 12px;
  }
  html:root #pause-screen .pause-actions.set-back {
    grid-row: 3;
  }
}

@media (max-height: 580px) {
  html:root #title-screen[data-page="home"] .mpage[data-for="home"] {
    margin: 24px 0 72px;
    gap: 20px;
  }
  html:root #title-screen #ask-play {
    padding: 16px 16px 12px;
  }
  html:root #title-screen #ask-play .mtile,
  html:root #title-screen #ask-play .mtile.slim {
    min-height: 56px;
    padding: 12px 14px;
  }
}

html:root #title-screen .mpage[data-for="online"] .home-online-price { margin: 0 0 6px; }
html:root #title-screen .mpage[data-for="online"] .ask-fineprint { margin: 0 0 20px; }

@media (max-width: 800px) {
  html:root #title-screen[data-page="home"] .mpage[data-for="home"] {
    margin: 12px 0 40px;
    gap: 14px;
    max-height: calc(100dvh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  html:root #title-screen #ask-play {
    padding: 16px 16px 12px;
  }
  html:root #title-screen #ask-play .mtile,
  html:root #title-screen #ask-play .mtile.slim {
    min-height: 52px;
    padding: 10px 14px;
  }
  html:root #title-screen #ask-play .mtile .mt-note {
    margin-top: 2px;
  }
  html:root #title-screen #ask-play .ask-more {
    min-height: 44px;
    margin-top: 8px;
    padding-top: 10px;
  }
  html:root #title-screen[data-page="home"] .home-chrome-footer {
    bottom: max(10px, env(safe-area-inset-bottom));
  }
}
@media (max-width: 800px) and (max-height: 700px) {
  html:root #title-screen #ask-play .mtile .mt-note {
    display: none;
  }
  html:root #title-screen[data-page="home"] .mpage[data-for="home"] {
    margin: 8px 0 32px;
    gap: 10px;
  }
  html:root #title-screen #ask-play {
    padding: 14px 14px 10px;
  }
}

/* ── 0.34.1: documents sit above Back; empty facts stay empty ─────────────── */
html:root #title-screen[data-page="credits"] .mpage[data-for="credits"],
html:root #title-screen[data-page="legal"] .mpage[data-for="legal"] {
  height: calc(100dvh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height: calc(100dvh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  min-height: 0;
  overflow: hidden;
}
html:root #title-screen .mpage[data-for="credits"] .ask-card,
html:root #title-screen .mpage[data-for="legal"] .ask-card {
  min-height: 0;
  height: 100%;
  max-height: 100%;
}
html:root #title-screen .mpage[data-for="credits"] .credits-body,
html:root #title-screen .mpage[data-for="legal"] .credits-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding-bottom: 24px;
}
html:root #title-screen .mpage[data-for="credits"] .credits-back,
html:root #title-screen .mpage[data-for="legal"] .credits-back {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  margin: 0 calc(-1 * var(--menu-pad)) calc(-1 * var(--menu-pad));
  padding: 16px var(--menu-pad) 20px;
  background: #101315;
}
html:root #title-screen .ready-recap:empty,
html:root #title-screen .sd-perk:empty {
  display: none;
  margin: 0;
}
html:root #pause-screen .set-body {
  padding-bottom: 32px;
}

/* ── 0.34.2: settings scroll for real, operators pill, one-button Back ──
   Display still painted Screen shake through Back because the panel's
   height:auto never gave the body a bounded row to scroll in. Operators
   lost its pill when the footer was flattened. A lone Back sat as a
   stub on the left of an otherwise empty rail. */
html:root #pause-screen[data-view="settings"] .panel.pause-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: auto !important;
  max-height: min(760px, calc(100dvh - 48px));
  overflow: hidden;
}
html:root #pause-screen[data-view="settings"] .pause-panel > h2 {
  flex: 0 0 auto;
}
html:root #pause-screen[data-view="settings"] .pause-settings {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
}
html:root #pause-screen .set-body {
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 36px;
}
html:root #pause-screen .pause-actions.set-back {
  flex: 0 0 auto;
}

html:root #title-screen[data-page="home"] .home-chrome-footer .live-presence {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: max(var(--menu-edge, var(--menu-gutter)), env(safe-area-inset-right));
  left: auto;
  bottom: auto;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px 0 10px;
  border: var(--menu-border);
  border-radius: 999px;
  background: #15191be8;
  box-shadow: 0 10px 28px #0007;
  color: var(--menu-copy);
  font: 700 10px/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

html:root #title-screen .mpage .menu-col.action-bar:not(:has(.mbtn.go)) .mbtn.back {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
}

html:root #title-screen #predeploy-accessibility .a11y-scare {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
html:root #title-screen #predeploy-accessibility .zr-select {
  margin-left: auto;
  width: min(220px, 52%);
}

html:root #title-screen .mt-note:empty,
html:root #title-screen .sd-blurb:empty {
  display: none;
  margin: 0;
}

html:root #title-screen .mpage[data-for="credits"] .credits-body,
html:root #title-screen .mpage[data-for="legal"] .credits-body {
  padding-bottom: 32px;
}

@media (max-width: 800px), (max-height: 560px) {
  html:root #pause-screen[data-view="settings"] .panel.pause-panel {
    max-height: calc(100dvh - 24px);
  }
  html:root #pause-screen[data-view="settings"] .pause-settings {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  html:root #pause-screen .set-tabs {
    grid-column: 1;
    grid-row: 1;
  }
  html:root #pause-screen .set-body {
    grid-column: 1;
    grid-row: 2;
  }
  html:root #pause-screen .pause-actions.set-back {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

/* ── 0.35.0: settings hug, one padding rhythm, leftover pitch gone ─────
   Audio opened an 1120×630 frame around five sliders because the settings
   grid row was 1fr inside a panel that could grow. Short tabs hug. Display
   still scrolls inside the body, above Back. Gameplay no longer carries a
   $5 pitch that already lives on Play with others. */
html:root #pause-screen[data-view="settings"] .panel.pause-panel {
  min-height: 0 !important;
  height: auto !important;
  max-height: min(760px, calc(100dvh - 48px));
  justify-content: flex-start !important;
  align-items: stretch;
  align-self: center;
}
html:root #pause-screen[data-view="settings"] .pause-settings {
  flex: 0 1 auto;
  min-height: 0;
  grid-template-rows: minmax(0, auto) auto;
}
html:root #pause-screen .set-body {
  max-height: min(560px, calc(100dvh - 260px));
  padding-bottom: 12px;
}
html:root #pause-screen .set-head {
  margin: 16px 0 0;
  padding-bottom: 8px;
}
html:root #pause-screen .set-panel {
  gap: 8px;
}
html:root #pause-screen .slider-row {
  min-height: 44px;
  padding-block: 8px;
}

html:root #title-screen .ask-card,
html:root #title-screen .ask-card-wide {
  padding: var(--menu-pad);
}
html:root #title-screen #ask-play {
  padding: 28px;
}
html:root #title-screen .ask-kicker {
  margin: 0 0 8px;
}
html:root #title-screen .ask-card .mpage-title {
  margin: 0 0 12px;
}
html:root #title-screen .ask-card :is(.mpage-sublabel, .home-online-price, .ready-recap, .ask-fineprint, .cc-help) {
  margin: 0 0 8px;
}
html:root #title-screen .mpage[data-for="online"] .home-online-price {
  margin: 0 0 8px;
}
html:root #title-screen .mpage[data-for="online"] .ask-fineprint {
  margin: 0 0 24px;
}
html:root #title-screen .menu-grid,
html:root #title-screen .mrow,
html:root #title-screen .more-list {
  gap: 12px;
}
html:root #title-screen .mpage .menu-col.action-bar {
  margin-top: 24px;
  padding-top: 16px;
}
html:root #title-screen #ask-play .ask-more {
  margin-top: 16px;
  padding: 16px 0 0;
}

html:root #pause-screen[data-from-title="1"] #set-online-note,
html:root #pause-screen #set-online-note {
  display: none !important;
}

@media (max-width: 800px), (max-height: 560px) {
  html:root #pause-screen[data-view="settings"] .pause-settings {
    flex: 1 1 auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  html:root #pause-screen .set-body {
    max-height: none;
    padding-bottom: 12px;
  }
  html:root #title-screen #ask-play {
    padding: 20px;
  }
}

/* Landscape phones are 844×390: the 28px home padding and 12px tile gaps
   stacked the deploy card past the photograph. Notes drop, gaps collapse. */
@media (max-height: 560px) {
  html:root #title-screen #ask-play {
    padding: 14px 16px 12px;
  }
  html:root #title-screen #ask-play .mtile,
  html:root #title-screen #ask-play .mtile.slim {
    min-height: 48px;
    padding: 10px 14px;
  }
  html:root #title-screen #ask-play .mtile .mt-note {
    display: none;
  }
  html:root #title-screen #ask-play .ask-more {
    min-height: 44px;
    margin-top: 8px;
    padding-top: 8px;
  }
  html:root #title-screen .menu-grid,
  html:root #title-screen .mrow {
    gap: 8px;
  }
  html:root #title-screen[data-page="home"] .mpage[data-for="home"] {
    margin: 8px 0 32px;
    gap: 10px;
  }
}