body {
  background-color: #222;
}

h1 {
  color: #f9f9f9;
}

footer, #game_status, #player_status, #output {
  color: #ddd;
}

a:link {
  color: #ddddff;
}

a:visited {
  color: #aaaaff;
}

div {
  font-family: Arial, Helvetica, sans-serif;
}

.main-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

.board-row {
  flex: none;
  width: 100%;
}

.board-wrapper {
  width: max-content;
  font-size: 20px; /* this lives here so that ch and em reference the correct font size */

  display: grid;
  grid-template-columns: max-content 2ch 1fr 3.5ch;
  grid-template-rows: 1fr auto auto;
  grid-template-areas: 
    "history ranks board control-display"
    ".       .     files           ."
    ".       .     stone-counters  .";

    /* This is not quite correct. Ideally we'd limit our height such that the aspect-ratio calculated width does not
    exceed the viewport width. However doing it this way seems to limit the width to slightly narrower than the window width
    which works fine for now */
  max-height: 100vw;

  user-select: none;
}

.stone-text.light {
  color: #ddd;
}

.stone-text.dark {
  color: #393939;
}

.history-wrapper {
  grid-area: history;
  display: flex;
  flex-direction: column;

  box-sizing: border-box; /* Makes it so that the size set on this element denotes the size _including_ the border*/

  padding: 0.5em;
}

/* The history is done as a css grid instead of a <table> to enable the scroll-snap property.
   scroll-snap only snaps to child elements of the scrolling container, and with a table.
   the scroll points are the table elements, but the history container just scrolls one big 
   table element.*/
.history {
  /*height: 100%;*/ /* Force the list to fit the height of the wrapper even if the list is longer than the wrapper's height */
  flex-grow: 1;
  overflow-x: hidden;
  overflow-y: auto;

  scroll-snap-type: y mandatory;
}

.history-grid {
  display: grid;
  
  grid-template-columns: 3ch repeat(2, 10ch);
  grid-auto-rows: max-content;

  /* Gutters */
  grid-row-gap: 0.2em;
  grid-column-gap: 0.5ch;
}

.history span {
  color: #f9f9f9;
  /* Snap the bottom of a move row to the bottom of the scroll container, since most often we want to scroll down to the latest move. */
  /* The two values specify snapping for the block and inline direction (here: vertical, horizontal).*/
  /* Currently (18.03.21) this is necessary to prevent Firefox from scrolling the rows to the right and cutting off the move numbers.*/
  /* See this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1699573 */
  scroll-snap-align: end start;
}

.turn-number {
  text-align: right;
}

.move-text {
  text-align: left;
  padding-left: 1ch;
  padding-right: 1ch;

  border-radius: 0.2em;

  overflow: hidden;
}

.move-text.active {
  background-color: #555;
}

.move-text:hover {
  background-color: #777;
}

.history-nav {
  margin-top: 0.2em; /* Set to match the grid-row-gap of .history-grid */
}

button.nav {
  flex-grow: 1;
}

button.nav svg {
  /* I would like to the height of the icons exactly match the text elements in the history list, */
  /* but 1em seems to be less than the actual height the elements end up at (1em is 20 at 20px font size, but elements get ~height 24) */
  /* 1.2 seems to match the actual height pretty well */
  height: 1.2em;
  width: 1.2em;
}


