/* Launcher — GTA V-style loading screen with an in-place options column.
   Two-layer key art, wide-tracked caps in the game's own Chalet face, a vertical menu
   on the left and the device readout bottom-right. Settings replace the menu in the
   same column instead of opening a modal. Presentation only. */

@font-face {
  font-family: 'MenuChalet';
  src: url('/b/8b0b5899ed/title/chalet.woff') format('woff');
  font-display: swap;
}

:root {
  --mn-ink: #ffffff;
  --mn-ink-dim: rgba(255, 255, 255, .88);
  --mn-ink-faint: rgba(255, 255, 255, .78);
  --mn-line: rgba(255, 255, 255, .22);
  --mn-amber: #f5c451;
  --mn-ease: cubic-bezier(.22, .61, .36, 1);
  --mn-font: 'MenuChalet', 'Chalet', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;

  /* The bundled sheets define the accent as a green tint and the touch editor
     inherits it, which is why its panel and buttons came out green. Redefining the
     accent here re-tints every stock rule and every touch.js rule at once. */
  /* These three carry !important because two bundled sheets also declare --accent on
     :root and win the cascade regardless of load order; asserting here is the only
     reliable way to re-tint every stock rule and every touch.js control at once. */
  --accent: #f5c451 !important;
  --accent2: #ffd873 !important;
  --accent-ink: #0a0a0a !important;
}

html { background: #000; height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: #000;
  color: var(--mn-ink);
  font-family: var(--mn-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------------------------------------------------------------- key art */
/* Two layers: the Los Santos skyline, and the character cut out in front of it. */
.mn-art {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background: #05070a;
}

.mn-art-bg {
  position: absolute;
  inset: 0;
  background: url('/b/8b0b5899ed/title/art/ls5_background.webp') 50% 46% / cover no-repeat;
  /* The source painting ships with a black border baked into its outer ~3%, which read
     as a hard plate edge. Zooming past it crops the border out entirely. */
  transform: scale(1.08);
  animation: mn-drift 60s ease-in-out infinite alternate;
}

/* Text used to sit straight on the painting, so its contrast was whatever the artwork
   happened to be behind each glyph - measured as low as 1.55:1 against a bright patch of
   sky. This scrim is heaviest on the left, where the menu and the settings panes live, and
   fades out to the right so the skyline still reads as art. */
.mn-art::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .74) 42%, rgba(0, 0, 0, .46) 66%, rgba(0, 0, 0, .16) 100%),
    linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 42%);
}

@keyframes mn-drift {
  0%   { transform: scale(1.08) translate3d(0, 0, 0); }
  100% { transform: scale(1.11) translate3d(-.7%, -.5%, 0); }
}

/* The skyline is bright in the upper right, so the menu gets its own darkness: a left
   scrim for the type, a bottom scrim for the list, and a soft vignette. */
.mn-scrim {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .6) 24%, rgba(0, 0, 0, .12) 52%, transparent 72%),
    linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .3) 30%, transparent 56%),
    radial-gradient(125% 105% at 46% 40%, transparent 46%, rgba(0, 0, 0, .42) 100%);
}

.mn-art::before {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background:
    linear-gradient(200deg, rgba(255, 168, 116, .1) 0%, transparent 46%, rgba(92, 72, 148, .14) 100%),
    radial-gradient(90% 70% at 70% 30%, rgba(255, 190, 140, .06), transparent 70%);
  mix-blend-mode: soft-light;
}

.mn-art::after {
  content: "";
  position: absolute;
  right: -6%;
  bottom: -8%;
  width: 58%;
  height: 88%;
  pointer-events: none;
  background: radial-gradient(56% 50% at 60% 60%, rgba(0, 0, 0, .42), transparent 74%);
}

@media (prefers-reduced-motion: reduce) {
  .mn-art-bg { animation: none; }
}

/* ---------------------------------------------------------------- layout */
.mn-menu {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  box-sizing: border-box;
  min-height: 100vh;
  padding: clamp(20px, 3.2vh, 40px) clamp(22px, 4.4vw, 72px) clamp(22px, 3.4vh, 42px);
}

/* ---------------------------------------------------------------- title */
.mn-top { display: flex; align-items: flex-start; }

.mn-title h1 {
  margin: 0;
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--mn-ink);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .95);
}

