/*
 * Font sizes, one notch up.
 *
 * Every game pins its viewport to the width of its own board, so a phone
 * scales the whole page down to fit -- 13 px of menu inside a 455 px
 * viewport lands on a 390 px screen as about 11. The sizes here are the
 * ones that were too small at that scale: the menu bar, the line of
 * statistics, the dialogs and the article under the playfield.
 *
 * Loaded after each page's own <style>, so these win on equal
 * specificity. Anything a page needs to keep smaller it can still say
 * with a stricter selector.
 */

/* --- menu bar: the vertical padding gives back what the larger type
       takes, so the bar stays 25 px tall and nothing below it moves --- */
#menuBar { font-size: 15px; }
.menuTitle { padding: 3px 10px; }
.menuItem { padding: 5px 14px; font-size: 15px; }

/* --- the statistics line under the board; it is nowrap inside an area
       as narrow as 242 px, so it goes up by one step only --- */
#gameStats { font-size: 13px; }

/* --- modal dialogs --- */
#dialogTitle { font-size: 14px; }
#dialogBody { font-size: 16px; }
#dialogButtons button { font-size: 14px; padding: 4px 24px; }

/* A dialog is centred inside the game area, which is only as tall as the
   board -- the rules of Minesweeper already outgrew the beginner level
   before the type got bigger, and #gameArea clips what does not fit.
   Cap the dialog at the height of the area and let the text scroll. */
#dialog {
  top: 50%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}
/* min-height:0 is what lets a flex item shrink below its content and
   scroll instead of pushing the OK button off the dialog */
#dialogBody { overflow-y: auto; min-height: 0; }

/* --- the tests and the two flow-layout games (Nim, Evil 2048): the same
       head, status line and tool row on every one of them --- */
#title { font-size: 20px; }
#lead { font-size: 14px; }
#levels,
#levels button { font-size: 13px; }
#status,
#score,
#scoreLine { font-size: 14px; }
#cue,
#padSub,
#plateSub,
#coverSub,
#machine { font-size: 14px; }
#tools,
#tools button,
#tools span { font-size: 13px; }

/* --- the article under the game --- */
#article h2 { font-size: 19px; }
#article p,
#article ul { font-size: 16px; }

/* --- back to the index, under the tests --- */
#back { font-size: 14px; }