/* The small modals: Welcome, About and Install as an App. */

/* ---- Welcome ---- */
/* less room at the sides and snugger buttons, so the two buttons and the "or" fit on one line on a phone (a very narrow one wraps) */
#welcome-dialog { padding-left: 14px; padding-right: 14px; }
.welcome-buttons { flex-direction: column; align-items: center; gap: 12px; }
.welcome-install { display: flex; align-items: center; justify-content: center; gap: 8px; }   /* Install as an App, with its "or" after it on the same line */
.welcome-install[hidden] { display: none; }
.welcome-choices { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 8px; }   /* so the "or" between the two buttons sits level with their words */
.welcome-buttons .button { padding-left: 14px; padding-right: 14px; white-space: nowrap; }
.welcome-install .or-between, .welcome-choices .or-between { margin: 0 6px; }
.welcome-buttons .or-between { color: var(--muted-text-color); }

/* ---- the font's own X, O and check in a title (typed ❌ ⭕ ✔, colored red, blue and green) ---- */
.font-symbols i { font-style: normal; font-size: 1.15em; }
.font-symbols i:nth-child(1) { color: var(--player-1-color); }
.font-symbols i:nth-child(2) { color: var(--player-2-color); }
.font-symbols i:nth-child(3) { color: var(--player-3-color); }

/* ---- About: the writing is sentence-case body text, centered, scrolling if it runs long ---- */
/* the band behind the title's letters covers only the word, so no box of it shows between the symbols */
.about-title::before { content: none; }
.about-title .font-symbols i:nth-child(2) { display: inline-block; background: radial-gradient(circle closest-side, var(--panel-background) 62%, transparent 63%); }   /* a disc behind the ⭕, so the page doesn't show through its hole */
.about-word { position: relative; }
.about-word::before { content: ""; position: absolute; z-index: -1; left: 8px; right: 8px; top: 22%; bottom: 22%; background: var(--panel-background); }
.about-text { max-height: min(55dvh, 420px); overflow-y: auto; margin-top: 8px; text-align: center; font-size: 18px; color: var(--text-color); }
.about-text, .about-text * { font-feature-settings: normal; text-transform: none; line-height: 1.35; }
.about-text p { margin: 0 0 12px; }
.about-text a { color: inherit; }

/* a menu item with symbols in it: the words and symbols are centered on one line, with room between them, and it stays as tall as the others */
.menu-item:has(.symbol) { display: flex; align-items: center; gap: 6px; }
.menu-item .symbol { width: 1em; height: 1em; vertical-align: 0; flex: none; }
.menu-item:has(.symbol) .symbol:first-of-type { margin-left: 2px; }

/* ---- Install as an App: the same body style as About and How to Play (20px, sentence case, centered), with numbered steps that scroll if the screen is short ---- */
.install-body { max-height: min(60dvh, 460px); overflow-y: auto; margin-top: 8px; text-align: center; font-size: 20px; font-weight: 700; color: var(--text-color); }
.install-body, .install-body * { font-feature-settings: normal; text-transform: none; line-height: 1.28; }
.install-body p { margin: 0 0 14px; }
.install-body legend { margin-bottom: 14px; font-size: 16px; font-weight: 800; text-transform: uppercase; font-feature-settings: "case"; }   /* the group headings look like the headings in Settings: gray capitals between two lines */
.install-body fieldset { margin: 0 0 8px; }
.install-step-number {
  display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin-right: 6px; border-radius: 50%;
  background: var(--text-color); color: #fff; font-size: 0.85em; vertical-align: 0.05em;
}
.install-icon { width: 1.1em; height: 1.1em; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }