@font-face {
  font-family: 'Coda';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/coda.woff2') format('woff2')
}
:root {
  --juniora-h: 56px;

  --game-w: min(86vw, 86vmin, 395px);

  --tower-w: calc(var(--game-w) * 115 / 395);
  --tower-h: calc(var(--game-w) * 117 / 395);
  --tower-gap: calc(var(--game-w) * 25 / 395);
  --disk-h: calc(var(--game-w) * 16 / 395);
  --disk-step: calc(var(--game-w) * 17.5 / 395)
}
#canves #score-panel,
html,
body {
  margin: 0;
  padding: 0
}
html,
body {
  width: 100%;
  height: 100%
}
*,
*:before,
*:after {
  box-sizing: border-box
}
html,
body {
  background: #ffffff;
  color: #000;
  font-family: var(--jn-font);
  -webkit-tap-highlight-color: transparent
}
body {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  padding: 20px 12px calc(var(--juniora-h) + 80px);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none
}
#canves {
  width: var(--game-w);
  height: calc(var(--game-w) * 240 / 395);
  display: flex;
  padding: 0;
  justify-content: center;
  align-items: flex-end;
  position: relative
}
#canves #score-panel {
  width: calc(var(--game-w) * 180 / 395);
  height: calc(var(--game-w) * 53 / 395);
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(var(--game-w) * 23 / 395);
  text-align: center
}
#canves #score-panel li {
  list-style: none;
  display: inline-block
}
#canves #score-panel li:last-child {
  font-family: var(--jn-font);
  display: block;
  font-size: calc(var(--game-w) * 7 / 395);
  line-height: 1
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  display: inline-block;
  fill: currentColor
}
#score-panel .icon.star {
  width: calc(var(--game-w) * 23 / 395);
  height: calc(var(--game-w) * 23 / 395);
  color: #000
}
.restart {
  cursor: pointer;
  position: absolute;
  bottom: calc(var(--game-w) * -60 / 395);
  left: 50%;
  font-size: calc(var(--game-w) * 21 / 395);
  transform: translateX(-50%);
  color: #000;
  padding: 10px;
  -webkit-tap-highlight-color: transparent
}
.restart .icon {
  width: calc(var(--game-w) * 21 / 395);
  height: calc(var(--game-w) * 21 / 395)
}
.tower {
  width: var(--tower-w);
  height: var(--tower-h);
  border-bottom: calc(var(--game-w) * 5 / 395) solid #000000;
  border-radius: calc(var(--game-w) * 7 / 395);
  position: relative;
  text-align: center;
  padding: 0;
  margin: 0 var(--tower-gap) 0 0;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  cursor: pointer
}
.tower#tower-3 {
  margin: 0
}
.tower:before {
  width: calc(var(--game-w) * 4 / 395);
  height: calc(var(--game-w) * 116 / 395);
  content: "";
  display: block;
  background: #000000;
  position: absolute;
  bottom: calc(var(--game-w) * -2 / 395);
  left: calc(50% - (var(--game-w) * 2 / 395));
  z-index: 10;
  border-radius: 30px
}
.disk {
  list-style: none;
  height: var(--disk-h);
  display: block;
  border-radius: calc(var(--game-w) * 9 / 395);
  font-size: 0;
  z-index: 20
}
.disk.hold {
  position: absolute;
  top: calc(var(--game-w) * -50 / 395);
  left: 50%;
  transform: translateX(-50%)
}
.swal2-overlay {
  background-color: white
}
.disk-1 {
  width: calc(var(--disk-step) * 1);
  background-color: #e91e63
}
.disk-2 {
  width: calc(var(--disk-step) * 2);
  background-color: #673ab7
}
.disk-3 {
  width: calc(var(--disk-step) * 3);
  background-color: #3f51b5
}
.disk-4 {
  width: calc(var(--disk-step) * 4);
  background-color: #00bcd4
}
.disk-5 {
  width: calc(var(--disk-step) * 5);
  background-color: #8bc34a
}
.disk-6 {
  width: calc(var(--disk-step) * 6);
  background-color: #ffc107
}
.disk-7 {
  width: calc(var(--disk-step) * 7);
  background-color: #ff9800
}

.juniora-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--juniora-h);
  background: #292929;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 0 16px
}
.juniora-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-family: var(--jn-font);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.9
}
.juniora-logo {
  width: 28px;
  height: auto;
  display: block
}
.juniora-text {
  letter-spacing: normal
}
@media (max-width: 480px) {
  :root {
    --juniora-h: 52px
  }
  .juniora-link {
    font-size: 12.5px
  }
  body {
    padding: 14px 8px calc(var(--juniora-h) + 70px)
  }
}

.swal2-popup,
.swal2-title,
.swal2-content,
.swal2-styled {
  font-family: var(--jn-font) !important
}
.swal2-popup {
  direction: rtl
}
.swal2-styled {
  min-height: 46px
}

.juniora-overlay {
  height: var(--juniora-h)
}
.juniora-link {
  font-family: var(--jn-font);
  font-size: clamp(12px, 3.4vw, 15px);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: normal;
  gap: 8px;
  white-space: nowrap
}
.juniora-logo {
  width: 22px;
  height: auto
}
.juniora-text {
  letter-spacing: normal
}
@media (max-height: 520px) {
  .juniora-link {
    font-size: 12px
  }
  .juniora-logo {
    width: 18px
  }
}

#canves {
  direction: ltr;
}

.mc-btn, .jump-btn, #jumpBtn, #controls button, .mc-fire {
  font-family: var(--jn-font);
  font-weight: 700;
}
#canves {
  margin-inline: auto;
  overflow: visible;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
}
.disk.hold {
  top: calc(var(--game-w) * -26 / 395);
  box-shadow: 0 calc(var(--game-w) * 6 / 395) 0 rgba(0, 0, 0, 0.28);
  outline: calc(var(--game-w) * 3 / 395) solid #a0e747;
  outline-offset: calc(var(--game-w) * 2 / 395);
  border-radius: calc(var(--game-w) * 9 / 395);
}
.tower { overflow: visible; }
.jn-star-hint {
  margin: 2px 0 0;
  font-family: var(--jn-font);
  font-size: calc(var(--game-w) * 11 / 395);
  color: #777;
  white-space: nowrap;
}
.restart {
  bottom: auto;
  top: calc(var(--game-w) * -58 / 395);
  left: auto;
  right: 0;
  transform: none;
  padding: 8px;
}