/* default to light scheme if browser does not support prefers-color-scheme media query */
body {
  background: #e0e8e0;
  color: #111111;
}
a {
  color: #770077;
  border-color: #770077;
}
.popupDiv, .dialogDiv {
  background: #dddddd;
  border: 1px solid #111111;
}
.sidePanel {
  background: #e0e8e0;
}
#divLobbyControls {
  background: #e0e8e0a0;
}
.menuBar {
  background-color: #ede;
}
#captureText {
  background: #ffbb88;
}

@media (prefers-color-scheme: light) {
  body {
    background: #e0e8e0;
    color: #111111;
  }
  a {
    color: #770077;
    border-color: #770077;
  }
  .popupDiv, .dialogDiv {
    background: #dddddd;
    border: 1px solid #111111;
  }
  .sidePanel {
    background: #e0e8e0;
  }
  #divLobbyControls {
    background: #e0e8e0a0;
  }
  .menuBar {
    background-color: #ede;
  }
  #captureText {
    background: #ffbb88;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background: #101810;
    color: #eeeeee;
  }
  a {
    color: #ccaacc;
    border-color: #ccaacc;
  }
  .popupDiv, .dialogDiv {
    background: #333333;
    border: 1px solid #eeeeee;
  }
  .sidePanel {
    background: #101810;
  }
  #divLobbyControls {
    background: #101810a0;
  }
  .menuBar {
    background-color: #101;
  }
  #captureText {
    background: #663300;
  }
}

@font-face {
  font-family: 'impacted';
  src: url('/impacted.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: sans-serif;
  font-size: 11pt;
  transition-duration: 0.2s;
}

body.light {
  background: #e0e8e0;
  color: #111111;
}

body.dark {
  background: #101810;
  color: #eeeeee;
}

a.header {
  font-family: 'impacted', impact, 'arial narrow bold', 'sans-serif';
  font-size: 20px;
  line-height: 100%;
  text-decoration: none;
  padding-left: 5px; 
  padding-right: 5px;
}

a:hover, a:active {
  background-color: #aa66aa50;
}

a.light {
  color: #770077;
  border-color: #770077;
}

a.dark {
  color: #ccaacc;
  border-color: #ccaacc;
}

input[type="button"] {
  background: #a6a;
  color: white;
  border: 1px solid #a6a;
  border-radius: 6px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: bold;
}

input[type="button"]:hover {
  background: #b8b;
  border: 1px solid #faf;
}

input[type="button"]:active {
  background: #d9d;
  border: 1px solid #faf;
}

input[type="button"]:disabled {
  background: #cac;
  color: #ddd;
  border: 1px solid #cac;
}

button {
  appearance: none;
  background: #a6a;
  color: white;
  border: 1px solid #a6a;
  border-radius: 6px;
  padding-top: 3px;
  padding-bottom: 3px;
  font-weight: bold;
}

button:hover {
  background: #b8b;
  border: 1px solid #faf;
}

button:active {
  background: #d9d;
  border: 1px solid #faf;
}

button:disabled {
  background: #cac;
  color: #ddd;
  border: 1px solid #cac;
}

button:disabled img {
  opacity: 0.5;
}

button.panel {
  width: 120px;
  height: 60px; 
  background: #aa66aa33;
  color: #a6a;
  border: 1px solid #a6a5;
  border-right: none;
  font-family: sans-serif;
  font-size: 15px;
  font-weight: 900;
  border-radius: 0;
  transition: width 200ms;
}

button.panel:hover, button.panel:active {
  border: 1px solid #a6ac;
  border-right: none;
  background: #aa66aa55;
  width: 130px;
}

button.panel.mini {
  width: 40px;
  height: 40px;
  padding-left: 12px;
  font-size: 0;
}

button.panel.header {
  width: 60px;
  height: 25px;
  border: none;
  font-size: 13px;
  font-weight: 600;
}

button.panel.header.active {
  border-bottom: 2px solid;
}

button.panel.header.inactive {
  border-bottom: none;
}

button.green {
  width: 120px;
  height: 60px; 
  background: #595;
  color: #fff;
  border: 1px solid #373;
  font-family: sans-serif;
  font-size: 15px;
  font-weight: 900;
  border-radius: 0;
}

button.green:hover {
  background: #7b7;
}

button.green:active {
  background: #8c8;
}

#btnSetupReady {
  padding-left: 5px; 
  padding-right: 5px; 
  border-color: #070;
  background-color: #070;
}

#btnSetupReady:hover, #btnSetupReady:active {
  border-color: #5c5;
  background-color: #3a3;
}

#btnSetupReady:disabled {
  border-color: #8b8;
  background-color: #8b8;
}

input[type="text"] {
  background-color: #ffddff;
  border: 0.1em solid #aa00aa;
  padding: 0.3em;
}

