:root {
      --bg: #1e9be8
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
      user-select: none
    }

    html,
    body {
      margin: 0;
      height: 100%;
      overflow: hidden;

      font-family: 'Fredoka', system-ui, Arial, sans-serif;
      color: #fff;
      touch-action: none
    }

    canvas {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      background:
        linear-gradient(rgba(28, 19, 82, 0.10), rgba(28, 19, 82, 0.10)),
        url('bg.png') center center / cover no-repeat;
    }

    .btn {
      border: 3px solid rgba(255, 255, 255, .8);
      cursor: pointer;
      font: 700 22px 'Fredoka', Arial;
      color: #1f5a08;
      text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
      padding: 11px 30px;
      border-radius: 18px;
      background: linear-gradient(#c9f645, #63c51c);
      box-shadow: 0 6px 0 #3f8f12, 0 10px 16px rgba(0, 0, 0, .3), inset 0 3px 0 rgba(255, 255, 255, .55);
      transition: transform .1s, box-shadow .1s
    }

    .btn:active {
      transform: translateY(5px);
      box-shadow: 0 1px 0 #3f8f12
    }

    .btn.alt {
      background: linear-gradient(#ffe38a, #f5a92a);
      color: #6b3d05;
      box-shadow: 0 6px 0 #b0730f, 0 10px 16px rgba(0, 0, 0, .3), inset 0 3px 0 rgba(255, 255, 255, .55)
    }

    .ic {
      width: 58px;
      height: 58px;
      padding: 0;
      display: grid;
      place-items: center;
      border-radius: 20px
    }

    #hud {
      position: fixed;
      inset: 0;
      pointer-events: none;
      display: none;
      padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
      justify-content: space-between;
      align-items: flex-start
    }

    #hud .btn {
      pointer-events: auto
    }

    #mid {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0
    }

    #lives {
      display: flex;
      gap: 6px;
      pointer-events: none;
      margin-bottom: 2px
    }

    #lives svg {
      filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .25))
    }

    #score {
      font-size: 38px;
      font-weight: 700;
      color: #fff;
      paint-order: stroke fill;
      -webkit-text-stroke: 6px #0f5fa8;
      text-shadow: 0 4px 0 rgba(0, 0, 0, .2);
      transition: transform .15s;
      text-align: center;
      line-height: 1
    }

    #score.pop {
      transform: scale(1.25)
    }

    #score small {
      display: block;
      font-size: 16px;
      -webkit-text-stroke: 4px #0f5fa8;
      margin-top: 2px
    }

    #hint {
      position: fixed;
      top: 44%;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 20px;
      color: #fff;
      text-shadow: 0 2px 4px rgba(0, 0, 0, .4);
      opacity: 0;
      pointer-events: none;
      transition: opacity .4s;
      font-weight: 700
    }

    .ov {
      position: fixed;
      inset: 0;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      text-align: center;
      background: rgba(20, 110, 190, .25);
      backdrop-filter: blur(2px);
      z-index: 5;
      padding: 20px
    }

    .ov.show {
      display: flex;
      animation: fade .3s
    }

    @keyframes fade {
      from {
        opacity: 0
      }
    }

    @keyframes pop {
      0% {
        transform: scale(.6);
        opacity: 0
      }

      70% {
        transform: scale(1.05)
      }

      100% {
        transform: scale(1);
        opacity: 1
      }
    }

    @keyframes bob {
      50% {
        transform: translateY(-14px) rotate(4deg)
      }
    }

    .card {
      background: linear-gradient(#fff, #eef4ff);
      color: #24386b;
      border: 4px solid #fff;
      border-radius: 24px;
      padding: 24px 28px;
      max-width: 440px;
      width: 100%;
      box-shadow: 0 8px 0 rgba(0, 0, 0, .2), 0 20px 40px rgba(0, 0, 0, .35);
      animation: pop .4s both
    }

    .card h2 {
      margin: 0 0 10px;
      font-size: 32px;
      color: #2b7de0
    }

    .card ul {
      list-style: none;
      padding: 0;
      margin: 0 0 16px;
      text-align: left;
      font-size: 18px
    }

    .card li {
      padding: 7px 0;
      display: flex;
      gap: 12px;
      align-items: center
    }

    .card li b {
      font-size: 26px;
      min-width: 34px;
      text-align: center
    }

    #loader {
      z-index: 9;
      background: radial-gradient(circle at 8% 104%, #2f9e1e 0 90px, transparent 91px), radial-gradient(circle at 30% 108%, #4cc22a 0 110px, transparent 111px), radial-gradient(circle at 62% 106%, #2f9e1e 0 100px, transparent 101px), radial-gradient(circle at 92% 104%, #4cc22a 0 120px, transparent 121px), linear-gradient(#1b98ea, #59c8f8 60%, #c2f0ff)
    }

    .bar {
      width: min(320px, 80vw);
      height: 22px;
      border-radius: 14px;
      background: rgba(0, 0, 0, .25);
      padding: 3px;
      overflow: hidden;
      margin-top: 30px;
    }

    .bar i {
      display: block;
      height: 100%;
      width: 0;
      border-radius: 11px;
      background: linear-gradient(#c9f645, #63c51c);
      transition: width .2s
    }

    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      font-size: 20px
    }

    .sw {
      width: 58px;
      height: 30px;
      border-radius: 16px;
      background: #bbb;
      position: relative;
      cursor: pointer;
      transition: .2s
    }

    .sw:after {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #fff;
      transition: .2s;
      box-shadow: 0 2px 3px rgba(0, 0, 0, .3)
    }

    .sw.on {
      background: #63c51c
    }

    .sw.on:after {
      left: 31px
    }

    .big {
      font-size: 64px;
      font-weight: 700;
      color: #e8492d
    }

    .btns {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center
    }

    .lw {
      position: relative;
      width: min(560px, 90vw);
      padding-top: 22px;
      text-align: center;
      line-height: .85;
      animation: pop .6s both
    }

    .t1,
    .t2 {
      font-weight: 700;
      paint-order: stroke fill;
      position: relative;
      z-index: 2
    }

    .t1 {
      font-size: clamp(58px, 15vw, 110px);
      color: #ffd21f;
      -webkit-text-stroke: 11px #7a3b0c;
      text-shadow: 0 8px 0 #5a2a06, 0 14px 20px rgba(0, 0, 0, .35)
    }

    .t2 {
      font-size: clamp(70px, 19vw, 138px);
      color: #f4fbff;
      -webkit-text-stroke: 11px #1a4fc0;
      text-shadow: 0 8px 0 #0f3596, 0 14px 20px rgba(0, 0, 0, .35);
      margin-top: -.05em
    }

    .sbL,
    .sbR {
      position: absolute;
      width: 24%;
      z-index: 3;
      filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3));
      animation: bob 2.2s infinite ease-in-out
    }

    .sbL {
      left: -2%;
      top: 40%;
      rotate: -14deg
    }

    .sbR {
      right: -2%;
      top: 38%;
      rotate: 14deg;
      animation-delay: -1.1s
    }

    .lf {
      position: absolute;
      top: 0;
      left: 50%;
      width: 20%;
      translate: -8% 8%;
      z-index: 1
    }

    .sign {
      position: relative;
      z-index: 2;
      display: inline-block;
      margin-top: -4px;
      padding: 8px 26px 10px;
      font-weight: 700;
      font-size: clamp(22px, 6vw, 40px);
      color: #fff;
      paint-order: stroke fill;
      -webkit-text-stroke: 5px #6b3510;
      background: linear-gradient(#e8a04a, #c46f20);
      border: 4px solid #7a3f10;
      border-radius: 10px;
      box-shadow: 0 6px 0 #5a2c0a, 0 12px 16px rgba(0, 0, 0, .3);
      rotate: -1.5deg;
      line-height: 1.05
    }

    .best-score {
      font-size: 20px;
      margin-top: 20px;
    }