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

@font-face {
  font-family: "pixel";
  src: url(pixel.otf) format(opentype);
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh;
  background-color: #151820;
  color: #bdc3c7;
  font-family: "pixel", sans-serif;
}

.icon {
  display: inline-grid;
  grid-template-columns: repeat(max-content, var(--width));
  grid-template-rows: repeat(max-content, var(--height));
  aspect-ratio: var(--width) / var(--height);
  align-content: center;
}

.icon > span {
  display: inline-block;
  aspect-ratio: 1 / 1;
}

#canvas {
  cursor: none;
}

#sidebar {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #151820dd;
  backdrop-filter: blur(7px) saturate(110%);
  width: 400px;
  height: 100%;
  display: grid;
  grid-template-rows: min-content min-content auto 1fr min-content;
  justify-items: center;
}

#sidebar::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  right: -2px;
}

#header {
  padding: 20px;
  display: grid;
  grid-template-rows: min-content min-content;
  justify-items: center;
}

#title {
  font-size: 50px;
  padding-bottom: 5px;
}

#subtitle {
  font-size: 20px;
}

#stats {
  width: 300px;
  display: grid;
  grid-template-columns: 20px 3fr 2fr;
  row-gap: 10px;
  padding: 25px;
  align-content: center;
  align-items: center;
}

#stats > .cell {
  display: contents;
}

#stats > .cell > .icon {
  width: 25px;
  height: 25px;
}

#stats > .cell > span {
  padding-top: 2.5px;
  justify-self: flex-end;
}

#canvas, #sidebar {
  cursor: none;
}

#cursor {
  pointer-events: none;
  position: absolute;
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--player-color);
}

#content:not(:empty) {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 25px 45px;
  gap: 25px;
}

.button {
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 10px;
  position: relative;
  transition: color .1s;
  --thick-width: 5px;
  --hover-offset: 10px;
}

.button.pressed {
  transition-delay: .15s;
}

.button::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid currentColor;
  transition: border-width .1s, width .1s, height .1s;
}

.button:hover::before {
  border-width: var(--thick-width);
  width: calc(100% + var(--hover-offset));
  height: calc(100% + var(--hover-offset));
}

.button.pressed::before {
  border-width: var(--thick-width);
  width: 100%;
  height: 100%;
}
/* .button.boing.selected::before {
  animation: boing1 .2s running 1;
}

.button.boing::before {
  animation: boing2 .2s running 1;
} */

@keyframes boing1 {
  50% {
    width: 100%;
    height: 100%;
  }
}

@keyframes boing2 {
  50% {
    width: 100%;
    height: 100%;
  }
}

#content > .scenario {
  grid-template:
    "title players" auto
    "subtitle players" auto
    / 1fr auto;
}

#content > .scenario > .title {
  grid-area: title;
  font-size: 25px;
}

#content > .scenario > .subtitle {
  grid-area: subtitle;
}

#content > .scenario > .players {
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  grid-area: players;
}

#content::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 20px;
}

.scroll {
  overflow: hidden auto;
  scrollbar-color: #bdc3c722 transparent;
  scrollbar-width: thin;
  scrollbar-gutter: stable both-edges;
  mask:
    linear-gradient(transparent, rgba(0, 0, 0, 1) 25px, rgba(0, 0, 0, 1)) top / calc(100% - 20px) 50%,
    linear-gradient(to top, transparent, rgba(0, 0, 0, 1) 25px) bottom / calc(100% - 20px) 50%,
    linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)) left / 10px 100%,
    linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)) right / 10px 100%;
  mask-repeat: no-repeat;
}

.scroll::-webkit-scrollbar {
  width: 10px;
}

.scroll::-webkit-scrollbar-thumb {
  background: #bdc3c722;
  border: 2.5px solid transparent;
  background-clip: content-box;
  border-radius: 5px;
}

#content > .scenario > .players > .icon {
  width: 15px;
  height: 15px;
}

#content > .stamp {
  min-height: 75px;
  max-height: 75px;
  align-content: center;
  grid-template:
    "shortcut icon energy" auto
    / auto 1fr auto;
  gap: 15px;
}

#content > .stamp > .shortcut {
  grid-area: shortcut;
  padding: 5px;
}

#content > .stamp > .icon {
  grid-area: icon;
  width: min(calc(10px * var(--width)), 100%, calc(50px * var(--width) / var(--height)));
}

#content > .stamp > .icon > span {
  max-height: 100%;
}

#content > .stamp > .energy {
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  grid-area: energy;
}

#content > .stamp > .energy > .icon {
  display: none;
  width: 15px;
  height: 15px;
}

#content > .stamp > .energy > span {
  padding-top: 3.5px;
}

.stamp.selected {
  color: var(--player-color);
}

#chat:not(:empty) {
  white-space: pre-line;
  padding: 25px 45px;
  width: 100%;
  height: 100%;
}

hr {
  border: none;
  border-top: 2px solid #858A8F;
  margin: 20px 0px;
}

#chat {
  color: #858A8F;
}

#chat em {
  font-style: normal;
  color: #bdc3c7;
  text-shadow: 0 0 1px white;
}

#panel {
  display: flex;
  align-items: center;
  gap: 10px;
}

#player_switcher:not(:empty) {
  padding: 10px;
  display: grid;
  grid-template-columns: min-content min-content;
  grid-template-rows: min-content min-content;
  justify-content: center;
  gap: 10px;
}

#player_switcher > .button {
  width: 40px;
  height: 40px;
  color: var(--color);
}

#player_switcher > .button:not(.selected) {
  color: color-mix(in srgb, var(--color), var(--dark-color) 75%);
}

#player_switcher > .button > .icon {
  width: 100%;
  height: 100%;
}

#stats .controls {
  display: flex;
  gap: 10px;
  margin-right: -9px;
}

#stats .controls > .button {
  width: 25px;
  height: 25px;
  padding: 7px;
  --thick-width: 4px;
  --hover-offset: 6px;
}

#stats .controls > .button.selected {
  color: var(--player-color);
}

#stats .controls .button > .icon {
  width: 100%;
  height: 100%;
}


#dpad:not(:empty) {
  display: grid;
  grid-template-columns: min-content min-content min-content;
  grid-template-rows: min-content min-content min-content;
  padding: 10px;
  gap: 10px;
}

#dpad > .button {
  width: 40px;
  height: 40px;
  --thick-width: 4px;
  --hover-offset: 6px;
}

#dpad > .button > .icon {
  width: 100%;
  height: 100%;
}

#dpad > .button.selected {
  color: var(--player-color);
}

#dpad:not(.ortho) > .button.ortho,
#dpad:not(.diag) > .button.diag {
  color: color-mix(in srgb, currentColor, #151820 75%);
}