.mn-title p {
  margin: 7px 0 0;
  font-size: clamp(9.5px, .82vw, 11.5px);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--mn-ink-faint);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .95);
}

/* ---------------------------------------------------------------- columns */
.mn-body {
  display: grid;
  grid-template-columns: minmax(0, 30rem);
  align-items: stretch;
  gap: 0;
  transition: grid-template-columns .3s var(--mn-ease);
}

/* settings need more width than the menu list does */
.mn-body:has(.mn-pane:not([hidden])) {
  grid-template-columns: minmax(0, 44rem);
}

/* and the device readout steps out of the way while they are open */
.mn-column { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; min-height: 0; }

/* The bundled sheets still carry the old two-column footer's flex order - they push the Play
   button after everything with `#start { order: 1 }`. That layout is gone; the column runs in
   plain DOM order so Play sits above the readout, as it reads on screen. */
.mn-column #start { order: 0; }
.mn-column #launch-note { order: 0; }

/* ---------------------------------------------------------------- menu list */
.mn-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mn-item {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 14px 8px 18px;
  border: 0;
  border-radius: 1px;
  background: none;
  box-shadow: none;
  color: var(--mn-ink-dim);
  font: 400 clamp(17px, 1.85vw, 25px)/1.15 var(--mn-font);
  letter-spacing: .13em;
  text-align: left;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 2px 14px rgba(0, 0, 0, .95);
  transition: color .16s var(--mn-ease), background .16s var(--mn-ease), padding .16s var(--mn-ease);
}

.mn-item > input { position: absolute; opacity: 0; pointer-events: none; }

.mn-item:hover,
.mn-item:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  outline: none;
}

/* the selected row inverts to white with black type, which is the game's own idiom */
.mn-item:has(> input:checked) {
  color: #0a0a0a;
  background: #fff;
  font-weight: 600;
  text-shadow: none;
}

.mn-sub {
  display: block;
  margin-top: 1px;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: inherit;
  opacity: .85;
  text-transform: none;
}

.mn-item:has(> input:checked) .mn-sub { opacity: .78; font-weight: 400; }

.mn-sep {
  height: 1px;
  margin: 9px 18px;
  background: linear-gradient(to right, var(--mn-line), transparent 78%);
  border: 0;
}

.mn-item.mn-secondary {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 6px 14px 6px 18px;
  font-size: clamp(14px, 1.32vw, 17px);
  font-weight: 400;
  letter-spacing: .15em;
  color: var(--mn-ink-faint);
}

.mn-item.mn-secondary:hover { color: #fff; background: rgba(255, 255, 255, .1); }

/* ---------------------------------------------------------------- play */
.mn-play {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 13px;
  padding: 15px 20px;
  border: 0;
  border-radius: 1px;
  background: var(--mn-amber);
  color: #0a0a0a;
  font: 700 clamp(16px, 1.6vw, 20px)/1 var(--mn-font);
  letter-spacing: .19em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 34px -12px rgba(0, 0, 0, .9);
  transition: background .18s var(--mn-ease), transform .18s var(--mn-ease);
}

.mn-play:hover { background: #ffd873; transform: translateY(-1px); }
.mn-play:active { transform: translateY(0); }
.mn-play:disabled { background: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .45); cursor: not-allowed; transform: none; }
.mn-play > span { font-size: 1.1em; letter-spacing: 0; }

/* ---------------------------------------------------------------- new story */
.mn-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 11px 0 0;
  padding: 0 18px;
  box-sizing: border-box;
  color: var(--mn-ink-dim);
  font: 400 11.5px/1.35 var(--mn-font);
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

.mn-toggle[hidden] { display: none; }
.mn-toggle > input { position: absolute; opacity: 0; pointer-events: none; }

.mn-box {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 1px;
  background: rgba(0, 0, 0, .45);
  transition: background .16s var(--mn-ease), border-color .16s var(--mn-ease);
}

.mn-box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #0a0a0a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .16s var(--mn-ease);
}

