* {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    body {
      background: #050810;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      overflow: hidden;
      touch-action: none;
      font-family: 'Arial Black', Arial, sans-serif;
    }

    #wrap {
      position: relative;
      width: 390px;
      height: 700px;
      overflow: hidden;
      box-shadow: 0 0 80px #000;
    }

    canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    .scr {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 10;
      pointer-events: all;
    }

    .scr.off {
      display: none;
    }

    /* PRELOADER */
    #pre {
      background: linear-gradient(160deg, #070c1c 0%, #0d1628 100%);
    }

    .pre-icon {
      font-size: 64px;
      margin-bottom: 18px;
      animation: pspin 1s linear infinite;
      display: block;
    }

    @keyframes pspin {
      to {
        transform: rotate(360deg)
      }
    }

    .pre-logo {
      font-size: 44px;
      font-weight: 900;
      color: #fff;
      letter-spacing: 3px;
      text-shadow: 0 0 30px rgba(255, 200, 0, .9), 0 2px 0 #000;
      margin-bottom: 5px;
      animation: ppulse 1.4s ease-in-out infinite;
    }

    @keyframes ppulse {

      0%,
      100% {
        transform: scale(1)
      }

      50% {
        transform: scale(1.04)
      }
    }

    .pre-sub {
      font-size: 12px;
      color: #f0a500;
      letter-spacing: 8px;
      margin-bottom: 42px;
      text-transform: uppercase;
    }

    .bar-wrap {
      width: 260px;
      height: 14px;
      background: rgba(255, 255, 255, .07);
      border-radius: 20px;
      border: 1.5px solid rgba(255, 200, 0, .28);
      overflow: hidden;
      margin-bottom: 10px;
    }

    .bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #c87800, #ffe040, #ffa500);
      border-radius: 20px;
      box-shadow: 0 0 12px rgba(255, 200, 0, .7);
      transition: width .07s linear;
    }

    .bar-lbl {
      color: rgba(255, 255, 255, .45);
      font-size: 11px;
      letter-spacing: 3px;
    }

    /* HOW TO PLAY */
    #htp {
      background: linear-gradient(160deg, #06090f 0%, #0e1525 100%);
      padding: 24px 18px;
    }

    .htp-title {
      font-size: 24px;
      font-weight: 900;
      color: #ffe040;
      letter-spacing: 2px;
      text-shadow: 0 0 14px rgba(255, 220, 0, .55);
      margin-bottom: 2px;
    }

    .htp-emoji {
      font-size: 50px;
      margin: 8px 0;
      animation: flt 2s ease-in-out infinite;
    }

    @keyframes flt {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-9px)
      }
    }

    .htp-card {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 200, 0, .18);
      border-radius: 12px;
      padding: 11px 15px;
      margin: 5px 0;
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      max-width: 318px;
    }

    .htp-ic {
      font-size: 22px;
      flex-shrink: 0;
      width: 32px;
      text-align: center;
    }

    .htp-txt {
      color: #bbc;
      font-size: 12.5px;
      line-height: 1.5;
    }

    .htp-txt strong {
      color: #ffe040;
    }

    .btn-go {
      margin-top: 14px;
      padding: 14px 48px;
      background: linear-gradient(135deg, #c87800, #ffe040);
      color: #160e00;
      font-size: 18px;
      font-weight: 900;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      letter-spacing: 2px;
      box-shadow: 0 10px 30px rgba(255, 204, 0, 0.4), 0 5px 0 #b8860b;
      transition: transform .12s;
      text-transform: uppercase;
    }

    .btn-go:active {
      transform: scale(.97);
    }

    /* GAME OVER */
    #go {
      background: linear-gradient(160deg, #060810 0%, #0e1220 100%);
    }

    .go-t {
      font-size: 36px;
      font-weight: 900;
      color: #ff4040;
      text-shadow: 0 0 22px rgba(255, 40, 40, .65), 0 2px 0 #600;
      margin-bottom: 4px;
      animation: gshk .45s ease;
    }

    @keyframes gshk {

      0%,
      100% {
        transform: translateX(0)
      }

      25% {
        transform: translateX(-9px)
      }

      75% {
        transform: translateX(9px)
      }
    }

    .go-lbl {
      color: rgba(255, 255, 255, .4);
      font-size: 12px;
      letter-spacing: 3px;
      margin-bottom: 1px;
    }

    .go-sc {
      font-size: 54px;
      font-weight: 900;
      color: #fff;
      line-height: 1.1;
      margin-bottom: 3px;
    }

    .go-best {
      color: #f0a500;
      font-size: 14px;
      margin-bottom: 14px;
    }

    .go-coins {
      font-size: 18px;
      color: #ffe040;
      margin-bottom: 18px;
    }

    .btn-re {
      padding: 13px 40px;
      background: linear-gradient(135deg, #c87800, #ffe040);
      color: #160e00;
      font-size: 16px;
      font-weight: 900;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      letter-spacing: 2px;
      box-shadow: 0 10px 30px rgba(255, 204, 0, 0.4), 0 5px 0 #b8860b;
      transition: transform .12s;
      text-transform: uppercase;
    }

    .btn-re:active {
      transform: scale(.97);
    }

    /* TAP HINT */
    #taphint {
      position: absolute;
      bottom: 88px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, .5);
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 20px;
      padding: 7px 18px;
      color: rgba(255, 255, 255, .9);
      font-size: 12px;
      letter-spacing: 2px;
      pointer-events: none;
      display: none;
      animation: blnk 1s ease-in-out infinite;
      z-index: 5;
      white-space: nowrap;
    }

    @keyframes blnk {

      0%,
      100% {
        opacity: .25
      }

      50% {
        opacity: 1
      }
    }

    /* INVINCIBLE FLASH overlay */
    #invFlash {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 6;
      background: rgba(255, 80, 0, 0);
      transition: background .1s;
    }