.ranks {
  grid-area: ranks;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.ranks div {
  font-size: 20px;
  color: #ddd;
}

.files {
  grid-area: files;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.files div {
  font-size: 20px;
  color: #ddd;
}

.counter-container {
  position: relative; /* Stones require their parent to be a positioned element */

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

.counter-container > .stone {
  display: flex;
  justify-content: center;
  align-items: center;
}

.control-display {
  grid-area: control-display;
  width: 100%;
  height: 100%;

  margin-left: 2px;

  display: flex;
  flex-direction: column;

  position: relative;
}

.control-bar {
  width: 100%;
  font-size: 22px;
}

.control-bar.light {
  background-color: #f9f9f9;
  position: relative;

    /* TODO the control bar border radius should be a variable */
  border-top-left-radius: 1ch;
  border-top-right-radius: 1ch;
}

.control-bar.dark {
  background-color: #555;
  position: relative;

  border-bottom-left-radius: 1ch;
  border-bottom-right-radius: 1ch;
}

.control-count {
  width: 100%;
  position: absolute;
  text-align: center;
}

.control-count.top {
  bottom: 0;
}

.control-count.bottom {
  top: 0;
  line-height: 1.6;
}

.board {
  position: relative;
  grid-area: board;
}

.spaces {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
}

.space {
  position: relative;
}

.space.dark {
  background-color: #aaaaaa;
}
.space.light {
  background-color: #bbbbbb;
}

.bridge {
  position: absolute;
}
/* TODO make width/length of bridges central variables, calc left/top offset based on width var */
.bridge.north, .bridge.south {
  width: 25%;
  height: 50%;

  left: 37.5%;
}

.bridge.north {
  top: 0;
}

.bridge.south {
  bottom: 0;
}

.bridge.west, .bridge.east {
  height: 25%;
  width: 50%;

  top: 37.5%;
}

.bridge.west {
  left: 0;
}

.bridge.east {
  right: 0;
}

/* A space is only ever controlled by white OR black, not both, so we can colour all bridges according to the controlling color. */
.space.ctrl-light .bridge {
  background-color: rgba(255, 255, 255, 0.18);
}

.space.ctrl-dark .bridge {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Hide all bridges by default */
.bridge {
  display: none;
}

/* Selectively display bridges again based on connectivity */
.space.north .bridge.north {
  display: block;
}

.space.south .bridge.south {
  display: block;
}

.space.west .bridge.west {
  display: block;
}

.space.east .bridge.east {
  display: block;
}

.stones {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}

.stone-wrapper {
  position: absolute;
    /* Make our positioning relative to the bottom left corner of the board */
  bottom: 0;
  left: 0;
}

.stone {
  position: absolute;

  width: 50%;
  height: 50%;
  right: 25%;
  bottom: 25%;

  border-radius: 10%; /* rounded corners */
  /* TODO fix the very small light gap along the "bottom" edge of a standing stone */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 2px 1px rgba(0, 0, 0, 0.2); 
}

/* Buried stones are those at the bottom of the stack beyond the carry limit */
.stone.buried {
  width: 15%;
  height: 15%;
  right: 7%; /* Buried stones show up as a second stack to the right of the main stack */
  bottom: 25%;

  border-radius: 20%; /* Needs bigger rounding since the rectangle is much smaller */
}

.stone.standing {
  height: 20%;
  bottom: 40%;
  border-radius: 10%/25%; /* second number is for shorter side, here height. Second number = width% * 0.first_number / height% */
  transform: rotate(45deg);
}

.stone.cap {
  width: 45%;
  height: 45%;
  right: 27.5%;
  bottom: 27.5%;

  border-radius: 50%;
}

.stone.light {
  background-color: #f9f9f9;
}

.stone.dark {
  background-color: #555;
}

.stone-counters {
  grid-area: stone-counters;
  display: grid;
  font-size: 20px;
}

.stone-counter-light-flat {
  grid-area: light-flat;
}
.stone-counter-light-cap {
  grid-area: light-cap;
}
.stone-counter-dark-flat {
  grid-area: dark-flat;
}
.stone-counter-dark-cap {
  grid-area: dark-cap;
}

.width-based-square {
  /* We need to specify a height so that child element's percentage rules can use it */
  height: 100%; 
}

.width-based-square::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

button {
  font-size: 20px;
  background-color: #ddd;
  border: none;
  border-radius: 0.2em;

  box-shadow: 0 0 5px 2px rgba(0,0,0,0.4);
}

button:active {
  background-color: #aaa;
  box-shadow: none;
}

button.disabled {
  pointer-events: none;
  /*background-color: #888;
  color: #333;*/
  opacity: 0.5;
  box-shadow: none;
}

#move-submit {
  padding: 0.25em 1.5ch;
}

.status-display {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 20px;
}

.input-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.main-row {
  margin-bottom: 1em;
}

/* === Size-specific rules === */

/* Both the board and the stone wrappers need to know the board size, so it's marked on their common ancestor,
   the board wrapper. By changing the marker there, we can apply size-specific rules on all of them. */
.board-wrapper.size-3 .spaces {
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(3, 1fr);
}

.board-wrapper.size-3 .stone-wrapper {
 width: 33.33%;
 height: 33.33%;
}

.board-wrapper.size-3 .stone-counters {
 grid-template-columns: repeat(4, 1fr);
 grid-template-areas: "light-cap light-flat dark-flat dark-cap";
}


.board-wrapper.size-4 .spaces {
 grid-template-columns: repeat(4, 1fr);
 grid-template-rows: repeat(4, 1fr);
}

.board-wrapper.size-4 .stone-wrapper {
 width: 25%;
 height: 25%;
}

.board-wrapper.size-4 .stone-counters {
 grid-template-columns: repeat(4, 1fr);
 grid-template-areas: "light-cap light-flat dark-flat dark-cap";
}


.board-wrapper.size-5 .spaces {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

.board-wrapper.size-5 .stone-wrapper {
  width: 20%;
  height: 20%;
}

.board-wrapper.size-5 .stone-counters {
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas: "light-cap light-flat . dark-flat dark-cap";
}


.board-wrapper.size-6 .spaces {
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
}

.board-wrapper.size-6 .stone-wrapper {
  width: 16.66%;
  height: 16.66%;
}

.board-wrapper.size-6 .stone-counters {
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas: ". light-cap light-flat dark-flat dark-cap .";
}


.board-wrapper.size-7 .spaces {
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
}

.board-wrapper.size-7 .stone-wrapper {
  width: 14.28%;
  height: 14.28%;
}

.board-wrapper.size-7 .stone-counters {
  grid-template-columns: repeat(7, 1fr);
  grid-template-areas: ". light-cap light-flat . dark-flat dark-cap .";
}


.board-wrapper.size-8 .spaces {
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

.board-wrapper.size-8 .stone-wrapper {
  width: 12.5%;
  height: 12.5%;
}

.board-wrapper.size-8 .stone-counters {
  grid-template-columns: repeat(8, 1fr);
  grid-template-areas: ". light-cap light-flat . . dark-flat dark-cap .";
}