/* The game menu (Escape, menu.js): rows of words (`.item`); the one under the pointer or the keyboard
   gets a wash of the accent and a diamond. */
#game-menu {
  position: fixed; width: min(420px, calc(100vw - 48px)); max-height: calc(100dvh - 48px);
  overflow-y: auto; padding: 28px 26px 22px; font: 17px/1.5 var(--face); transition: width 0.15s ease;
  &:has([data-menu-controls]:not([hidden])) { width: min(960px, calc(100vw - 48px)); }
  &::backdrop { background: radial-gradient(90% 80% at 50% 45%, var(--scrim), var(--veil)); backdrop-filter: blur(3px); }
  h2 { margin: 0 0 12px 8px; font-size: 13px; }
  .item {
    position: relative; isolation: isolate; display: block; width: 100%; padding: 8px 12px 8px 32px;
    border: 0; background: none; color: var(--muted); font: 500 21px/1.35 var(--face); text-align: left; cursor: pointer;
    transition: color 0.15s, translate 0.35s var(--ease-spring);
    &[hidden] { display: none; }
    &::before { content: ""; position: absolute; left: 4px; right: 30%; top: 9px; bottom: 9px; z-index: -1;
      background: linear-gradient(90deg, var(--accent) 0%, var(--accent-shadow) 60%, transparent);
      filter: url(#ink-brush); opacity: 0; transition: opacity 0.15s; }
    &::after { content: ""; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px;
      translate: 0 -50%; rotate: 45deg; background: var(--accent-hi); box-shadow: 0 0 10px var(--accent-hi);
      opacity: 0; transition: opacity 0.15s; }
    &:hover, &:focus-visible { color: var(--paper); outline: none; }
    &:hover::before, &:focus-visible::before { opacity: 0.55; }
    &:hover::after, &:focus-visible::after { opacity: 1; }
    &:active { translate: 4px 0; transition-duration: 0.15s, 0.06s; }
    &:active::before { opacity: 0.85; }
  }
  [data-resume] { color: var(--paper); }
  [data-sign-out]:hover, [data-sign-out]:focus-visible { color: var(--danger); }
  [data-sign-out]::before { background: linear-gradient(90deg, var(--danger), transparent); }
  [data-sign-out]::after { background: var(--danger); box-shadow: none; }
  hr { margin: 8px 8px; border: 0; height: 1px; background: var(--line); }
  .hint { margin: 16px 8px 0; color: var(--faint); font-size: 15px; font-style: italic; }
  @media (prefers-reduced-motion: reduce) { .item:active { translate: none; } }

  /* The menu's Controls page: the controls card's lists. */
  [data-menu-controls] .groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px 28px; margin: 8px 0; }
  [data-menu-controls] .keys { font-size: 15px; }

  /* The options: a wide sheet whose title, tabs and foot stand still while only the settings
     scroll, and that only where the window is too short for them. The tabs and the preset are
     segmented wells; settings are rows grouped under small-capital heads in two columns (one on a
     narrow screen). Each tab is as tall as its settings, and the sheet hangs from a fixed top (the
     tallest tab, Graphics, about centred), so the tabs hold still between tabs. */
  &:has([data-menu-options]:not([hidden])) { --top: max(24px, calc(50dvh - 390px));
    width: min(920px, calc(100vw - 48px)); overflow: hidden; }
  &[open]:has([data-menu-options]:not([hidden])) { display: flex; flex-direction: column;
    margin-block: 0; top: var(--top); bottom: auto; max-height: calc(100dvh - var(--top) - 24px); }
  [data-menu-options]:not([hidden]) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .options-tabs {
    flex: none; margin: 0 0 6px;
    button { padding: 9px 4px; font-size: 16px; }
  }
  .panels { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -8px; padding: 0 8px; }
  .settings {
    h3 { margin: 18px 10px 2px; }
    section > h3:first-child, .preset h3 { margin-top: 12px; }
  }
  .columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 0 32px; align-items: start; }
  /* In a column a slider is shorter, leaving its name the room to stand on one line. */
  .columns .row:has(input[type=range]) { grid-template-columns: minmax(0, 1fr) 128px 48px; }
  .preset {
    .preset-bar { margin: 6px 0 0; }
    .preset-bar > :disabled { cursor: default; }
    .preset-bar > :disabled:not([aria-checked=true]) { opacity: 0.45; background: none; }
    .preset-note { min-height: 1.5em; margin: 8px 10px 0; color: var(--muted); font-size: 14px; font-style: italic; }
  }
  /* The foot: a way back, the reset, and the graphics tab's one call to action, Apply. */
  .options-foot {
    flex: none; display: flex; align-items: center; gap: 18px;
    margin: 12px 0 0; padding: 14px 10px 0; border-top: 1px solid var(--line);
    p { flex: 1; margin: 0; color: var(--faint); font-size: 13px; line-height: 1.4; font-style: italic; text-align: center; }
    [hidden] { display: none; }
    .cta { flex: none; }
    /* Narrow: the note over the reset and the way back, Apply across the foot under them. */
    @media (max-width: 520px) {
      & { flex-wrap: wrap; gap: 10px 14px; }
      p { order: -1; flex-basis: 100%; }
      [data-defaults] { margin-right: auto; }
      .cta { order: 1; flex-basis: 100%; }
    }
  }
  @media (max-width: 520px) {
    .columns .row:has(input[type=range]) { grid-template-columns: minmax(0, 1fr) auto; }
  }
}

/* Confirm once, then hide all live rendering behind an opaque, static sheet. */
#graphics-change {
  position: fixed; width: min(480px, calc(100vw - 40px)); padding: 28px 28px 28px 32px;
  font: 17px/1.5 var(--face);
  &::backdrop { background: var(--veil); }
  h2 {
    margin: 0 0 16px; font: 700 26px/1.25 var(--face); color: var(--paper-bright);
    &:focus { outline: none; }
  }
  p { max-width: 38em; color: var(--muted); }
  .actions { margin-top: 24px; }
  [data-graphics-reload], &[data-state=error] .actions, &[data-state=loading] .actions { display: none; }
  &[data-state=error] [data-graphics-reload] { display: inline-flex; }
  &[open]:is([data-state=loading], [data-state=error]) { width: 100vw; height: 100dvh;
    max-width: none; max-height: none; margin: 0; border: 0; padding: 32px;
    display: grid; align-content: center; justify-items: center; text-align: center; }
  &[open]:is([data-state=loading], [data-state=error])::before { display: none; }
  &:is([data-state=loading], [data-state=error])::backdrop { background: var(--ink); }
}