div { position: absolute; box-sizing: border-box; }
body {
  .Tabs { left: 8em; top: 1em; button { font-size: 125%; } }
  .ControlPanel {
    position:absolute; left: 0; right: 0; bottom: 0;
    height: var(--control-panel-height);
  }
  &.ShowControlPanel {
    .ControlPanel { display: block; }
    .PlayingField { bottom: var(--control-panel-height); }
  }
  &:not(.ShowControlPanel) {
    .PlayingField { bottom: 0; }
  }
  .DebugPanel {
    &.Visible { display: block; }
    position: absolute; bottom: 2em; left: 1em; width: 16em;
    display: none;
  }
  .PlayingField {
    top:0; left: 0; right: 0; bottom: 0;
    .Logo { top: 0.5em; left: 0.5em; width: 4em; height: 4em; }
    .Logo .Title { top: 100%; left: 0; width: 100%; }
    .GameConfig { left: 6em; top: 0; width: 30%; height: 100%; padding-top: 0.5em; }
    .Score { top:0.75em; left: calc(30% + 15em); width: 10em; height: 5em; }
    .Score .Success { left: 0;  top: 0; width: 50%; height: 100%; }
    .Score .Failure { left:50%; top: 0; width: 50%; height: 100%; }
    .Score .Percent { font-size: 200%; top: 0.25em; left: 0; right: 0; text-align: center; font-weight: bold; }
    .Score .Count   { font-size: 150%; top: 1.85em; left: 0; right: 0; text-align: center; }
    .Score .Controls{ left: 0; width: 175%; top: 0; height: 100%; }
    .GameCards { top: 6.5em; left:calc(30% + 8em); width: 26em; height: 42em; }
    .GameCard { width: 100%; top: 1.7em; }
    .GameCard .CatPanel { position: absolute; top: -1.7em; right: -0.5px; }
    .GameCard ol { padding-left: 1.5em; }
    .GameCard li { margin: 0.5em; position: relative; cursor: pointer; }
    .GameCard .Highlight {
      position: absolute;
      left: -1.5em; width: calc(100% + 1.5em); top: 0; height: 100%;
    }
    .GameCard.CenterStage {
      top: 4em !important; z-index: 1101 !important;
    }
    .GameCardsBottom { left: 0; right: 0; bottom: 0; top: 15em; z-index:100; }
  }
  .FullSize { left: 0; width: 100%; top: 0; height: 100%; }
  .FramesPanel { top: 0; left: 0; right: 0; bottom: 1.7em; }
}
@media screen and (max-width: 800px) {
  body .PlayingField {
    .GameConfig  { top:  3.5em; width: 22em; }
    .Score       { left:   9em !important; top: 4em !important; }
    .GameCards   { left: 2.5em !important; top: 10em !important; }
    .CenterStage { left:   0   !important; }
  }
  body.AutoplayMode .PlayingField {
    .Score     { top: 1em !important; }
    .GameCards { top: 7em !important; }
  }
}