.mn-toggle:hover { color: #fff; }
.mn-toggle > input:checked + .mn-box { background: #fff; border-color: #fff; }
.mn-toggle > input:checked + .mn-box::after { transform: rotate(45deg) scale(1); }
.mn-toggle > input:checked ~ .mn-label { color: #fff; }

/* ---------------------------------------------------------------- status */
.mn-status {
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-sizing: border-box;
  /* Hugs its own content and sits at the bottom right of the menu column, instead of
     stretching across a whole grid column with empty space in it. */
  flex: 0 1 auto;
  /* Wide enough that the labels fit two rows instead of three: fewer rows means a shorter
     panel, and because it is bottom-aligned the box - and its bar - sit lower. */
  width: clamp(300px, 34vw, 460px);
  max-width: 100%;
  margin: 0;
  padding: 8px 12px 9px;
  text-align: right;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 2px 12px rgba(0, 0, 0, .8);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 3px;
  background: rgba(0, 0, 0, .66);
}

.mn-status-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mn-ink-faint);
}

.mn-status-pct {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  letter-spacing: .1em;
  color: #fff;
}

.mn-bar { height: 1px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.mn-bar > i { display: block; width: 0; height: 100%; background: rgba(255, 255, 255, .9); transition: width .45s var(--mn-ease); }

.mn-status-note {
  margin: 0;
  font: 400 11.5px/1.5 var(--mn-font);
  letter-spacing: .05em;
  color: var(--mn-ink-faint);
}

.mn-status-rows {
  /* Filled down two rows then across, so five labels occupy two lines rather than three. */
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: max-content;
  justify-content: end;
  gap: 1px 20px;
  font: 400 10px/1.5 var(--mn-font);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mn-ink-faint);
}

.mn-status-rows span { white-space: nowrap; }

/* ---------------------------------------------------------------- settings panes
   The options replace the menu in the same column, so the composition never breaks. */
/* A settings pane is a surface, not artwork: the skyline behind it is bright enough that
   a faint label measured 2.08:1 there. The panel makes every colour inside dependable. */
.mn-pane {
  display: block;
  padding: 16px 18px 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 3px;
  background: rgba(0, 0, 0, .72);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45);
}
.mn-pane[hidden] { display: none; }

/* A pane runs the full height of the column, down to the rule above the footer, instead
   of stopping short at a fixed max-height and leaving the artwork showing beneath it. */
.mn-pane:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.mn-pane:not([hidden]) .mn-pane-body {
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
}

/* With a pane open the launcher stays one screen tall: the pane scrolls inside itself
   rather than pushing the footer rule past the bottom of the window. */
.mn-menu:has(.mn-pane:not([hidden])) { max-height: 100vh; }
.mn-menu:has(.mn-pane:not([hidden])) .mn-body { min-height: 0; }

.mn-pane-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 10px;
}

.mn-back {
  flex: none;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 1px;
  background: rgba(0, 0, 0, .45);
  color: var(--mn-ink-dim);
  font: 600 10px/1 var(--mn-font);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .16s var(--mn-ease), border-color .16s var(--mn-ease);
}

.mn-back:hover { color: #fff; border-color: #fff; }

.mn-pane-head h2 {
  margin: 0;
  font: 400 clamp(16px, 1.7vw, 22px)/1.1 var(--mn-font);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .95);
}

.mn-pane-sub {
  margin: 2px 0 0;
  font: 400 10.5px/1.4 var(--mn-font);
  letter-spacing: .12em;
  color: var(--mn-ink-faint);
}

.mn-pane-body {
  max-height: min(62vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .28) transparent;
}

.mn-pane-body::-webkit-scrollbar { width: 5px; }
.mn-pane-body::-webkit-scrollbar-track { background: transparent; }
.mn-pane-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .38); border-radius: 3px; }
.mn-pane-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .55); }

.mn-pane-body h3 {
  margin: 14px 0 8px;
  font: 600 10px/1 var(--mn-font);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mn-ink-dim);
}

.mn-pane-body h3:first-child { margin-top: 0; }

.mn-pane-body p,
.mn-pane-body .detail {
  margin: 0 0 10px;
  max-width: 62ch;
  font: 400 11.5px/1.6 var(--mn-font);
  letter-spacing: .025em;
  color: var(--mn-ink-faint);
}

.mn-pane-body small,
.mn-pane-body small.detail {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  line-height: 1.55;
  letter-spacing: .02em;
  text-transform: none;
  color: rgba(255, 255, 255, .80);
}

.mn-pane-body label > select + small { margin-top: 5px; }

/* the bundled settings-grid class, restyled for this column */
.mn-pane-body .settings-grid,
.mn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 10px 12px;
  margin-bottom: 12px;
}

