@charset "UTF-8";
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-bold.otf") format("opentype");
  src: url("../fonts/montserrat-bold.ttf") format("truetype");
  src: url("../fonts/montserrat-bold.woff2") format("woff2");
  font-weight: 700;
}
:root {
  font-family: Montserrat, sans-serif;
  font-weight: 300;
  color-scheme: light dark;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

html,
canvas {
  height: -webkit-fill-available;
  width: -webkit-fill-available;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  place-items: center;
  height: 100vh;
  width: 100vw;
  font-weight: 500;
  overflow: hidden;
  background-image: url(../img/background.jpg);
  background-size: cover;
}
body * {
  color: white;
}

button, a {
  position: absolute;
  outline: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  background-color: transparent;
}
button img, a img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

button:focus,
button:focus-visible {
  outline: none;
}

.loader {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  font-size: 18px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gameContainer,
.overlay {
  position: absolute;
  margin: auto;
  height: 177.777vw;
  width: 100vw;
  max-height: 100vh;
  max-width: 56.25vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.overlay {
  pointer-events: none;
  background-image: url(../img/nakladka_gra.png);
  display: none;
  z-index: 99;
}

.start__com {
  position: relative;
  font-size: 3vh;
  top: 78.4%;
  color: black;
  font-family: "lores-9-plus-wide", sans-serif;
  text-align: center;
}

.start__com.active__font {
  font-size: 5.33vw;
}

#snakeboard {
  position: absolute;
  top: 63.6%;
  left: 50.2%;
  height: 111.111vw;
  width: 92.59vw;
  max-height: 62.5vh;
  max-width: 52.08vh;
  transform: translate(-50%, -50%);
  border: 0;
  outline: none;
}

#score {
  position: absolute;
  font-size: 3.4vh;
  top: 26.2%;
  left: 12.1%;
  color: black;
  font-family: "lores-9-plus-wide", sans-serif;
}

#score.active__font {
  font-size: 6.04vw;
}

.controlBttn {
  cursor: pointer;
  position: absolute;
  width: 14.4%;
  height: 8.2%;
  top: 83.3%;
  border-radius: 200px;
}

#bottomBttn {
  left: 24.8%;
}

#topBttn {
  left: 8.7%;
}

#leftBttn {
  left: 61.6%;
}

#rightBttn {
  left: 77.8%;
}

.first__button {
  top: 70.7%;
  left: 28.6%;
  width: 42.8%;
  height: 7.1%;
  border-radius: 200px;
}

.rules__div {
  top: 54.5%;
  left: 69%;
  height: 1.6%;
  width: 17%;
}

.rules__div2 {
  top: 62.6%;
  left: 64.7%;
  height: 1.6%;
  width: 17%;
}

.rules__div3 {
  top: 72.7%;
  left: 27%;
  height: 1.6%;
  width: 17%;
}

form textarea, form input {
  position: absolute;
  background-color: white;
  resize: none;
  margin: 0;
  outline: none;
  border: 0;
  color: white;
  font-family: Montserrat, sans-serif;
  font-size: 1.5vh;
  font-weight: 700;
}
form textarea.active__font,
form input.active__font {
  font-size: 2.66vw;
}
form input {
  height: 5%;
  width: 78.1%;
  left: 9.3%;
  padding-left: 3%;
  color: #8f292b;
  font-weight: 700;
}
form textarea::-moz-placeholder, form input::-moz-placeholder {
  color: #8f292b;
}
form textarea::placeholder, form input::placeholder {
  color: #8f292b;
}
form #nrparagonu {
  top: 28%;
}
form #email {
  top: 37.4%;
}
form #nrtel {
  top: 46.7%;
}
form input:-webkit-autofill.show-error,
form input:-webkit-autofill:hover.show-error,
form input:-webkit-autofill:focus.show-error,
form input:-webkit-autofill:active.show-error,
form .show-error {
  background-color: #ff0033;
}
form input[type=checkbox] {
  display: none;
}
form input[type=checkbox] + label {
  cursor: pointer;
  display: inline-block;
  position: absolute;
  padding: 0 0 0 0px;
  background-position-x: left !important;
  background: url(../img/checkbox.png) no-repeat;
  height: 4.3%;
  width: 75.4%;
  left: 11.3%;
  background-size: 9.7%;
  background-position-y: 17%;
}
form #checkbox1 + .rules_label1 {
  top: 54.4%;
}
form #checkbox2 + .rules_label2 {
  top: 60.8%;
}
form #checkbox3 + .rules_label3 {
  top: 67.2%;
}
form #checkbox4 + .rules_label4 {
  top: 77.4%;
}
form input[type=checkbox]:checked + label {
  background-image: url(../img/checkbox_ok.png) !important;
}
form .checkbox_error {
  background-image: url(../img/checkbox_bad.png) !important;
}
form .send-button {
  cursor: pointer;
  top: 70.7%;
  left: 28.5%;
  width: 42.9%;
  height: 7.1%;
  padding: 0;
  border-radius: 50px;
  border: none;
  background-color: transparent;
}

