style.css

:root {
  --gray-dark: #9c9c9c;
  --gray-darker: #282828;
  --gray-light: #ddd;
  --gray-lighter: #eee;
  --gray: #bbb;
  --grid-gap: 10px;
  --piece-diameter-md: 34px;
  --piece-diameter-sm: 32px;
  --piece-diameter-xs: 30px;
  --piece-diameter: 26px;
  --point-diameter-large: 8px;
  --point-diameter-small: 5px;
  --point-diameter: 4px;
  --point-surround-large: 16px;
  --point-surround: 12px;
  --surround: 150%;
}
body {
  margin: 0;
  font-family: sans-serif;
  color: var(--gray-darker);
}
#app {
  height: 100vh;
  width: 30em;
  max-width: 90%;
  margin: 0 auto;
}
.app-inner {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.title {
  margin: 2em 0 0.8em;
}
button {
  display: block;
  margin: 3em 0 0;
  padding: 1em 2em;
  font-family: sans-serif;
  text-transform: uppercase;
  background: #eee;
  border: none;
  cursor: pointer;
}
button:hover {
  background: #ddd;
}

.grid {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 2em 0 2em;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  column-gap: var(--grid-gap);
  row-gap: var(--grid-gap);
  max-width: 55vh;
}
.grid > span {
  height: 0;
  padding-bottom: 100%;
}
.point {
  display: block;
  cursor: pointer;
  position: relative;
  font-family: monospace;
  font-size: 1.5em;
}
.point[data-lines|='line'] {
  position: relative;
}
.point[data-lines|='line']:before {
  content: '';
  position: absolute;
  background: var(--gray-light);
  pointer-events: none;
}

/* top-left down to bottom-left */
.point[data-lines='line-0']:before {
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  height: calc(600% + (6 * var(--grid-gap)));
  width: 1px;
}
.point[data-lines='line-9']:before {
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  height: calc(400% + (4 * var(--grid-gap)));
  width: 1px;
}
.point[data-lines='line-18']:before {
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  height: calc(200% + (2 * var(--grid-gap)));
  width: 1px;
}

/* bottom-left across to bottom-right */
.point[data-lines='line-6']:before {
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  width: calc(600% + (6 * var(--grid-gap)));
  height: 1px;
}
.point[data-lines='line-15']:before {
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  width: calc(400% + (4 * var(--grid-gap)));
  height: 1px;
}
.point[data-lines='line-24']:before {
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  width: calc(200% + (2 * var(--grid-gap)));
  height: 1px;
}

/* bottom-right up to top-right */
.point[data-lines='line-8']:before {
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%);
  height: calc(600% + (6 * var(--grid-gap)));
  width: 1px;
}
.point[data-lines='line-17']:before {
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%);
  height: calc(400% + (4 * var(--grid-gap)));
  width: 1px;
}
.point[data-lines='line-26']:before {
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%);
  height: calc(200% + (2 * var(--grid-gap)));
  width: 1px;
}

/* top-right across to top-left */
.point[data-lines='line-2']:before {
  top: 50%;
  right: 50%;
  transform: translateY(-50%);
  width: calc(600% + (6 * var(--grid-gap)));
  height: 1px;
}
.point[data-lines='line-11']:before {
  top: 50%;
  right: 50%;
  transform: translateY(-50%);
  width: calc(400% + (4 * var(--grid-gap)));
  height: 1px;
}
.point[data-lines='line-20']:before {
  top: 50%;
  right: 50%;
  transform: translateY(-50%);
  width: calc(200% + (2 * var(--grid-gap)));
  height: 1px;
}

/* centers vertical */
.point[data-lines='line-10']:before,
.point[data-lines='line-16']:before {
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  height: calc(200% + (2 * var(--grid-gap)));
  width: 1px;
}

/* centers horizontal */
.point[data-lines='line-12']:before,
.point[data-lines='line-14']:before {
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: calc(200% + (2 * var(--grid-gap)));
  height: 1px;
}

/* point circle */
.point:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: var(--point-diameter);
  height: var(--point-diameter);
  /* background: var(--gray); */
  background: white;
  border: 1px solid var(--gray);
  box-shadow: 1px 1px 0 #0001;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}
@media (min-width: 992px) {
  .point:after {
    width: var(--point-diameter-large);
    height: var(--point-diameter-large);
  }
}

