:root {
  --delta-h: 0%;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
}

#game {
  position: relative;
  border: 1px solid black;
  /* flex: 0 0 1366px;
  height: 768px; */
  flex: 0 0 min(100vw, calc(90vh * 16 / 9));
  height: min(90vh, calc(100vw * 9 / 16));
  margin-top: 7vh;
}

#paysage {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 2fr 1fr;
  grid-template-areas: "none none" "rive etang";
  background-color: lightskyblue;
}

#etang {
  background-color: dodgerblue;
  grid-area: etang;
}

#rive {
  background-color: saddlebrown;
  grid-area: rive;
}

#player {
  position: absolute;
  height: 50%;
  width: 16%;
  left: 10%;
  bottom: 15%;
}

.player-pull {
  transform-origin: bottom left;
  transform: rotate(-10deg);
}

#canne {
  position: absolute;
  width: 20%;
  height: 20%;
  left: 21%;
  bottom: 43%;
  transition: linear;
}

.canne-pull {
  transform-origin: 15% 70%;
  transform: rotate(-30deg) translate(-11%, -38%);
}

@keyframes wiggle {
  from {
    height: calc(var(--delta-h) + 41%);
    bottom: 19%;
  }
  to {
    height: calc(var(--delta-h) + 36%);
    bottom: 24%;
  }
}

@keyframes fish-caught {
  from {
    height: calc(var(--delta-h) + 40%);
    bottom: 20%;
  }
  to {
    height: calc(var(--delta-h) + 42%);
    bottom: 18%;
  }
}

@keyframes fish-pull {
  from {
    height: calc(var(--delta-h) + 47%);
    bottom: 13%;
  }
  to {
    height: calc(var(--delta-h) + 39%);
    bottom: 21%;
  }
}

#ligne {
  position: absolute;
  width: 26%;
  height: calc(var(--delta-h) + 39%);
  left: 40%;
  bottom: 21%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M1 0 L0 1 L95 96 L96 95' fill='black' /><circle cx='95' cy='95' r='4' stroke='black' stroke-width='1' fill='red' /></svg>");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%, auto;
}

.ligne-pull {
  --delta-h: 19%;
  left: 31% !important;
  width: 35% !important;
}

.fish-pull {
  animation: fish-pull 0.2s ease-out 0s infinite normal forwards;
}

.fish-caught {
  animation: fish-caught 0.25s linear 0s infinite alternate backwards;
}

.wiggle {
  animation: wiggle 1.5s ease-in-out 0s infinite alternate backwards;
}

img {
  width: 100%;
  height: 100%;
}

#stats {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 2vw;
  width: 100%;
}

@keyframes fish-pull-out {
  from {
    bottom: 21%;
    left: 64%;
    transform: rotate(70deg) translate(40%, 110%) scale(var(--size));
  }
  50% {
    bottom: 80%;
    transform: rotate(0deg) scale(var(--size));
  }
  to {
    left: 5%;
    bottom: 85%;
    transform: rotate(-10deg) scale(var(--size));
  }
}

#fish {
  z-index: 1;
  position: absolute;
  bottom: 21%;
  left: 64%;
  width: 12%;
  height: 8%;
  transform: rotate(70deg) translate(40%, 110%) scale(var(--size));
  animation: fish-pull-out 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0s 1 normal
    forwards;
}

#fish.x-small {
  --size: 0.65;
}

#fish.small {
  --size: 0.75;
}

#fish.medium {
  --size: 1;
}

#fish.big {
  --size: 1.25;
}

#fish.x-big {
  --size: 1.75;
}

#distance {
  overflow-x: visible;
  color: whitesmoke;
  height: 10%;
}

#score,
#time {
  padding-left: 1%;
}

#overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
}

#settings {
  position: absolute;
  right: 1%;
  top: 2vw;
  font-size: 1.5vw;
  z-index: 999;
}

#vibrate {
  /* transform: scale(); */
  width: 2vw;
  height: 2vw;
}

label[for="vibrate"] {
  vertical-align: top;
  line-height: 3vw;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}