.mn-pane-body select,
.mn-pane-body input:not([type="checkbox"]):not([type="file"]) {
  width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
}

.mn-pane-body .settings-grid > label,
.mn-grid > label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 600 9px/1 var(--mn-font);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mn-ink-faint);
}

.mn-pane-body fieldset {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0;
  background: none;
}

.mn-pane-body legend {
  padding: 0;
  font: 600 9px/1 var(--mn-font);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mn-ink-faint);
}

/* presets and action rows inside a pane */
.mn-pane-body .graphics-presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 7px;
  margin: 0 0 12px;
}

.mn-pane-body .graphics-presets > button {
  min-height: 34px;
  justify-content: flex-start;
  text-align: left;
  letter-spacing: .1em;
}

/* reset is an action, not a preset: set it apart from the quality choices */
.mn-pane-body .graphics-presets > #graphics-preset-default {
  margin-left: auto;
  border-color: rgba(255, 255, 255, .14);
  background: none;
  color: var(--mn-ink-faint);
  letter-spacing: .14em;
}

.mn-pane-body .graphics-presets > #graphics-preset-default:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.mn-pane-body details { margin: 0 0 9px; }

.mn-pane-body summary {
  padding: 6px 0;
  font: 600 10px/1.3 var(--mn-font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mn-ink-dim);
  cursor: pointer;
}

/* ---------------------------------------------------------------- controls */
.mn-menu select,
.mn-menu input[type="text"],
.mn-menu input[type="password"],
.mn-menu input[type="number"],
.mn-menu input:not([type]) {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  min-height: 32px;
  padding: 6px 28px 6px 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 2px;
  background-color: rgba(0, 0, 0, .5);
  color: #fff;
  font: 400 12px/1.2 var(--mn-font);
  letter-spacing: .03em;
}

.mn-menu select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1.5 5 5.5 9 1.5' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 10px 7px;
}

.mn-menu select:hover, .mn-menu input:hover { border-color: rgba(255, 255, 255, .45); }
.mn-menu option { background: #101010; color: #fff; }

.mn-menu button,
.mn-menu .button,
.mn-menu a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  min-height: 32px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 2px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: 600 10.5px/1.2 var(--mn-font);
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s var(--mn-ease), border-color .16s var(--mn-ease);
}

.mn-menu button:hover, .mn-menu .button:hover, .mn-menu a.button:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .5);
}

.mn-menu button:disabled, .mn-menu .button.disabled, .mn-menu button.disabled { opacity: .58; cursor: not-allowed; }

/* the bundled sheets give several buttons a green gradient; none of them should have it */
.mn-menu .mn-pane button,
.mn-menu .mn-touch button,
.mn-menu #launcher-touch-settings button,
.mn-menu #launcher-keyboard-settings button {
  background-image: none;
}

.mn-menu button:focus-visible,
.mn-menu select:focus-visible,
.mn-menu input:focus-visible,
.mn-menu a:focus-visible,
.mn-menu summary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.mn-menu .link-button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mn-ink-faint);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mn-menu .link-button:hover { background: none; color: #fff; }

.mn-actions { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 0; }

/* ---------------------------------------------------------------- disclosure */
/* Footer row: the saves disclosure on the left and the device readout on the right, both
   under the rule, the way the loading screen puts its footer. */
.mn-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: 11px;
}

.mn-more {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.mn-more > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0 5px 18px;
  color: var(--mn-ink-faint);
  font: 600 10px/1 var(--mn-font);
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.mn-more > summary::-webkit-details-marker { display: none; }

.mn-more > summary::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  font: 12px/1 var(--mn-font);
}

.mn-more[open] > summary::before { content: "\2212"; }
.mn-more > summary:hover { color: #fff; }

.mn-more-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  padding: 14px 0 4px;
}

.mn-more-body h3 {
  margin: 0 0 8px;
  font: 600 10px/1 var(--mn-font);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mn-ink-dim);
}

.mn-more-body p {
  margin: 0 0 9px;
  font: 400 11.5px/1.5 var(--mn-font);
  letter-spacing: .03em;
  color: var(--mn-ink-faint);
}

.mn-more-body strong { color: var(--mn-ink-dim); font-weight: 600; }