input[type="text"]:disabled {
  background-color: #dddddd;
  color: #333333;
  border: 0.1em solid #dddddd;
}

input[type="number"] {
  background-color: #ffddff;
  border: 0.1em solid #aa00aa;
  padding: 0.3em;
}

input[type="number"]:disabled {
  background-color: #dddddd;
  color: #333333;
  border: 0.1em solid #dddddd;
}

#btnFindGame, #btnOpponentJoin, #btnConfirmPlay {
  padding-left: 10px; 
  padding-right: 10px; 
  border-color: #b06;
  background-color: #b06;
}

#btnFindGame:hover, #btnFindGame:active, #btnOpponentJoin:hover, #btnOpponentJoin:active, #btnConfirmPlay:hover, #btnConfirmPlay:active {
  border-color: #e6b;
  background-color: #d39;
}

#btnFindGame:disabled, #btnOpponentJoin:disabled, #btnConfirmPlay:disabled {
  border-color: #e9b;
  background-color: #e9b;
}

input[type="radio"] {
  appearance: none;
  height: 14px;
  width: 14px;
  border: 1px solid #a6a;
}

input[type="radio"]:checked {
  background-color: #d8d;
}

input[type="radio"]:disabled {
  background-color: transparent;
  border: 1px solid #808080;
}

input[type="radio"]:disabled+label {
  color: #808080;
}

input[type="checkbox"] {
  appearance: none;
  height: 15px;
  width: 15px;
  border: 1px solid #a6a;
  margin-right: 5px;
}

input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml;utf8,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><polygon fill='white' points='12,29 0,17 6,11 12,17 26,3 32,9'/></svg>");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #d8d;
}

input[type="checkbox"]:disabled {
  opacity: 0.4;
  border: 1px solid #808080;
}

input[type="checkbox"]:disabled+label {
  color: #808080;
}

textarea {
  resize: none;
  background-color: #ffddff;
  border: 0.1em solid #aa00aa;
  padding: 0.3em;
}

select {
  width: 10em;
  appearance: none;
  border: 0.1em solid #aa00aa;
  background-image: url("data:image/svg+xml;utf8,<svg fill='purple' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 50%;
  background-color: #ffddff;
  padding: 0.2em;  
}

select:disabled {
  opacity: 0.5;
}

option[value=""] {
  color: gray;
}

.popupCover {
  position: fixed; 
  z-index: 998;
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
}

.popupDiv {
  position: absolute; 
  top: 40px; 
  right: 10px; 
  padding: 5px; 
  box-shadow: 4px 4px 6px #888888; 
  z-index: 999;
  transition-duration: 0.2s;
}

.popupDiv.hidden {
  transform: translate(50%,-50%) scale(0);
  opacity: 0;
}

.popupDiv.visible {
  transform: translate(0,0) scale(1);
  opacity: 1;
}

.popupDiv.light, .dialogDiv.light {
  background: #dddddd;
  border: 1px solid #111111;
}

.sidePanel.light {
  background: #e0e8e0;
}

#divLobbyControls.light {
  background: #e0e8e0a0;
}

.popupDiv.dark, .dialogDiv.dark {
  background: #333333;
  border: 1px solid #eeeeee;
}

.sidePanel.dark {
  background: #101810;
}

#divLobbyControls.dark {
  background: #101810a0;
}

.tabHeader {
  flex: 1; 
  text-align: center; 
  cursor: pointer;
  padding-top: 2px;
  padding-bottom: 2px;
}

.tabHeader.active {
  font-weight: bold;
  border-top: 1px solid #c8c;
  border-left: 1px solid #c8c;
  border-right: 1px solid #c8c;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

#captureText.light {
  background: #ffbb88;
}

#captureText.dark {
  background: #663300;
}


.tabHeader.inactive {
  font-weight: normal;
  border-top: 1px dashed #c8c;
  border-bottom: 1px solid #c8c;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.tabHeader.inactive:hover {
  border-top: 1px solid #c8c;
}

.chatDiv {
  font-family: monospace;
  font-size: small;
  padding-left: 3px;
  padding-right: 3px;
}

.tabPanel {
  /*overflow-y: scroll;*/
  border-left: 1px solid #c8c;
  border-right: 1px solid #c8c;
  border-bottom: 1px solid #c8c;
}

#divPanelControls {
  position: absolute;
  right: 0;
  top: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.sidePanel {
  position: absolute; 
  right: 0;
  top: 75px;
  width: 520px;
  min-width: 400px;
  max-width: 1000px;
  border: 1px solid #c8c;
  border-right: none;
}

#divLobbyControls button {
  width: 200px;
  height: 50px;
  font-size: 20px;
  font-family: sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #848;
}

