/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

 * { min-width: 0; }

form {
  display: grid;
  justify-items: center;
  align-items: center;
}

#summary {
  text-align: center;
}

.footer > div > footer {
  padding-top: 20px;
  padding-bottom: 20px;
  margin: auto;
  text-align: center;
  font-family: 'Times', serif;
}

#board {
  margin: 8px;
  padding: 7px;
  background: black;
  font-family: 'Times', serif;

  display: grid;
  grid-template-rows: repeat(9, auto);
  grid-template-columns: repeat(9, auto);
  column-gap: 2px;
  row-gap: 2px;

  margin-bottom: 70px;
  position: relative;
}

.cell {
  width: 50px;
  height: 50px;
  background: white;
}

.cell.starter {
  background: #efefef;
}

.cell.playable:hover {
  background: rgb(214, 233, 240);
}

.cell.playable:focus {
  background: lightblue;
}

.cell:nth-child(3n):not(:nth-child(9n)) {
  margin-right: 3px;
}

.cell:nth-child(27n + 28),
.cell:nth-child(27n + 29),
.cell:nth-child(27n + 30),
.cell:nth-child(27n + 31),
.cell:nth-child(27n + 32),
.cell:nth-child(27n + 33),
.cell:nth-child(27n + 34),
.cell:nth-child(27n + 35),
.cell:nth-child(27n + 36) {
  margin-top: 3px;
}

#board::after {
  content: " ";
  position: absolute;
  top: 497px;
  height: 50px;
  width: calc(100% + 4px);
  left: -2px;
  z-index: 5;
  background: rgba(255, 255, 255, 0.623);
}

.cell > span.options > label.picker {
  position: absolute;
  top: 500px;
  width: 40px;
  height: 45px;
  font-size: 30px;
  border: 2px solid darkgreen;
  border-radius: 7px;
  display: grid;
  justify-items: center;
  align-items: center;
}

.cell:first-of-type > span.options > label.pcker {
  visibility: visible;
}

.cell > span.options > input[value=" "] + label.picker {
  left: -2px;
}

.cell > span.options > input[value="1"] + label.picker {
  left: calc(50% - 195px);
}

.cell > span.options > input[value="2"] + label.picker {
  left: calc(50% - 145px);
}

.cell > span.options > input[value="3"] + label.picker {
  left: calc(50% - 95px);
}

.cell > span.options > input[value="4"] + label.picker {
  left: calc(50% - 45px);
}

.cell > span.options > input[value="5"] + label.picker {
  left: calc(50% + 5px);
}

.cell > span.options > input[value="6"] + label.picker {
  left: calc(50% + 55px);
}

.cell > span.options > input[value="7"] + label.picker {
  left: calc(50% + 103px);
}

.cell > span.options > input[value="8"] + label.picker {
  left: calc(50% + 152px);
}

.cell > span.options > input[value="9"] + label.picker {
  right: -2px;
}

.cell > span.options > input + label.picker.disabled {
  opacity: 0.1;
}

.cell.playable:focus > span.options > label.picker {
  z-index: 10;
  visibility: visible;
}

.cell > span.options > input {
  display: none;
}

.cell > span.options > input:checked {
  width: 50px;
  height: 50px;
  margin: 0;
  visibility: hidden;

  display: inline-grid;
  justify-items: center;
  align-items: center;
}

.cell > span.options > input ~ span::after {
  content: " ";
  font-size: 30px;
  visibility: visible;
  position: relative;
  top: -51px;
  left: 18px;
}
.cell.playable > span.options > input ~ span::after {
  top: -58px;
}

.cell > span.options > input[value="1"]:checked ~ span::after {
  content: "1";
}

.cell > span.options > input[value="2"]:checked ~ span::after {
  content: "2";
}

.cell > span.options > input[value="3"]:checked ~ span::after {
  content: "3";
}

.cell > span.options > input[value="4"]:checked ~ span::after {
  content: "4";
}

.cell > span.options > input[value="5"]:checked ~ span::after {
  content: "5";
}

.cell > span.options > input[value="6"]:checked ~ span::after {
  content: "6";
}

.cell > span.options > input[value="7"]:checked ~ span::after {
  content: "7";
}

.cell > span.options > input[value="8"]:checked ~ span::after {
  content: "8";
}

.cell > span.options > input[value="9"]:checked ~ span::after {
  content: "9";
}

.utilities {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

@media print {
  body {
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }
  #board::after, .utilities, label, button, .banner-container, .footer { display: none !important; }
}

.stats-container {
  padding: 4px;
  width: 100%;
  max-width: 500px;
  margin: auto;
  overflow: hidden;
}

.banner-container, .utilities {
  font-family: 'Inter', sans-serif;
}