/* ---------------------------------------------------------------- hidden contract */
/* Kept in the DOM because scripts read them; never rendered. */
.mode-panel.legacy-mode,
#mods-open,
#single-mode-choice,
#map-mode-choice,
#multiplayer-open,
#lan-certificate-advanced,
#startup-note,
#ui-appearance-open,
#troubleshooting-open {
  display: none !important;
}

#play-feedback:empty { display: none; }

#play-feedback {
  margin: 9px 0 0;
  font: 400 11px/1.5 var(--mn-font);
  letter-spacing: .05em;
  color: var(--mn-amber);
}

#lan-certificate-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(0, 0, 0, .45);
}

#lan-certificate-controls[hidden] { display: none; }
#lan-certificate-controls p { margin: 0; flex: 1 1 100%; font-size: 10.5px; color: var(--mn-ink-faint); }

#mp-simple { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
#mp-simple[hidden] { display: none; }

.access-code-field > label {
  display: block;
  margin-bottom: 4px;
  font: 600 9px/1 var(--mn-font);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mn-ink-faint);
}

.access-code-row { display: flex; gap: 6px; }
.access-code-row input { flex: 1 1 auto; min-width: 0; }
#mp-simple p { margin: 0; font-size: 10.5px; color: var(--mn-ink-faint); }

.cache-option {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 400 10.5px/1.4 var(--mn-font);
  letter-spacing: .08em;
  color: var(--mn-ink-faint);
  cursor: pointer;
}

/* ---------------------------------------------------------------- stock overrides
   The bundled sheets style #start and the two appearance buttons for the old card
   layout; those rules are stronger than a class selector, so reset them here. */
.mn-menu #start {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  z-index: auto;
  width: 100%;
  min-height: 0;
  box-shadow: none;
  background: var(--mn-amber);
  border: 0;
  border-radius: 1px;
  color: #0a0a0a;
  font: 700 clamp(16px, 1.6vw, 20px)/1 var(--mn-font);
  letter-spacing: .19em;
}

.mn-menu #language-open,
.mn-menu #ui-appearance-open {
  min-height: 0;
  padding: 6px 14px 6px 18px;
  border: 0;
  border-radius: 1px;
  background: none;
  box-shadow: none;
  color: var(--mn-ink-faint);
  font: 400 clamp(14px, 1.32vw, 17px)/1.15 var(--mn-font);
  font-weight: 400;
  letter-spacing: .15em;
  text-align: left;
  justify-content: flex-start;
  width: 100%;
}

.mn-menu #language-open:hover,
.mn-menu #ui-appearance-open:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

/* launcher.css paints this button with a dark-green gradient and a green border; put it
   on the same glass as everything else. */
.mn-menu #launcher-touch-settings > button {
  min-height: 0;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 2px;
  background: rgba(255, 255, 255, .08);
  box-shadow: none;
  color: #fff;
  font: 600 10.5px/1.2 var(--mn-font);
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 600;
}

.mn-menu #launcher-touch-settings > button:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .5);
}

/* every row reads left-aligned; the stock sheets centre some of them */
.mn-menu .mn-item,
.mn-menu .mn-item.mn-secondary {
  text-align: left;
  justify-content: flex-start;
}

.mn-menu #start:hover { background: #ffd873; }
.mn-menu #start:disabled { background: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .45); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .mn-body { grid-template-columns: 1fr; align-items: start; gap: 18px; }
  .mn-status { min-width: 0; width: auto; text-align: left; align-self: stretch; }
  .mn-status-head, .mn-status-rows { justify-content: flex-start; }
  /* a fixed two-row grid cannot fit a phone; let the labels wrap normally instead */
  .mn-status-rows { grid-auto-flow: row; grid-template-rows: none; grid-auto-columns: auto; gap: 1px 12px; }
  .mn-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  /* Narrow screens scroll the page instead: pinning the launcher to one viewport height and
     filling a pane to the footer rule only makes sense when there is height to fill. */
  .mn-menu:has(.mn-pane:not([hidden])) { max-height: none; }
  .mn-pane:not([hidden]) { flex: 0 1 auto; }
  .mn-pane:not([hidden]) .mn-pane-body { flex: 0 1 auto; max-height: none; }
  .mn-scrim {
    background:
      linear-gradient(to top, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .72) 34%, rgba(0, 0, 0, .3) 68%, transparent 100%),
      linear-gradient(to right, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .35) 60%, transparent 100%);
  }
  .mn-pane-body { max-height: none; overflow: visible; }
}

