* {
  transition: all 0.25s ease;
}

:root {
  --inactive-game-scale: 0.75;
  --inactive-game-transform: scale(var(--inactive-game-scale));
  --inactive-game-filter: opacity(50%);
  --active-game-scale: 1;
  --active-game-transform: scale(var(--active-game-scale));
  --active-game-filter: opacity(100%);
  --game-height: 30vh;
  --game-width: 30vw;
  --game-overlap: 5vw;
  --border-radius: 1em;
  --game-bg-color: var(--interactive-hover-bg-color);

  --text-color: #110;
  --bg-color: #ffd;
  --interactive-hover-bg-color: #ddb;
  --interactive-active-bg-color: #cca;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #ffd;
    --bg-color: #110;
    --interactive-hover-bg-color: #332;
    --interactive-active-bg-color: #443;
  }
}

body {
  color: var(--text-color);
  background-color: var(--bg-color);
}

::selection {
  background-color: var(--text-color);
  color: var(--bg-color);
}

#games {
  width: calc(
    var(--game-width) * 2 * var(--inactive-game-scale) + var(--game-width) *
      var(--active-game-scale) - var(--game-overlap) * 2
  );
  height: var(--game-height);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.game {
  width: var(--game-width);
  height: var(--game-height);
  overflow: hidden;
  position: absolute;
  border-radius: var(--border-radius);
  cursor: pointer;
  background-color: var(--game-bg-color);
  background-size: cover;
  background-position: center;

  h2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
  }

  &#current-game,
  &.available-game {
    transform: var(--active-game-transform);
    filter: var(--active-game-filter);
    left: calc(
      var(--inactive-game-scale) * var(--game-width) - var(--game-overlap)
    );
    top: 0;
    z-index: 1;
  }

  &:not(#current-game, .available-game) {
    transform: var(--inactive-game-transform);
    filter: var(--inactive-game-filter);
    top: 0;
    z-index: 0;

    &#prev-game {
      left: 0;
    }

    &#next-game {
      right: 0;
    }
  }

  &:not(#current-game, #prev-game, #next-game, .available-game) {
    display: none;
  }

  &.available-game {
    position: static;
    display: inline-block;
    margin: 0.5em;
  }
}

#button-bar {
  position: absolute;
  bottom: 2.5em;
  left: 50%;
  transform: translateX(-50%);

  button {
    border-radius: 100%;
  }
}

button,
::file-selector-button,
input {
  border-radius: var(--border-radius);
  border: currentColor solid 0.125em;
  background-color: var(--bg-color);
  color: var(--text-color);

  &:is(:hover, :focus) {
    background-color: var(--interactive-hover-bg-color);
  }

  &:active {
    background-color: var(--interactive-active-bg-color);
  }
}

dialog {
  background-color: var(--bg-color);
  color: var(--text-color);
  border-radius: var(--border-radius);
  border: currentColor solid 0.125em;
}

#downscale-canvas {
  display: none;
}