style.css

:root {
  /* sizes (as much sizing as possible in rem to facilitate scaling)*/
  font-size: 10px;
  --corners-big: 3rem;
  --corners-small: 2rem;
  --slot-gap: 1.2rem;
  --component-gap: 2rem;
  --border-wide: 2rem;
  --border-medium: 1.2rem;
  /* colors (dark mode?) */
  --app-bg-color: #565678;
  --app-window-color: #37374d;
  --board-border-color: #669840;
  --board-bg-color: #77aa49;
  --inventory-border-color: #a57414;
  --inventory-bg-color: #bb8a16;
  --sell-border-color: #875495;
  --sell-bg-color: #a265b3;
  --advance-border-color: #457d99;
  --advance-bg-color: #488fb4;
  --overlay-fade-color-from: rgba(55, 55, 77, 0);
  --overlay-fade-color-to: rgba(55, 55, 77, 0.55);
  --overlay-bg-color: #37374d;
  --overlay-border-color: #232333;
  --gameover-bg-color: #79afb8;
  --gameover-border-color: #4a6b70;
  --font-color-standard: black;
  --font-color-warning: red;
  --font-color-overlay: #79afb8;
}

* {
  box-sizing: border-box;
}

/* Main document styling, centers and positions the app & components */

body {
  padding: 0;
  margin: 0;
  color: var(--font-color-standard);
  font-family: 'Fredoka One', sans-serif;
  background-color: var(--app-bg-color);
  margin-top: 2rem;
}

main {
  position: relative;
  padding: 3rem;
  display: block;
  width: 36rem;
  background-color: var(--app-window-color);
  margin: auto;
  border-radius: var(--corners-big);
}

.component {
  margin-top: var(--component-gap);
}

/* Top scoreboard styling - icons are inside the value boxes and are shifted
with the position value (transform is used later in animations)*/

.scoreboard {
  color: black;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  font-size: 3rem;
}

.scoreboard > div {
  box-sizing: border-box;
  padding-right: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 14.2rem;
  height: 4rem;
  background-color: white;
  border-radius: var(--corners-big);;
}

.scoreboard > div > img {
  position: relative;
  left: -0.6rem;
  width: 6rem;
  height: 6rem;
}

.negative-value {
  color: var(--font-color-warning);
}

/* Board styling - the grids are fixed and scaled to be 3 slots wide,
wider grids would require slot size recalculation; currently they use
fixed height in rem to match the width and make sort-of-square slots */

.board {
  background-color: var(--board-border-color);
  border-radius: var(--corners-big);
  padding: var(--slot-gap);
}

.grid {
  display: grid;
  grid-auto-flow: row;
  grid-gap: var(--slot-gap)
}

.grid-3x3 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.grid-1x3 {
  grid-template-columns: 1fr 1fr 1fr;
}


.board > .grid > .slot {
  background-color: var(--board-bg-color);
}

.board > .grid > .slot > .full {
  cursor: pointer;
}

/* Inventory styling - the background image representing the 'shadow' of
the inventory boxes can be scaled and moved around for different effects */

.inventory {
  background-color: var(--inventory-border-color);
  border-radius: var(--corners-big);
  padding: var(--slot-gap);
}

.inventory > .grid > .slot {
  background-color: var(--inventory-bg-color);
  background-image: url('images/ui/inventory-slot-bg.svg');
  background-repeat: no-repeat;
  background-position: top;
  background-size: 105%;
}

/* Slot styling - a simple box with a fungus/rock/empty image within
Below are also all the animations with their respective keyframes
- this includes slot as well as button and score icon animations */

.slot {
  width: 100%;
  height: 8.5rem;
  border-radius: var(--corners-small);
}

.slot > img {
  width: 110%;
  position: relative;
  left: -5%;
  top: -5%;
  object-fit: scale-down;
}

.slot > .full {
  display: block;
}

.slot > .empty {
  display: none
}

.grow {
  animation: grow 0.6s ease-out 1;
}
@keyframes grow {
  0% {
    transform: scale(0.5, 0.5);
  }
  33% {
    transform: scale(1.1, 1.2);
  }
  100% {
    transform: scale(1, 1);
  }
}

.disappear {
  animation: disappear 0.3s linear 1 forwards;
}
@keyframes disappear {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(0, 0);
  }
}

.wiggle {
  animation: wiggle 0.5s ease-out 1;
}
@keyframes wiggle {
  0% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(0.15rad);
  }
  40% {
    transform: rotate(-0.15rad);
  }
  60% {
    transform: rotate(0.1rad);
  }
  80% {
    transform: rotate(-0.1rad);
  }
  100% {
    transform: rotate(0);
  }
}

.popout {
  animation: popout 0.4s ease-out 1;
}
@keyframes popout {
  0% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.33) translateY(-0.5rem);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

.popin {
  animation: popin 0.4s ease-out 1;
}
@keyframes popin {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

.popin-small {
  animation: popin-small 0.4s ease-out 1;
}
@keyframes popin-small {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

.popdown {
  animation: popdown 0.4s ease-out 1;
}
@keyframes popdown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.3rem);
  }
  100% {
    transform: translateY(0);
  }
}

/* Button styling - buttons have fixed height but remain somewhat resizeable
with % based background (i.e. arrows and icons) sizes  */


.control-buttons {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.control-buttons > button {
  width: 50%;
}

button {
  cursor: pointer;
  display: block;
  border-radius: var(--corners-big);
  border-width: var(--border-medium);
  border-style: solid;
  height: 10rem;
  background-repeat: no-repeat;
  background-size:
    40%,
    55%;
  background-position:
    left center,
    90% 50%;
}

.sell {
  margin-right: 1rem;
  border-color: var(--sell-border-color);
  background-color: var(--sell-bg-color);
  background-image:
    url('images/ui/button-sell-arrow.svg'),
    url('images/ui/button-sell-icon.svg');
}

.advance {
  margin-left: 1rem;
  border-color: var(--advance-border-color);
  background-color: var(--advance-bg-color);
  background-image:
    url('images/ui/button-advance-arrow.svg'),
    url('images/ui/button-advance-icon.svg');
}

.restart {
  width: 100%;
  height: 12rem;
  border-color: var(--gameover-border-color);
  background-color: var(--gameover-bg-color);
  background-image:
    url('images/ui/button-restart-arrow.svg'),
    url('images/ui/button-restart-icon.svg');
}

/* Overlay styling - overlay serves currently as game over screen so the sizing
is rather static; contrary to slots/buttons the overlay uses transition property
as a means of animating (one way animations) */

.overlay {
  z-index: 2;
  position: absolute;
  right: 0px;
  top: 0px;
  border-radius: var(--corners-big);
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--overlay-fade-color-to);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.5s linear;
}

.invisible {
  background-color: var(--overlay-fade-color-from);
}

.hidden {
  display: none;
}

.overlay > div {
  width: 24rem;
  padding: 3rem;
  color: var(--font-color-overlay);
  background-color: var(--app-window-color);
  border-radius: var(--corners-big);
  border-width: var(--border-medium);
  border-style: solid;
  transition: transform 0.5s ease-out, opacity 0.2s linear;
}

.shifted-up {
  opacity: 0;
  transform: translateY(-30rem);
}

.shifted-down {
  opacity: 0;
  transform: translateY(30rem);
}

.overlay-text {
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
}

.overlay-big {
  line-height: 5rem;
  font-size: 5rem;
  margin-bottom: 1rem;
}

.overlay-smol {
  margin-bottom: 3rem;
  font-size: 1.8rem;
}