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

body {
   font-family: 'Roboto', sans-serif;
   padding: 0;
   margin: 0;
}

#page {
   width: 100%;
   height: 100vh;
   display: flex;
   flex-flow: column nowrap;
}

h1 {
   font-family: 'Vollkorn', serif;
   font-size: 2em;
   line-height: 1.4em;
   height: 1.4em;
   margin-top: 8px;
   margin-left: 8px;
   margin-bottom: 0;
}

a.plain-link {
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
   color: inherit;
   background-color: inherit;
   text-decoration: inherit;
}

.media-button-svg {
   width: 12pt;
   height: 12pt;
}

button:disabled .silhouette {
   fill: #c0c0c0;
}

#content {
   display: flex;
   flex-flow: row nowrap;
}

#cb_outer2 {
   flex: 1 1 auto;
   width: 100%;
   max-width: calc(100vh - (8px + 2.8em + 8px));
   margin-left: 8px;
}

#cb_outer {
   width: 100%;
   max-width: calc(100vw - (8px + 24px));
}

#cb_container {
   position: relative;
   width: 100%;
   padding-top: 100%;
}

#cb_inner {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
}

#cb_board {
   position: relative;
   width: 100%;
   height: 100%;
   border-collapse: collapse;
   border-style: hidden;
   padding-top: 100%;
   box-shadow: 0 0 0 1px black, 2px 2px 4px #00000080;
   border-radius: 6pt;
   overflow: hidden;
   background-color: #FAEED2;
}

#cb_board tr {
   position: relative;
}

#cb_board td {
   background-clip: padding-box;
   position: relative;
}

#cb_light_name, #cb_dark_name {
   width: 8em;
}

#cb_control_container {
   display: flex;
   flex-flow: column nowrap;
   flex: 0 1000 auto;
   margin-left: 1em;
   width: 100%;
   min-width: 24em;
   max-height: calc(100vh - (8px + 2.8em));
   padding-right: calc(3.25em + 10px);
}

#cb_control_form {
   flex: 0 1 auto;
   display: flex;
   flex-flow: column nowrap;
   margin-right: auto;
   border-radius: 6pt;
   padding: 1.125em;
   background-color: #FFFFF0;
   box-shadow: 0 0 0 1px black, 2px 2px 4px #00000080;
}

#cb_controls, #cb_theme, #cb_names, #cb_navigate {
   white-space: nowrap;
}

#cb_theme, #cb_names, #cb_navigate {
   margin-top: 1.125em;
}

#cb_scrollable {
   flex: 1 1000 auto;
   padding-bottom: 0.5em;
   overflow: auto;
}

#cb_message {
   margin-top: 0.5em;
   margin-bottom: 1em;
}

#cb_theme {
   display: flex;
   flex-flow: row nowrap;
   align-items: baseline;
}

.cb-spacer {
   flex: 1 1 auto;
}

#cb_choose_game {
   margin-left: 0.2em;
}

#cb_theme label {
   flex: 0 0 auto;
   padding-right: 0.2em;
}

#cb_undo {
   margin-left: auto;
   margin-right: 0.1em;
}

#cb_redo {
   margin-left: 0.1em;
   margin-right: auto;
}

#cb_resign {
   margin-left: 0.1em;
   margin-right: 0;
}

#cb_navigate {
   display: flex;
   flex-flow: row nowrap;
   justify-items: center;
   justify-content: center;
   padding-left: 1em;
}

#cb_navigate button {
   margin-left: 0.1em;
   margin-right: 0.1em;
}

#cb_navigate button:first-child {
   margin-left: 0;
}

#cb_navigate button:last-child {
   margin-right: 0;
}

#cb_history {
   max-width: 7.5in;
   margin-bottom: 0.5em;
}

#cb_history_future {
   color: grey;
}

#cb_explain_check {
   color: red;
   margin-top: 0.5em;
}

.cb-hbox {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
}

.cb-vbox {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
}

.cb-align-start {
   align-items: start;
}

.cb-align-stretch {
   align-items: stretch;
}

.cb-square {
   position: relative;
   width: calc((100% - 16pt) / 8);
   height: calc((100% - 16pt) / 8);
   border: 1px solid black;
   padding: 0;
}

.cb-horiz-label {
   position: relative;
   width: calc((100% - 16pt) / 8);
   height: 8pt;
   border: 1px solid black;
   padding: 0;
}

.cb-horiz-label div {
   position: absolute;
   top: calc(50% - (1em / 2));
   left: 0;
   bottom: 0;
   right: 0;
   font-size: 6pt;
   line-height: 6pt;
   text-align: center;
}

.cb-vert-label {
   position: relative;
   width: 8pt;
   height: calc((100% - 16pt) / 8);
   border: 1px solid black;
   padding: 0;
}

.cb-vert-label div {
   position: absolute;
   top: calc(50% - (1em / 2));
   left: 0;
   bottom: 0;
   right: 0;
   font-size: 6pt;
   line-height: 6pt;
   text-align: center;
   vertical-align: middle;
}

.cb-archive .cb-horiz-label, .cb-archive .cb-vert-label, .cb-archive .cb-corner {
   background-color: #ffeeee;
}