/* --- Tooltip (na start ukryty) --- */
.error-tooltip {
  position: absolute;
  padding: 0.3em 0.6em;
  background-color: #FF0000;
  color: #fff;
  border-radius: 20px;
  font-size: 1.2vh;
  white-space: nowrap;
  display: none; /* Ważne: JS ustawia inline-block w razie błędu */
}

.error-tooltip.active__font {
  font-size: 2.13vw;
}

/* Tooltip - numer telefonu */
.error-tooltip-phone {
  left: 34.8%;
  top: 50.8%;
}

/* Tooltip - e-mail */
.error-tooltip-email {
  left: 36.8%;
  top: 41.4%;
}

/* --- NOWE TOOLTIPY DLA PARAGONU I DATY --- */
.error-tooltip-paragon {
  left: 36.8%;
  top: 32.2%;
}

.rules_link {
  width: 12.7%;
  height: 2%;
  left: 22.7%;
  top: 66.9%;
}

.try__again__button,
.next__form__button {
  top: 90.4%;
  width: 42.9%;
  height: 7.3%;
  border-radius: 50px;
}

.next__form__button {
  left: 52.2%;
}

.try__again__button {
  left: 5.5%;
}

.points {
  display: flex;
  justify-content: center;
  position: absolute;
  font-size: 6vh;
  top: 35.8%;
  width: 100%;
  color: black;
  font-family: "lores-9-plus-wide", sans-serif;
}

.points.active__font {
  font-size: 10.662vw;
}

.send_button,
.test_button,
.first__button {
  top: 90.3%;
  left: 52.2%;
  width: 31.6%;
  height: 7.3%;
  border-radius: 100px;
}

.test_button {
  left: 14.8%;
}

.first__button {
  left: 34.2%;
}

.try__again {
  top: 87.6%;
  left: 18.3%;
  width: 62.4%;
  height: 7%;
  border-radius: 100px;
}

.ranking {
  top: 78.8%;
  left: 18.3%;
  width: 62.4%;
  height: 7%;
  border-radius: 100px;
}

.rankingRecords {
  position: absolute;
  top: 38.7%;
  left: 20.1%;
  width: 58.4%;
  font-weight: 700;
}
.rankingRecords .personalRecords {
  position: absolute;
  top: 74.5%;
  left: 34%;
  width: 29%;
}
.rankingRecords .pointsRecord {
  position: absolute;
  left: 60%;
}
.rankingRecords .singleRecord {
  text-transform: uppercase;
  display: flex;
  flex-direction: row;
  margin-bottom: 0.7%;
  justify-content: space-between;
}

.recordP {
  font-size: 2.3vh;
  margin: 0;
  color: #8f292b;
}

.recordP.active__font {
  font-size: 4.1vw;
}

.personalRecords .singleRecord {
  display: flex;
}
.personalRecords .recordP {
  font-family: Montserrat, sans-serif;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: flex-end;
  -webkit-align-items: flex-end;
  height: 8.9%;
}
.personalRecords .pointsRecord,
.personalRecords .errorRecord {
  position: absolute;
  top: 79.8%;
  font-size: 6.5vh;
}
.personalRecords .pointsRecord {
  left: 28.9%;
}
.personalRecords .errorRecord {
  left: 77.2%;
}
.personalRecords .pointsRecord.active__font,
.personalRecords .errorRecord.active__font {
  font-size: 11.5vw;
}

.pagination {
  color: #8f292b;
  position: relative;
  top: 82%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination-button {
  top: 81%;
  color: #8f292b;
  font-size: 5vh;
  position: static;
  margin-bottom: 2%;
}

.pagination-button.active__font {
  font-size: 8.88vw;
}

.pagination-button.prev {
  margin-right: 5%;
}

.pagination-button.next {
  margin-left: 5%;
}

.pagination-button:after {
  content: none;
}

.page-info {
  color: #8f292b;
  font-size: 2vh;
}

.page-info.active__font {
  font-size: 3.55vw;
}

.ranking__button {
  top: 90.3%;
  left: 31.9%;
  width: 36.4%;
  height: 7.2%;
  border-radius: 500px;
}

.back__button {
  top: 90.3%;
  left: 31.9%;
  width: 36.4%;
  height: 7.2%;
  border-radius: 500px;
}/*# sourceMappingURL=style.css.map */