div, .ButtonSet { transition: all 0.4s ease-in-out, 0s z-index; }
.Tabs { opacity: 0; pointer-events: none; }
fieldset { border:1px solid black; border-radius: 1em; margin-bottom: 1em; }
button { border: 1px solid #222; margin-bottom: 0.25em; }
.Logo { img { padding: 5px; } }
.Logo .Title {
  background-color: white; color:#aa1515;
  font-size: 150%; font-weight: bold; font-family: sans-serif;
}
body.AutoplayMode {
  .PlayingField, .GameConfig { pointer-events: none; user-select: none; }
}
.Hidden { opacity: 0 !important; pointer-events: none; }

.Pills {
  white-space: nowrap;
  button:first-child { border-top-left-radius: .5em; border-bottom-left-radius: .5em; border-left-width: 1px; }
  button:last-child  { border-top-right-radius: .5em; border-bottom-right-radius: .5em;}
  button { margin:0; border-left-width: 0; cursor:pointer; }
}
.ButtonSet {
  button.All, button.Invert { border: 2px solid black; }
  button.Invert::after { display: block; content: ""; }
  button { margin-right: 0.25em; border-radius: 0.5em; }
}
.Score {
  .Success { transition-duration: 0.25s; }
  .Success { border-top-left-radius: .5em; border-bottom-left-radius: .5em; }
  .Failure { border-top-right-radius:.5em; border-bottom-right-radius:.5em; }
  .Success.Zoom, .Score .Failure.Zoom {
    transform: scale(1.5);
  }
  .Controls {
    opacity: 0;
    &.Visible { opacity: 1; }
    button {
      border-radius: 0.5em;
      &:hover { background-color: #222; color: #fff; }
    }
  }
}
.GameCards {
  overflow: hidden;
  pointer-events: auto;
  &.Overlay {
    background: linear-gradient(-180deg, transparent 66%, var(--background-color) 100%);
    z-index: 9999;
    pointer-events: none;
  }
  button.Next {
    transition: opacity 0.5s ease-in-out;
    position: absolute; z-index: 999;
    border-radius: 0.5em;
    background-color: #484a4a;
    color: white;
    padding: 0.3em;
  }
  .GameCard {
    opacity: 1;
    &.Answered .Question { cursor: pointer; }
    &.Answered ol { pointer-events: none; }
    border: 1px solid black;
    .CatPanel {
      background-color: #54aeca;
      padding: 0.2em; border: 1px solid black;
      border-bottom-width: 0;
      border-top-right-radius: 0.5em;
      color: black;
      overflow: visible;
    }
    &:not(:first-of-type):not(.CenterStage).Answered .CatPanel { opacity: 0; }
    &, .Question {
      border-top-left-radius: 0.5em;
    }
    &.WaitingForServer {
      animation: 1s selection-waiting 1000ms infinite;
    }
    .Question {
      display:block; border-bottom: 1px solid black; padding:0.5em;
    }
    li .Highlight { pointer-events: none; z-index: -1; }
    li.Selected:not(.Correct):not(.Wrong) {
      animation: selection-blink 150ms 5;
    }
    li.Selected.WaitingForServer .Highlight{
      background-color: #ccc;
      animation: 1s selection-waiting 1000ms infinite;
    }
  }
  .GameCardsBottom {
    border-top: 0 solid black;
    background-color: var(--background-color);
  }
}
@keyframes selection-blink {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes selection-waiting {
  0% { opacity: 0.8; }
  50% { opacity: 0.4; }
  100% { opacity: 0.8; }
}

.ControlPanel {
  display: none;
  z-index: 9999;
  padding: 2px 0.5em;
}
.DarkenPanel {
  backdrop-filter: blur(3px);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  &.Visible { opacity: 1; pointer-events: all; }
}
.AutoplayPointer {
  background-color: #ff0000a6;
  border-radius: 50%;
  width: 2em; height: 2em; left: -2em; top: -2em;
  z-index: 9999;
  &.Click { animation: autoplay-click 500ms 1; }
}
.FramesPanel {
  display: none; z-index: 99999;
}

@keyframes autoplay-click {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.5); }
  75%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@media screen and (max-width: 800px) {
  body:not(.AutoplayMode) .Tabs { opacity: 1; pointer-events: all; }
  body .PlayingField {
    &.ShowConfig {
      .Score, .GameCards { opacity: 0; pointer-events: none;}
    }
    &.ShowGame {
      .GameConfig { opacity: 0; pointer-events: none;}
    }
  }
  body.AutoplayMode {
    .Tabs { display: none; }
  }
}