.cb-lt-bg {
   background-color: #FFFFF0;
}

.cb-lt-bg.cb-start, .cb-lt-bg.cb-end {
   background-color: #CCFFC0;
}

.cb-lt-bg.cb-legal {
   background-color: #E6E6F2;
}

.cb-dk-bg {
   background-color: #F5DEB3;
}

.cb-dk-bg.cb-start, .cb-dk-bg.cb-end {
   background-color: #D0E398;
}

.cb-dk-bg.cb-legal {
   background-color: #C4B2C2;
}

.cb-phantom {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(128,128,128,0.5);
   z-index: 10;
}

.cb-lt-piece, .cb-dk-piece {
   position: absolute;
   top: 0;
   left: 0;
   bottom: auto;
   right: auto;
   width: 100%;
   height: 100%;
}

#cb_phantom .cb-lt-piece,
#cb_phantom .cb-dk-piece {
   top: 5%;
}

#cb_board #cb_phantom .cb-lt-piece,
#cb_board.cb-reversed #cb_phantom .cb-dk-piece {
   left: 15%;
   right: auto;
   clip-path: inset(0 15% 0 0);
}

#cb_board #cb_phantom .cb-dk-piece,
#cb_board.cb-reversed #cb_phantom .cb-lt-piece {
   left: auto;
   right: 15%;
   clip-path: inset(0 0 0 15%);
}

.noselect {
   cursor: default;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.cb-piece.cb-in-check {
   filter: drop-shadow(0 0 5px red);
   -webkit-filter: drop-shadow(0 0 5px red);
}

.cb-piece.cb-selected, .cb-piece.cb-selected.cb-in-check {
   filter: drop-shadow(0 0 5px blue);
   -webkit-filter: drop-shadow(0 0 5px blue);
}

#cb_board .cb-piece.ui-draggable {
   cursor: grab;
}

#cb_board .cb-piece.ui-draggable-disabled {
   cursor: default;
}

#cb_board.cb-lt-turn .cb-lt-piece, #cb_board.cb-dk-turn .cb-dk-piece {
   z-index: 2;
}

#cb_board.cb-lt-turn .cb-dk-piece, #cb_board.cb-dk-turn .cb-lt-piece {
   z-index: 1;
}

.badges {
   position: fixed;
   bottom: 5px;
   right: 5px;
   margin: 0;
   display: flex;
   flex-flow: column nowrap;
   justify-content: flex-end;
   align-items: center;
}

.badge {
   margin: 0;
}

.badge img {
   width: 3em;
   height: 3em;
   opacity: 0.5;
   margin: 0;
}

.badge.game-link-badge img {
   width: 1.8em;
   height: 1.8em;
   margin: 0.6em;
}

.game-tiles {
   max-width: 80vw;
   max-height: 80vh;
   overflow-y: auto;
   text-align: center;
}

.game-tiles > * {
   vertical-align: middle;
}