#divLobbyControls button:disabled {
  border: 2px solid #cac;
}

.gameListHeader {
  padding-top: 5px; 
  padding-bottom: 5px; 
  margin-top: 5px;
  text-align: center;
  background-color: rgba(128,128,128,0.3);
}

.gameList tr {
  cursor: pointer;
}

.gameList tr:hover, .gameList tr:active {
  background: #aa66aa40;
}

.gameList tr td {
  padding-left: 5px;
  padding-right: 5px;
}

.dialogCover {
  position: fixed; 
  z-index: 9998;
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
}

.dialogDiv {
  position: fixed; 
  left: 50%;
  top: 50%;
  width: 50%;
  padding: 20px;
  z-index:9999;
  box-shadow: 4px 4px 6px #888888; 
  transition-duration: 0.2s;
}

.dialogDiv.hidden {
  transform: translate(-50%,-100%) scale(0);
  opacity: 0;
}

.dialogDiv.visible {
  transform: translate(-50%,-50%) scale(1);
  opacity: 1;
}

.menuCover {
  position: fixed; 
  z-index: 9998;
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
}

.menuBar {
  position: fixed; 
  left: 0;
  top: 0;
  bottom: 0;
  width: 210px;
  z-index: 9999;
  text-align: center;
  padding-top: 10px;
  transition-duration: 0.2s;
}

.menuBar.light {
  background-color: #ede;
}

.menuBar.dark {
  background-color: #101;
}

.menuBar.hidden {
  transform: translate(-210px, 0);
  opacity: 0.5;
}

.menuBar.visible {
  transform: translate(0, 0);
  opacity: 1;
}

.menuBar .siteName {
  display: inline-block; 
  transform: rotate(2deg);
  font-family: 'impacted', impact, 'arial narrow', sans-serif;
  font-kerning: none;
  font-size: 28px;
  line-height: 110%;
  text-transform: uppercase; 
  color: #a6a; 
  border-top: 2px solid #a6a; 
  border-bottom: 2px solid #a6a;
}

.menuBar .header {
  display: block; 
  font-family: 'impacted', impact, 'arial narrow', sans-serif;
  font-size: 28px;
  text-decoration: none;
  padding-top: 10px;
  padding-bottom: 10px;
}

.menuBar .header:hover, .menuBar .header:active {
  background-color: #aa66aa40;
  border-top: none;
  border-bottom: none;
}

.settingsMenuItem {
  padding: 10px;
  border-right: 3px solid transparent;
}

.settingsMenuItem.current {
  background-color: #a6a4;
  border-right: 3px solid #a6a;
}

.settingsMenuItem:hover, .settingsMenuItem:active {
  background-color: #a6a4;
  cursor: pointer;
}

span.siteName {
  display: inline-block; 
  transform: rotate(-2deg) translateY(2px); 
  font-family: 'impacted', impact, 'arial narrow bold', 'sans-serif';
  font-kerning: none;
  line-height: 120%;
  text-transform: uppercase; 
  color: #a6a; 
  border-top: 2px solid #a6a; 
  border-bottom: 2px solid #a6a;
}

span.gameResult {
  display: inline-block; 
  transform: rotate(2deg) translateY(-6px); 
  font-family: 'impacted', impact, 'arial narrow bold', 'sans-serif';
  font-kerning: none;
  line-height: 110%;
  text-transform: uppercase; 
  border-top: 3px solid; 
  border-bottom: 3px solid;
}

span.resultStamp {
  display: inline-block;
  font-family: 'impacted', impact, 'arial narrow bold', 'sans-serif';
  font-size: 30px;
  font-kerning: none;
  line-height: 110%;
  border-top: 2px solid;
  border-bottom: 2px solid;
  rotate: -3deg;
  padding-left: 5px;
  padding-right: 5px;
}

#spectatorStats {
  position: absolute; 
  font-weight: bold;
  background: #00ffff80; 
  border: 2px solid gray;
  opacity: 0.8;
}

#spectatorStats.desktop {
  top: 0; 
  left: 50%; 
  transform: translate(-50%,0); 
  padding: 5px; 
  border-top: none;
}

#spectatorStats.mobile {
  right: 0; 
  top: 60px;
  padding: 3px; 
  font-size: small;
  border-right: none;
}

span.hint {
  cursor: pointer;
  font-size: 18px;
  font-family: monospace;
  font-weight: bold;
  color: white;
  background-color: #858;
  padding-left: 6px;
  padding-right: 6px;
  border-radius: 100%;
}

#chatReport {
  cursor: pointer;
  opacity: 0.5;
  padding-left: 5px;
  padding-right: 5px;
  color: black;
  background: yellow;
}

#chatReport:hover, #chatReport:active {
  opacity: 1
}