body { padding: 0; }

.container { margin: 0 auto; max-width: 800px; padding: 20px; }

.fiveormore {  }

.fiveormore .board { position: relative; }
.h { position: absolute; left: 0; width: 100%; height: 1px; background: #000; }
.v { position: absolute; top: 0; height: 100%; width: 1px; background: #000; }
.h.last { bottom: 0; }
.v.last { right: 0; }

.square { position: absolute; z-index: 3; user-select: none; -webkit-tap-highlight-color: transparent; }
.board.ready .square.possible { cursor: pointer; }

.ball { border-radius: 50%; box-sizing: border-box; border: 2px solid #000; position: relative; }
.ball div { width: 20%; height: 70%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.1s; background: #000; }
.ball1 { background-color: #ff0000; } /* red */
.ball2 { background-color: #0000ff; } /* blue */
.ball3 { background-color: #ffff00; } /* yellow */
.ball4 { background-color: #00ff00; } /* green */
.ball5 { background-color: #ff8000; } /* orange */
.ball6 { background-color: #ff00ff; } /* purple */
.ball7 { background-color: #00ffff; } /* light blue */
.ball8 { background-color: #ffffff; } /* white */
.board .ball { position: absolute; z-index: 2; transform: scale(0.8); }
.board .ball.selected div { transform: translate(-50%, -50%) rotate(90deg); }

.next { margin: 20px 0; font-size: 0; line-height: 0; }
.next .ball { display: inline-block; width: 36px; height: 36px; margin-left: 12px; }
.next .ball:first-child { margin-left: 0; }


.gametypes { display: flex; flex-direction: row; justify-content: space-between; text-align: center; padding: 10px; background: #ccc; margin-bottom: 12px; }
.gametypes a { display: block; background: blue; padding: 20px 4px; width: 18%; box-sizing: border-box; color: #000; text-decoration: none; }
.gametypes a.start { background: red; }
.gametypes a.selected { background: pink; }
.options { background: #ccc; padding: 10px; margin-bottom: 12px; }

.boardholder { max-width: 800px; }

ul.top10 li.current { color: red; }