.game-tile {
   position: relative;
   display: inline-flex;
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
   width: 14em;
   height: 14em;
   box-shadow: 0 0 0 1px black, 5px 5px 3px #00000080;
   margin: 1em;
   padding: 0.5em;
   border-radius: 6pt;
   background-color: #FFFFF0;
   overflow: hidden;
   background-image:
      linear-gradient(45deg, #FAF0DD 25%, transparent 25%),
      linear-gradient(-45deg, #FAF0DD 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #FAF0DD 75%),
      linear-gradient(-45deg, transparent 75%, #FAF0DD 75%);
   background-size: 80px 80px;
   background-position: -20px -20px, -20px 20px, 20px -60px, -60px -20px;
}

.game-tile:hover {
   box-shadow: 0 0 0 1px black, 5px 5px 3px #0000FF80;
}

.game-tile.game-tile-selected {
   box-shadow: 0 0 0 2px blue, 5px 5px 3px #00000080;
}

.game-tile.game-tile-selected:hover {
   box-shadow: 0 0 0 2px blue, 5px 5px 3px blue;
}

.new-game-tile {
}

.new-game-text {
   font-size: 3em;
   text-shadow: 2px 2px 4px #000000c0;
   font-weight: bold;
}

.new-game-text::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   background-image: url(../svg/new-game.svg);
   background-size: contain;
   background-repeat: no-repeat;
   opacity: 0.25;
}

.game-tile-title {
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
   flex: 0 0 auto;
   width: 100%;
   height: 50%;
   overflow: hidden;
}

.game-tile-lt-name, .game-tile-dk-name {
   font-size: 120%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.game-tile-lt-name::before {
   content: '';
   display: inline-block;
   background-image: url(../svg/pacosako-theme.svg#light_king_left);
   background-size: contain;
   background-repeat: no-repeat;
   width: 1.2em;
   height: 1.2em;
   margin-left: 0;
   margin-top: 0;
   margin-bottom: -0.2em;
   margin-right: -0.4em;
}

/* extra space to keep the line centered */
.game-tile-lt-name::after {
   content: '';
   display: inline-block;
   width: 1.2em;
   height: 1.2em;
   margin-left: -0.4em;
   margin-top: 0;
   margin-bottom: -0.2em;
   margin-right: 0;
}

/* extra space to keep the line centered */
.game-tile-dk-name::before {
   content: '';
   display: inline-block;
   width: 1.2em;
   height: 1.2em;
   margin-left: 0;
   margin-top: 0;
   margin-bottom: -0.2em;
   margin-right: -0.4em;
}

.game-tile-dk-name::after {
   content: '';
   display: inline-block;
   background-image: url(../svg/pacosako-theme.svg#dark_king_right);
   background-size: contain;
   background-repeat: no-repeat;
   width: 1.2em;
   height: 1.2em;
   margin-left: -0.4em;
   margin-top: 0;
   margin-bottom: -0.2em;
   margin-right: 0;
}

.game-tile-lt-name {
   display: block;
}

.game-tile-title-vs {
   display: block;
   font-weight: bold;
   margin-top: 0.25em;
   margin-bottom: 0.25em;
}

.game-tile-dk-name {
   display: block;
}

.game-tile-spacer {
   display: block;
   flex: 1 1 auto;
}

.game-tile-status {
   display: block;
   font-weight: bold;
   margin-top: 0.5em;
}

.game-tile-moves {
   display: block;
   margin-top: 0.75em;
}

.game-tile-age {
   display: block;
   margin-top: 0.5em;
}

.game-tile {
   font-size: calc(12in * 0.015);
}

@media only screen and (min-width: 6in) and (max-width: 12in) {
   .game-tile {
      font-size: 1.5vw;
   }
}

@media only screen and (max-width: 6in) {
   .game-tile {
      font-size: calc(6in * 0.015);
   }
}

@media only screen and (max-aspect-ratio: 3/2) {
   #content {
      flex-flow: column nowrap;
   }

   #cb_outer2 {
      width: auto;
   }

   #cb_control_container {
      margin-top: 1em;
      margin-left: 8px;
      max-height: none;
      overflow: visible;
      width: 100%;
      max-width: calc(100vw - (8px + 24px));
      padding-right: 0;
   }

   .badges {
      position: static;
      bottom: auto;
      right: auto;
      margin-left: auto;
      margin-right: 5px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-end;
   }
}

.cb-dk-piece.cb-king   { content: url(../svg/traditional-theme.svg#dark_king_right); }
.cb-dk-piece.cb-queen  { content: url(../svg/traditional-theme.svg#dark_queen_right); }
.cb-dk-piece.cb-bishop { content: url(../svg/traditional-theme.svg#dark_bishop_right); }
.cb-dk-piece.cb-knight { content: url(../svg/traditional-theme.svg#dark_knight_right); }
.cb-dk-piece.cb-rook   { content: url(../svg/traditional-theme.svg#dark_rook_right); }
.cb-dk-piece.cb-pawn   { content: url(../svg/traditional-theme.svg#dark_pawn_right); }
.cb-lt-piece.cb-king   { content: url(../svg/traditional-theme.svg#light_king_left); }
.cb-lt-piece.cb-queen  { content: url(../svg/traditional-theme.svg#light_queen_left); }
.cb-lt-piece.cb-bishop { content: url(../svg/traditional-theme.svg#light_bishop_left); }
.cb-lt-piece.cb-knight { content: url(../svg/traditional-theme.svg#light_knight_left); }
.cb-lt-piece.cb-rook   { content: url(../svg/traditional-theme.svg#light_rook_left); }
.cb-lt-piece.cb-pawn   { content: url(../svg/traditional-theme.svg#light_pawn_left); }

.cb-reversed .cb-dk-piece.cb-king   { content: url(../svg/traditional-theme.svg#dark_king_left); }
.cb-reversed .cb-dk-piece.cb-queen  { content: url(../svg/traditional-theme.svg#dark_queen_left); }
.cb-reversed .cb-dk-piece.cb-bishop { content: url(../svg/traditional-theme.svg#dark_bishop_left); }
.cb-reversed .cb-dk-piece.cb-knight { content: url(../svg/traditional-theme.svg#dark_knight_left); }
.cb-reversed .cb-dk-piece.cb-rook   { content: url(../svg/traditional-theme.svg#dark_rook_left); }
.cb-reversed .cb-dk-piece.cb-pawn   { content: url(../svg/traditional-theme.svg#dark_pawn_left); }
.cb-reversed .cb-lt-piece.cb-king   { content: url(../svg/traditional-theme.svg#light_king_right); }
.cb-reversed .cb-lt-piece.cb-queen  { content: url(../svg/traditional-theme.svg#light_queen_right); }
.cb-reversed .cb-lt-piece.cb-bishop { content: url(../svg/traditional-theme.svg#light_bishop_right); }
.cb-reversed .cb-lt-piece.cb-knight { content: url(../svg/traditional-theme.svg#light_knight_right); }
.cb-reversed .cb-lt-piece.cb-rook   { content: url(../svg/traditional-theme.svg#light_rook_right); }
.cb-reversed .cb-lt-piece.cb-pawn   { content: url(../svg/traditional-theme.svg#light_pawn_right); }

/* vim: set expandtab sw=3 ts=8: */