.piece {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 2;
}
.piece.w,
.piece.b {
  width: var(--piece-diameter);
  height: var(--piece-diameter);
  border-radius: 50%;
  box-shadow: 1px 1px 0px var(--gray);
}
@media (min-width: 400px) {
  .piece.w,
  .piece.b {
    width: var(--piece-diameter-xs);
    height: var(--piece-diameter-xs);
  }
}
@media (min-width: 768px) {
  .piece.w,
  .piece.b {
    width: var(--piece-diameter-sm);
    height: var(--piece-diameter-sm);
  }
}
@media (min-width: 992px) {
  .piece.w,
  .piece.b {
    width: var(--piece-diameter-md);
    height: var(--piece-diameter-md);
  }
}
.piece.w {
  background: white;
  border: 1px solid var(--gray-dark);
}
.piece.b {
  background: black;
  border: 1px solid black;
}

/* surrounds

  "surround" is a circle around a point/piece to indicate 'active' or 'possible action'

  combination of 'active' and 'possible' TODO maybe simply or split?

  commented out until there's logic to also:
    - surround a lifted piece ('active')
    - surround possible moves once lifted phase 2 ('possible')

.phase-1.action-place .piece.empty {
  width: var(--point-surround);
  height: var(--point-surround);
  border-radius: 50%;
  border: 1px solid var(--gray-lighter);
}
 @media (min-width: 992px) {
   .phase-1.action-place .piece.empty {
     width: var(--point-surround-large);
     height: var(--point-surround-large);
   }
 }

.phase-2.action-lift.turn-w .board .piece.w:after,
.phase-2.action-lift.turn-b .board .piece.b:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: var(--surround);
  height: var(--surround);
  border-radius: 50%;
  border: 1px solid var(--gray-lighter);
}
*/

.controls {
  display: flex;
  justify-content: 'space-between';
  width: 65%;
  margin: 0 auto;
  cursor: default;
}
.controls > p,
.controls > div {
  flex: 1;
  text-align: center;
}
.action {
  font-size: 0.85em;
  opacity: 0.7;
}
@media (min-width: 400px) {
  .action {
    font-size: 0.9em;
  }
}
@media (min-width: 768px) {
  .action {
    font-size: 0.95em;
  }
}
.end .turn-pieces-container,
.end .action {
  opacity: 0;
}
.turn-pieces-container {
  display: flex;
}
.turn-piece-container {
  position: relative;
  transform: scale(0.77);
  flex: 1;
}
.turn-piece-container + .turn-piece-container {
  margin-left: 0.5em;
}
@media (min-width: 400px) {
  .turn-piece-container + .turn-piece-container {
    margin-left: 0.2em;
  }
}
@media (min-width: 768px) {
  .turn-piece-container + .turn-piece-container {
    margin-left: 0;
  }
}
@media (min-width: 992px) {
  .turn-piece-container {
    transform: scale(0.64);
  }
}
.turn-piece-container .current-w,
.turn-piece-container .current-b {
  position: relative;
}
.turn-piece-container .piece.w.current-w:after,
.turn-piece-container .piece.b.current-b:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160%;
  height: 160%;
  transform: translateY(-50%) translateX(-50%);
  border: 1px solid var(--gray-light);
}
@media (min-width: 400px) {
  .turn-piece-container .piece.w.current-w:after,
  .turn-piece-container .piece.b.current-b:after {
    width: 180%;
    height: 180%;
  }
}
.reset {
  text-transform: uppercase;
  font-size: 0.75em;
  letter-spacing: 0.08em;
  opacity: 0;
}
@media (min-width: 400px) {
  .reset {
    font-size: 0.77em;
  }
}
@media (min-width: 768px) {
  .reset {
    font-size: 0.8em;
  }
}
.end .reset {
  cursor: pointer;
  opacity: 0.8;
}

.feedback {
  text-align: center;
  min-height: 60px;
  font-style: italic;
  font-size: 0.75em;
  padding-top: 1em;
  cursor: default;
  opacity: 0.8;
}
@media (min-width: 400px) {
  .feedback {
    font-size: 0.8em;
  }
}
@media (min-width: 768px) {
  .feedback {
    font-size: 0.85em;
  }
}

/* fade */

.fade-in-1 {
  transition: opacity 2.6s ease-in-out;
  opacity: 0;
}
.fade-in-2 {
  transition: opacity 2.6s ease-in-out 1.2s;
  opacity: 0;
}
.has-initially-loaded,
.has-initially-loaded .fade-in-1,
.has-initially-loaded .fade-in-2 {
  opacity: 1;
}