@media (max-width: 560px) {
  .mn-menu { padding: 15px 15px 20px; gap: 16px; }
  .mn-item { padding: 7px 11px 7px 15px; }
  .mn-item:has(> input:checked) { padding-left: 18px; }
  .mn-play { padding: 13px 16px; }
}

/* short viewports must not scroll */
@media (max-height: 640px) {
  .mn-menu { gap: 10px; padding-top: 12px; padding-bottom: 12px; }
  .mn-item { font-size: clamp(14px, 1.45vw, 19px); padding-top: 5px; padding-bottom: 5px; }
  .mn-item.mn-secondary { font-size: 11.5px; padding-top: 4px; padding-bottom: 4px; }
  .mn-sep { margin: 5px 18px; }
  .mn-play { margin-top: 7px; padding: 11px 16px; }
  .mn-status-note, .mn-status-rows { display: none; }
}

@media (forced-colors: active) {
  .mn-item, .mn-play { border: 1px solid CanvasText; }
}

/* ---------------------------------------------------------------- touch workspace
   Full-screen in place of a separate setup page. Same three tools, no navigation. */
.mn-touch {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: clamp(12px, 2vh, 20px) clamp(12px, 2.4vw, 28px);
  background: #05070a;
  background-image: radial-gradient(80% 60% at 50% 0%, rgba(58, 74, 96, .35), transparent 70%);
  font-family: var(--mn-font);
  color: var(--mn-ink);
}

.mn-touch[hidden] { display: none; }

.mn-touch-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 2px;
  background: rgba(0, 0, 0, .45);
}

.mn-touch-stage {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(255, 255, 255, .18);
  border-radius: 2px;
  background: rgba(255, 255, 255, .02);
  font: 400 12px/1.7 var(--mn-font);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, .32);
}

body.mn-touch-editing .mn-touch-stage { display: none; }

.mn-touch-bar > #mn-touch-status {
  flex: 1 1 240px;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .05em;
  color: var(--mn-ink-faint);
}

body.mn-touch-editing .mn-touch-bar { display: none; }

/* the pad editor owns the screen while it is open */
body.mn-touch-open #tc-panel {
  top: max(60px, 8vh) !important;
  bottom: 0 !important;
  height: auto !important;
  left: auto !important;
  right: 0 !important;
  width: min(100vw, 460px) !important;
}

.mn-touch dialog#mn-viewport-dialog {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #05070a;
  color: var(--mn-ink);
  font-family: var(--mn-font);
}

.mn-touch dialog#mn-viewport-dialog::backdrop { background: #000c; }

.mn-touch dialog#mn-viewport-dialog[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 36%);
}

.mn-vp-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 16px;
}

.mn-vp-stage > p {
  margin: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mn-ink-faint);
}

#mn-screen-fit { flex: 1; min-height: 0; min-width: 0; display: grid; place-items: center; }

#mn-screen-preview {
  position: relative;
  flex: none;
  background: #02040a;
  outline: 1px solid rgba(255, 255, 255, .18);
  overflow: hidden;
}

#mn-screen-viewport {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .1);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}

.mn-vp-options {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  border-left: 1px solid rgba(255, 255, 255, .12);
}

.mn-vp-options h2 {
  margin: 0 0 6px;
  font: 400 15px/1.1 var(--mn-font);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.mn-vp-options > p {
  margin: 0 0 12px;
  font: 400 11px/1.55 var(--mn-font);
  letter-spacing: .03em;
  color: var(--mn-ink-faint);
}

.mn-vp-options > label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 0 14px;
  font: 600 9px/1 var(--mn-font);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mn-ink-faint);
}

.mn-vp-options input[type="range"] {
  appearance: auto;
  -webkit-appearance: auto;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  accent-color: var(--mn-amber);
}

.mn-vp-options output { font-variant-numeric: tabular-nums; color: var(--mn-ink-dim); }

.mn-vp-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }

body.mn-touch-vp .mn-touch-bar { visibility: hidden; }

@media (max-width: 820px) {
  .mn-touch dialog#mn-viewport-dialog[open] {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 42fr) minmax(0, 58fr);
  }
  .mn-vp-options { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
}