/*
Shared look for the site's reading pages (how to play, scoring, how mazes are made,
about, privacy, terms, contact). Headings and menus use the arcade font like the game;
long paragraphs use a plain font so they are easy to read.
*/
@font-face {
    font-family: "BarcadeBrawl";
    /* src: url("BarcadeBrawlRegular-plYD.ttf"); */
    src: url("barcade-brawl.woff");

}

body {background-color:black; color: white; padding: 4px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 18px; line-height: 1.6;}
h1, h2, h3 {font-family:BarcadeBrawl; line-height: 1.4;}
h1 {font-size: 28px; margin: 16px 0 24px;}
h2 {font-size: 20px; margin: 32px 0 12px;}
h3 {font-size: 16px; margin: 24px 0 8px;}
a {color: cyan;}
a:visited {color: violet;}
.bluebox {border: blue 4px solid; margin: 4px; }
.menuitem {color: white; font:2vmin BarcadeBrawl;line-height: 2.5vmin;}

#title {color: white;font-size: 10vmin;line-height: 1.05;min-height:1.05em;margin: 5vh 0px;text-align: center;}
/* RAND-O-MAZE is three parts: RAND, -O- and MAZE. On one line when it fits; when it doesn't
   (narrower than 5:3; the spaced-out title is about 15.5em wide), the three parts stack. */
#title a {color: inherit; text-decoration: none; display: flex; justify-content: center; flex-wrap: nowrap;}
.title-part {white-space: nowrap; display: inline-flex; gap: 0.3em; padding: 0 0.15em;}
@media (max-aspect-ratio: 5/3) {
    #title a {flex-direction: column; align-items: center; row-gap: 0.35em;}
}

/* The home page is the site's menu. Each reading page has only a Go back button at the top and,
   at the bottom, Go back plus the one or two pages that follow on from it: big blue boxes like
   the game's buttons (and the Leaderboard's Go back), side by side when there is room. */
.page-links {display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px;}
.page-button {display: flex; align-items: center; justify-content: center; flex: 1 1 12rem; max-width: 20rem; min-height: 56px; text-align: center; font-family: BarcadeBrawl; font-size: 16px; line-height: 1.4; color: white; text-decoration: none; border: blue 4px solid; padding: 12px 8px;}
.page-button:hover, .page-button:focus {color: yellow; border-color: yellow;}

/* The text of a page: a readable column width, with room around it. */
.page {max-width: 60rem; margin: 8px auto; padding: 16px 24px;}
.page li {margin-bottom: 6px;}
.page kbd {font-family: BarcadeBrawl; font-size: 12px; border: 1px solid white; border-radius: 0; background: black; color: white; padding: 2px 6px;}
.page table {border-collapse: collapse; margin: 8px 0 16px; display: block; max-width: 100%; overflow-x: auto;}
.page th, .page td {border: 1px solid blue; padding: 4px 12px; color: white;}
.page th {font-family: BarcadeBrawl; font-size: 12px; font-weight: normal;}
.page .play-now {display: inline-block; font-family: BarcadeBrawl; font-size: 16px; color: white; text-decoration: none; border: blue 4px solid; padding: 12px 24px; margin: 8px 0;}
.page .play-now:hover, .page .play-now:focus {border-color: yellow; color: yellow;}
.page .updated {color: #bbb; font-size: 15px;}
.page .warning {color: cyan; background-color: red; padding: 2px 4px;}

/* The Contact form. */
.contact-form {display: flex; flex-direction: column; gap: 6px; max-width: 40rem;}
.contact-form label {font-family: BarcadeBrawl; font-size: 12px; margin-top: 8px;}
.contact-form input, .contact-form textarea {background: black; color: white; border: blue 4px solid; padding: 8px; font: inherit;}
.contact-form input:focus, .contact-form textarea:focus {outline: none; border-color: yellow;}
.contact-form button {align-self: flex-start; background: black; cursor: pointer;}
.contact-form button:disabled {color: gray; border-color: gray; cursor: default;}
.contact-trap {position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden;}
#contact_status {min-height: 1.6em; color: yellow;}
#contact_status.error {color: #ff6b6b;}

@media (max-width: 600px) {
    body {font-size: 16px;}
    h1 {font-size: 20px;}
    h2 {font-size: 16px;}
    .page {padding: 12px;}
}

/* The step-by-step maze demo on code.html. */
.mazecell {display: inline-block; border: gray solid 2px; width:24px;height:24px;background-color: gray; font-size: 8px; line-height: 20px; text-align: center;vertical-align: top;}
.mazeborder {display: inline-block; border: 0px; width:24px;height:24px;background-color: orange;}
/* Each demo row is a div of cells; flex keeps rows touching now that the page is in standards mode. */
#maze > div {display: flex;}
#celllist {width:84px; height:228px; vertical-align: top;}
.celllist { font-size: 8px; line-height: 1.2;}
figcaption { font-size: 14px;}
figure img {max-width: 100%;}
.demo {font-family: BarcadeBrawl; line-height: 1.2;}
.demo header {font-size: 12px; padding: 4px;}
/* Below the md breakpoint the demo sits between paragraphs instead of floating beside them: it
   shrinks to its grid and cell list and is centred, rather than stretching across the page with
   an empty box on the right. The grid and list stay side by side when they fit. */
.demo > div:last-child {display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;}
#actions {text-align: center;}
@media (max-width: 767.98px) {.demo {width: fit-content; max-width: 100%; margin: 8px auto 16px;}}

#actions {font-size: 8px;}

/* The daily leaderboard (leaderboard.html). */
.board-controls {display: flex; flex-wrap: wrap; gap: 8px 24px;}
.board-tabs {display: flex; flex-wrap: wrap; gap: 4px;}
.board-tab {font-family: BarcadeBrawl; font-size: 12px; color: white; background: black; border: blue 4px solid; padding: 8px 12px;}
.board-tab:hover, .board-tab:focus {border-color: yellow; color: yellow;}
.board-tab[aria-pressed="true"] {background: blue;}
.page table.board {display: table; width: 100%;}
.board td:first-child, .board td:last-child {text-align: right;}
.board tr.you td {color: yellow;}