/* Fonts */

/* Title font: Caveat */
@font-face {
  font-family: 'Caveat';

  src:  local('Caveat Bold'), local('Caveat-Bold'),
        url('assets/fonts/caveat/hinted-subset-Caveat-Bold.woff2') format('woff2'),
        url('assets/fonts/caveat/hinted-subset-Caveat-Bold.woff') format('woff');

  font-weight: bold;
  font-style: normal;
    
  font-display: block;
}

/* Body font: Comic Neue */
@font-face {
  /* Comic Neue Regular */
  font-family: 'Comic Neue';

  src:  local('Comic Neue Regular'), local('ComicNeue-Regular'),
        url('assets/fonts/comic-neue/hinted-ComicNeue-Regular.woff2') format('woff2'),
        url('assets/fonts/comic-neue/hinted-ComicNeue-Regular.woff') format('woff');

  font-weight: normal;
  font-style: normal;

  font-display: block;
}

@font-face {
  /* Comic Neue Bold */
  font-family: 'Comic Neue';
  
  src:  local('Comic Neue Bold'), local('ComicNeue-Bold'),
        url('assets/fonts/comic-neue/hinted-ComicNeue-Bold.woff2') format('woff2'),
        url('assets/fonts/comic-neue/hinted-ComicNeue-Bold.woff') format('woff');
  
  font-weight: bold;
  font-style: normal;
  
  font-display: block;
}

@font-face {
  /* Comic Neue Italic */
  font-family: 'Comic Neue';

  src:  local('Comic Neue Italic'), local('ComicNeue-Italic'),
        url('assets/fonts/comic-neue/hinted-ComicNeue-Italic.woff2') format('woff2'),
        url('assets/fonts/comic-neue/hinted-ComicNeue-Italic.woff') format('woff');
  
  font-weight: normal;
  font-style: italic;
  
  font-display: block;
}

@font-face {
  /* Comic Neue Bold Italic */
  font-family: 'Comic Neue';
  
  src:  local('Comic Neue Bold Italic'), local('ComicNeue-BoldItalic'),
        url('assets/fonts/comic-neue/hinted-ComicNeue-BoldItalic.woff2') format('woff2'),
        url('assets/fonts/comic-neue/hinted-ComicNeue-BoldItalic.woff') format('woff');

  font-weight: bold;
  font-style: italic;

  font-display: block;
}

/* User-defined content font: Waiting for the Sunrise */
@font-face {
  font-family: 'Waiting for the Sunrise';

  src:  local('Waiting for the Sunrise'), local('WaitingfortheSunrise'),
        url('assets/fonts/waiting-for-the-sunrise/hinted-WaitingfortheSunrise.woff2') format('woff2'),
        url('assets/fonts/waiting-for-the-sunrise/hinted-WaitingfortheSunrise.woff') format('woff');

    font-weight: 300;
    font-style: normal;

    font-display: swap;
}

/* CSS Variables */
:root {
  /* Colors */

  --main-bg-color: #FFFFFF;
  --main-color: #000000;

  --mark-1-color: #ED0A3F;
  --mark-2-color: #0066FF;

  --draw-color: #8B8680;

  --selection-color: hsla(60, 100%, 45%, 0.85);

  --warning-color: #b37400;
  --error-color: #ff0000;

  /* Fonts */

  /* 
  A combination of the system font stacks used on GitHub, Medium and WordPress Admin (as of October 2022), with some symbol and emoji support.
  Read more on: https://css-tricks.com/snippets/css/system-font-stack/#aa-method-1-system-fonts-at-the-element-level.

  EXPLANATION:
  ------------
  The stack aims to use the default font of whichever operating system the user is viewing the page on from the following: Apple systems, Windows, Android, and Linux.
  
  - "Noto Sans" is applied if none of the default fonts of the previous operating systems is found.
  - "Helvetica Neue", "Arial", and sans-serif are applied as fallback for older operating systems.

  - "Apple Color Emoji", "Segoe UI Emoji", and "Segoe UI Symbol" are used for rendering symbols and emojis in the native operating system font.

  NOTE:
  The `system-ui` generic font family, which can replace `-apple-system, BlinkMacSystemFont`, is not supported in the latest versions of some web browsers, so it is not used.
  Refer to https://caniuse.com/font-family-system-ui.
  */
  --system-font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  /* TODO: Add more fonts to the title, body, and user-defined content font stack, to reduce the likelihood of falling back to the system font stack. */

  --title-font: 'Caveat', var(--system-font-stack);
  --body-font: 'Comic Neue', var(--system-font-stack);
  --user-defined-content-font: 'Waiting for the Sunrise', var(--system-font-stack);
}

/* 
TABLE OF CONTENTS
-----------------

You can use this table to get an overview of the stylesheet sections or jump to the desired one.

Jump to the desired section by having your text editor find its index (Ctrl+F in most editors. Typically contains the index automatically when the index is selected).
Ensure the index is enclosed within parentheses, as this prevents finding other text that contains it by mistake.

(0) General styles

(1) Header styles

(2) Main styles

(3) Footer styles
*/

/* (0) General styles */

* {
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

*::selection {
  background-color: var(--selection-color);
}

*:not(p, small, .bold, .italic, .game-results) > [class^="mark"] {
  font-family: var(--title-font);
}

kbd {
  color: white;
  background-color: black;

  padding: 2px 4px;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.error {
  color: var(--error-color);
}

.warning {
  color: var(--warning-color);
}

.mark-1, .gameboard-section:not([hidden]) > #gameboard.mark-1 {
  color: var(--mark-1-color);

  border-color: var(--mark-1-color);
}

.mark-2, .gameboard-section:not([hidden]) > #gameboard.mark-2 {
  color: var(--mark-2-color);

  border-color: var(--mark-2-color);
}

