style.css

/************************
** Page *****************
************************/

@font-face {
  font-family: 'Red Alert';
  src: url('./assets/font/CCRedAlertINET.woff2') format('woff2'),
       url('./assets/font/CCRedAlertINET.woff') format('woff');
}

html {
  width: 100%;
  height: 100%;
  font-size: 19px;
  font-family: 'Red Alert', system-ui, sans-serif;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  display: grid;
  place-items: center;
}

button {
  padding: 0;
  font: inherit;
  color: inherit;
  background: rgba(255, 255, 255, .1);
  border: none;
  border-radius: 32px;
}

button:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px white;
}

button:hover {
  background: rgba(255, 255, 255, .2);
}



/************************
** Around the game ******
************************/

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  overflow: hidden;
  position: relative;

  --cell-size: 64;
  --columns: 13;
  --rows: 9;
  width: calc(var(--columns) * var(--cell-size) * 1px);
  height: calc(var(--rows) * var(--cell-size) * 1px + 32px);
}

body:not([data-translated]) .container {
  opacity: 0;
}

.score-container {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  justify-content: space-around;
  justify-content: space-evenly;
  align-items: center;
  height: 32px;
}

/* Title screen & game over screen */

.title-screen,
.game {
  color: white;
}

.title-screen {
  grid-column: 1 / -1;
  grid-row: 1;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 34% 33% 33%;
  place-items: center;
  padding: 20px;
  z-index: 2;
}

.title,
.you-lost {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  row-gap: 10px;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto auto;
}

.le-titre.le-titre {
  grid-column: 2;
  grid-row: 1;
  font-size: 48px;
  text-transform: uppercase;
}

.title-icons {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-rows: 64px;
  grid-template-columns: repeat(auto-fill, 64px);
  margin: auto;
}

.herbe {
  grid-row: 1;
  background-image: url('./assets/deco2.png');
}

.fleurs {
  grid-row: 1;
  grid-column: 2;
  background-image: url('./assets/deco.png');
}

.boole {
  grid-row: 1;
  grid-column: 2;
  background-image: url('./assets/boole1.png');
}

.tombe {
  grid-row: 1;
  grid-column: 2;
  background-image: url('./assets/tomb.png');
}

.description {
  grid-column: 2;
  grid-row: 3;
  max-width: 60%;
  margin: auto;
}

.tutorial {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 19px;
}

.tutorial-element {
  display: grid;
  place-items: center;
  grid-template-rows: 1fr auto;
}

.title-screen span {
  text-align: center;
  font-size: 18px;
}

.icone {
  width: 64px;
  height: 64px;
  background-size: cover;
  image-rendering: pixelated;
}

.icone-bonus {
  background-image: url('./assets/bonus_mult.png');
}
.fleche {
  background-image: url('./assets/arrow.png');
}
.fleche.gauche {
  transform: rotate(-90deg);
}
.fleche.droite {
  transform: rotate(90deg);
}
.fleche.bas {
  transform: rotate(180deg);
}

.icones-fleches {
  display: grid;
  grid-template-columns: 64px 64px 64px;
  grid-template-rows: 64px 64px;
}

.icones-boulder {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px;
}

.ombre1, .ombre2, .ombre3, .boulder {
  width: 32px;
  height: 32px;
}

.ombre1 {
  background-image: url('./assets/shadow1.png');
}
.ombre2 {
  background-image: url('./assets/shadow2.png');
}
.ombre3 {
  background-image: url('./assets/shadow3.png');
}
.boulder {
  background-image: url('./assets/boulder.png');
}

.title-screen:not(.game-over) .you-lost,
.title-screen:not(.game-over) .try-again,
.title-screen.game-over .title,
.title-screen.game-over .first-start {
  display: none;
}

button {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  place-items: center;
  font-size: 48px;
  width: 100%;
  height: 100%
}



/************************
** The game itself ******
************************/

.game {
  grid-column: 1 / -1;
  grid-row: 1;

  --cell-size: 64;
  --columns: 13;
  --rows: 9;
  width: calc(var(--columns) * var(--cell-size) * 1px);
  height: calc(var(--rows) * var(--cell-size) * 1px);

  display: grid;
  grid-template-columns: repeat(var(--columns), calc(var(--cell-size) * 1px));
  grid-template-rows: repeat(var(--rows), calc(var(--cell-size) * 1px));
  background-color: black;
  overflow: hidden;
  z-index: 1;
}

.sprite,
.player,
.meteor,
.meteor-shade,
.bonus,
.deco,
.lava {
  grid-column: var(--column, auto);
  grid-row: var(--row, auto);
  background-size: cover;
  image-rendering: pixelated;
  position: relative;
}

/* Player */

.player {
  background-image: url('./assets/boole1.png');
  z-index: 5;
}

.player.facing-right {
  transform: scaleX(-1);
}

.player.dead {
  background-image: url('./assets/tomb.png');
  z-index: 7;
}

/* Bonus */

.bonus {
  z-index: 1;
}

.bonus.clone {
  background-image: url('./assets/bonus_mult.png');
}

/* Meteor */

@keyframes opacify {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.meteor-shade {
  background-image: url('./assets/shadow1.png');
  z-index: 3;
  animation: opacify .2s linear;
  opacity: 1;
  transform: translateY(4px);
}

.meteor-shade.bigger {
  background-image: url('./assets/shadow2.png');
}

.meteor-shade.biggest {
  background-image: url('./assets/shadow3.png');
}

.meteor {
  z-index: 6;
}

.meteor>.body {
  width: 100%;
  height: 100%;

  background-image: url('./assets/boulder.png');
  background-size: cover;
  image-rendering: pixelated;
}

/* Decoration */

.deco {
  z-index: 0;
  background-color: black;
}
.deco1 {
  background-image: url('./assets/deco.png');
}
.deco2 {
  background-image: url('./assets/deco2.png');
}

/* Lava pond */

.lava {
  background-image: url('./assets/lava/lava_tile.png');
  background-color: black;
  z-index: 1;
}
.lava.top {
  background-image: url('./assets/lava/lava_tile_border_top.png');
}
.lava.bottom {
  background-image: url('./assets/lava/lava_tile_border_top.png');
}
.lava.left {
  background-image: url('./assets/lava/lava_tile_border_left.png');
}
.lava.right {
  background-image: url('./assets/lava/lava_tile_border_right.png');
}
.lava.top.left {
  background-image: url('./assets/lava/lava_tile_angle_topleft.png');
}
.lava.top.right {
  background-image: url('./assets/lava/lava_tile_angle_topright.png');
}
.lava.bottom.left {
  background-image: url('./assets/lava/lava_tile_angle_bottomleft.png');
}
.lava.bottom.right {
  background-image: url('./assets/lava/lava_tile_angle_bottomright.png');
}
.lava.bottom:not(.left):not(.right) {
  transform: scaleY(-1);
}



/* -------------------------- */



.off {
  display: none;
}