.draw, .gameboard-section:not([hidden]) > #gameboard.draw {
  color: var(--draw-color);

  border-color: var(--draw-color);
}

html {
  height: 100vh;
}

body {
  /* `body` is a block element, so it takes up the entire width of its parent `html` by default. */

  display: grid;
  grid-template-rows: auto 1fr auto;

  height: 100%;

  font-family: var(--body-font);
  font-size: 1.85rem;

  text-align: center;

  background-image: url(assets/images/background.jpg);
  background-size: cover;

  background-color: var(--main-bg-color);
  color: var(--main-color);
}

a {
  text-decoration: underline;

  color: inherit;
}

a:not(:has(> img)):hover, a:not(:has(> img)):focus-visible {
  text-decoration: underline dashed;
}

a:has(> img):hover, a:has(> img):focus-visible {
  -webkit-filter: brightness(2);
  filter: brightness(2);
}

button, label {
  cursor: pointer;
}

button {
  appearance: none;

  border: none;

  background-color: transparent;
  color: var(--main-color);
}

button {
  border-bottom: 2px solid var(--main-color);
}

button:hover, button:focus-visible,
input:hover, input:focus {
  border-bottom-style: dashed;
}

button:active, a:active {
  font-weight: bold;
}

input {
  appearance: none;

  border: none;
  border-bottom: 2px solid var(--main-color);

  font-family: var(--user-defined-content-font);
  font-size: 1.5em;

  text-align: center;

  background-color: transparent;
  color: var(--main-color);
}

input::placeholder {
  color: var(--draw-color);
}

input[type="checkbox"] + label {
  font-size: 1.5rem;
}

input[type="checkbox"] {
  width: 0.5em;
  height: 0.5em;

  /* Adjusts the checkbox position to be on the label text baseline */
  vertical-align: -2px;

  border: 2px solid var(--main-color);
  margin: 0 0.1em;

  cursor: pointer;
}

/* TODO: Use a tick mark (✔) in the font for user-defined content in the checkbox. */

input[type="checkbox"]:hover, input[type="checkbox"]:focus-visible, label:hover + input[type="checkbox"], label:focus-visible + input[type="checkbox"] {
  background-color: var(--draw-color);
  border-color: var(--main-color);
}

input[type="checkbox"]:checked {
  background-color: var(--main-color);
  border-color: var(--draw-color);
}

/* (1) Header styles */

h1 {
  font-family: var(--title-font);
  font-size: 10rem;

  margin: 0;

  -webkit-user-select: none;
  user-select: none;
}

/* (2) Main styles */

main {
  display: grid;
  align-content: center;

  row-gap: 32px;
}

main.game-started {
  /* Make page form fill the entire height of the main element when the game starts. */
  grid-template-rows: 1fr;
}

main.game-started > #page-form {
  padding: 32px 0 16px 0;
}

#page-form {
  display: grid;
  grid-template-rows: auto 1fr auto auto;

  row-gap: 32px;
}

.player-names {
  /* The following style declarations are not optimized for more than two players. */
  display: flex;
  flex-wrap: wrap;

  justify-content: center;

  gap: 128px;
}

.player-label-input-container {
  padding: 16px;
}

#first-player-note:not([hidden]) {
  display: inline-block;

  margin-top: 24px;
}

.gameboard-size-label-input-container {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 24px;
}

.gameboard-size-input-container {
  display: inline-block;
}

#gameboard-size-input {
  width: 3ch;
}

#gameboard-size-input:placeholder-shown {
  width: 9ch;
}

.gameboard-section:not([hidden]) {
  display: flex;
  flex-direction: column;

  align-items: center;
}

.gameboard-section:not([hidden]) > #gameboard {
  border: 2px solid var(--main-color);

  font-family: var(--user-defined-content-font);
  font-size: 5rem;

  height: 100%;
}

.gameboard-section:not([hidden]) .gameboard-row:not(:last-child) {
  border-bottom: 2px solid var(--main-color);
}

.gameboard-section:not([hidden]) .gameboard-cell:not(:last-child) {
  border-right: 2px solid var(--main-color);
}

.gameboard-section:not([hidden]) .gameboard-cell {
  display: grid;
  place-content: center;

  box-sizing: content-box;

  padding: 16px;

  cursor: pointer;

  /* Makes the cursor not change on hovering over text, and makes text non-selectable, so that the user may not select the invisible text placed in empty cells. */
  -webkit-user-select: none;
  user-select: none;
}

.buttons-container, .start-new-game-container {
  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;
}

.buttons-container {
  gap: 40px;
}

.start-new-game-container {
  gap: 16px;
}

#return-to-homepage {
  font-size: 0.9em;
}

/* (3) Footer styles */

footer {
  padding: 28px 0;
}

.credit {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  border: 2px solid var(--main-color);
  padding: 16px 32px;
}

.credit > a:has(> img) {
  display: flex;
  justify-content: center;
  align-items: center;
}

.credit > a:last-child::before {
  content: ' | ';

  /* Margins here are used in place of whitespace characters not rendered due to flexbox layout, so they are defined in `rem` units. */
  margin: 0px 1rem;
}