@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&display=swap');

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

    body {
      background: #0d1b2a;
      font-family: 'Nunito', 'Segoe UI', sans-serif;
      overflow: hidden;
      user-select: none;
      touch-action: none;
    }

    canvas {
      display: block;
    }

    /* ── PRELOADER ── */
    #preloader {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: linear-gradient(160deg, #0d3b6e 0%, #1a6fa8 45%, #3ab5e5 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
    }

    .pre-ball {
      width: 60px;
      height: 60px;
      background: radial-gradient(circle at 35% 30%, #fff 0%, #c8e6f5 50%, #5ab4d6 100%);
      border-radius: 50%;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .4), 0 0 0 6px rgba(255, 255, 255, .12);
      animation: preBounce .65s ease-in-out infinite alternate;
    }

    @keyframes preBounce {
      to {
        transform: translateY(-28px) scaleX(1.08) scaleY(.92);
      }
    }

    .pre-logo {
      font-size: 46px;
      font-weight: 900;
      color: #fff;
      letter-spacing: -1px;
      text-shadow: 0 4px 20px rgba(0, 0, 0, .4);
      animation: logoPop .5s .1s both;
    }

    .pre-logo span {
      color: #ffe566;
    }

    .pre-tag {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .7);
    }

    .bar-wrap {
      width: 240px;
      height: 12px;
      border-radius: 99px;
      background: rgba(255, 255, 255, .2);
      overflow: hidden;
    }

    .bar-fill {
      height: 100%;
      width: 0;
      border-radius: 99px;
      background: linear-gradient(90deg, #ffe566, #ff9238);
      transition: width .08s linear;
    }

    .bar-pct {
      font-size: 12px;
      font-weight: 700;
      color: rgba(255, 255, 255, .6);
    }

    @keyframes logoPop {
      from {
        transform: scale(.4);
        opacity: 0
      }

      to {
        transform: scale(1);
        opacity: 1
      }
    }

    /* ── MODAL BASE ── */
    .overlay {
      position: fixed;
      inset: 0;
      z-index: 150;
      background: rgba(5, 15, 35, .8);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .card {
      background: linear-gradient(145deg, #0f3460, #0a2440);
      border: 1.5px solid rgba(255, 255, 255, .14);
      border-radius: 28px;
      padding: 32px 28px;
      max-width: 360px;
      width: 100%;
      color: #fff;
      box-shadow: 0 32px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .08);
      animation: slideUp .35s ease-out;
    }

    @keyframes slideUp {
      from {
        transform: translateY(36px);
        opacity: 0
      }

      to {
        transform: translateY(0);
        opacity: 1
      }
    }

    .card h2 {
      font-size: 24px;
      font-weight: 900;
      color: #ffe566;
      margin-bottom: 20px;
      text-align: center;
    }

    /* ── HOW TO PLAY ── */
    .tip {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 14px;
    }

    .tip .ico {
      font-size: 26px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .tip p {
      font-size: 13.5px;
      line-height: 1.55;
      color: rgba(255, 255, 255, .88);
    }

    .tip strong {
      color: #ffe566;
    }

    .jump-badges {
      display: flex;
      gap: 8px;
      margin: 4px 0 0;
    }

    .badge {
      padding: 3px 10px;
      border-radius: 99px;
      font-size: 11px;
      font-weight: 800;
      background: rgba(255, 255, 255, .12);
      color: #ffe566;
      border: 1px solid rgba(255, 230, 100, .3);
    }

    .btn-primary {
      margin-top: 22px;
      width: 100%;
      padding: 15px;
      border: none;
      border-radius: 16px;
      background: linear-gradient(135deg, #ffe566 0%, #ff9238 100%);
      color: #0d1b2a;
      font-size: 17px;
      font-weight: 900;
      cursor: pointer;
      letter-spacing: .5px;
      box-shadow: 0 8px 24px rgba(255, 160, 0, .35);
      transition: transform .13s, box-shadow .13s;
    }

    .btn-primary:active {
      transform: scale(.97);
      box-shadow: 0 4px 12px rgba(255, 160, 0, .2);
    }

    /* ── HUD ── */
    #hud {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 50;
      display: none;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px 0;
      pointer-events: none;
    }

   .pill{
    display:flex;
    align-items:center;
    gap:8px;

    padding:8px 18px;
    min-height:42px;

    border-radius:999px;
    border:3px solid rgba(255,255,255,.9);

    background:linear-gradient(
        180deg,
        #4fc3ff 0%,
        #1b8cff 45%,
        #0068e8 100%
    );

    color:#fff;
    font-size:16px;
    font-weight:800;
    letter-spacing:.3px;

    position:relative;
    overflow:hidden;

    box-shadow:
        0 4px 0 #004fb8,
        0 10px 18px rgba(0,0,0,.28),
        inset 0 2px 0 rgba(255,255,255,.55),
        inset 0 -3px 6px rgba(0,0,0,.18);
}

/* Gloss highlight */
.pill::before{
    content:"";
    position:absolute;
    top:4px;
    left:10px;
    right:10px;
    height:35%;

    border-radius:999px;

    background:rgba(255,255,255,.28);
}

/* Number */
.pill .val{
    color:#ffe85a;
    font-weight:900;

    text-shadow:
        0 1px 0 rgba(0,0,0,.35),
        0 0 8px rgba(255,230,90,.45);
}

/* Icon */
.pill i,
.pill svg{
    font-size:18px;
    color:#fff;
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));
}
    /* ── SOUND BTN ── */
    #sndBtn {
      position: fixed;
      top: 8px;
      right: 100px;
      z-index: 100;

      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: 3px solid rgba(255, 255, 255, .9);

      background: linear-gradient(180deg,
          #013081 0%,
          #1b8cff 45%,
          #0068e8 100%);

      color: #fff;
      font-size: 24px;
      cursor: pointer;

      display: none;
      align-items: center;
      justify-content: center;

      box-shadow:
        0 6px 0 #004fb8,
        0 10px 20px rgba(0, 0, 0, .28),
        inset 0 3px 0 rgba(255, 255, 255, .55),
        inset 0 -3px 6px rgba(0, 0, 0, .18);

      transition:
        transform .15s ease,
        box-shadow .15s ease;
    }

    #sndBtn::before {
      content: "";
      position: absolute;
      top: 6px;
      left: 10px;
      width: 65%;
      height: 35%;
      border-radius: 50%;
      background: rgba(255, 255, 255, .35);
      filter: blur(1px);
    }

    #sndBtn:hover {
      transform: translateY(-2px) scale(1.05);

      box-shadow:
        0 8px 0 #004fb8,
        0 14px 24px rgba(0, 0, 0, .32),
        inset 0 3px 0 rgba(255, 255, 255, .6),
        inset 0 -3px 6px rgba(0, 0, 0, .18);
    }

    #sndBtn:active {
      transform: translateY(3px) scale(.96);

      box-shadow:
        0 2px 0 #004fb8,
        0 4px 10px rgba(0, 0, 0, .25),
        inset 0 2px 6px rgba(0, 0, 0, .2);
    }

    /* ── JUMP INDICATOR ── */
    #jumpBar {
      position: fixed;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 50;
      display: none;
      align-items: center;
      gap: 8px;
      pointer-events: none;
    }

    .jdot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .9);
      box-shadow: 0 0 8px rgba(255, 230, 100, .8);
      transition: background .15s, transform .15s;
    }

    .jdot.used {
      background: rgba(255, 255, 255, .2);
      box-shadow: none;
    }

    /* ── LEVEL PROGRESS ── */
    #lvlBar {
      position: fixed;
      top: 72px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 50;
      display: none;
      align-items: center;
      gap: 8px;
      pointer-events: none;
    }

    .lvl-track {
      width: 180px;
      height: 8px;
      border-radius: 99px;
      background: rgba(0, 0, 0, .35);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .1);
    }

    .lvl-fill {
      height: 100%;
      width: 0%;
      border-radius: 99px;
      background: linear-gradient(90deg, #56d8a0, #3ab5e5);
      transition: width .2s linear;
    }

    .lvl-label {
      font-size: 11px;
      font-weight: 800;
      color: rgba(255, 255, 255, .7);
      white-space: nowrap;
    }

    /* ── GAME OVER ── */
    #gameOver {
      display: none;
    }

    .go-score {
      font-size: 64px;
      font-weight: 900;
      color: #ffe566;
      line-height: 1;
      text-align: center;
      margin: 6px 0 2px;
    }

    .go-sub {
      text-align: center;
      font-size: 13px;
      opacity: .6;
      margin-bottom: 6px;
    }

    .go-best {
      text-align: center;
      font-size: 13px;
      color: #56d8a0;
      font-weight: 800;
      margin-bottom: 20px;
      min-height: 18px;
    }

    .stat-row {
      display: flex;
      justify-content: space-around;
      margin: 14px 0 20px;
    }

    .stat {
      text-align: center;
    }

    .stat .sv {
      font-size: 22px;
      font-weight: 900;
      color: #fff;
    }

    .stat .sk {
      font-size: 11px;
      color: rgba(255, 255, 255, .5);
      font-weight: 700;
      margin-top: 2px;
    }

    /* ── LEVEL UP ── */
    #lvlUp {
      position: fixed;
      left: 50%;
      top: 28%;
      transform: translateX(-50%);
      z-index: 120;
      pointer-events: none;
      display: none;
      font-size: 34px;
      font-weight: 900;
      color: #ffe566;
      white-space: nowrap;
      text-shadow: 0 0 30px rgba(255, 200, 0, .9), 0 2px 8px rgba(0, 0, 0, .6);
    }

    .lvlup-anim {
      animation: lvlPop 1.3s ease-out forwards;
    }

    @keyframes lvlPop {
      0% {
        opacity: 0;
        transform: translateX(-50%) scale(.5);
      }

      25% {
        opacity: 1;
        transform: translateX(-50%) scale(1.2);
      }

      60% {
        opacity: 1;
        transform: translateX(-50%) scale(1) translateY(-15px);
      }

      100% {
        opacity: 0;
        transform: translateX(-50%) scale(.85) translateY(-50px);
      }
    }

    /* ── SCORE POP ── */
    .spop {
      position: fixed;
      z-index: 100;
      pointer-events: none;
      font-size: 18px;
      font-weight: 900;
      color: #ffe566;
      text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
      animation: spopAnim .9s ease-out forwards;
    }

    @keyframes spopAnim {
      to {
        opacity: 0;
        transform: translateY(-55px) scale(1.2);
      }
    }

    /* ── LIVES ── */
 #livesBar{
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    z-index:100;

    display:none;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:8px 18px;

    border-radius:999px;
    border:3px solid rgba(255,255,255,.9);

    background:linear-gradient(
        180deg,
        #4fc3ff 0%,
        #1b8cff 45%,
        #0068e8 100%
    );

    box-shadow:
        0 4px 0 #004fb8,
        0 10px 18px rgba(0,0,0,.28),
        inset 0 2px 0 rgba(255,255,255,.55),
        inset 0 -3px 6px rgba(0,0,0,.18);

    pointer-events:none;
    position:fixed;
    overflow:hidden;
}

/* Gloss effect */
#livesBar::before{
    content:"";
    position:absolute;
    left:10px;
    right:10px;
    top:4px;
    height:35%;

    border-radius:999px;
    background:rgba(255,255,255,.28);
}

.heart{
    position:relative;

    font-size:28px;
    line-height:1;

    filter:
        drop-shadow(0 3px 4px rgba(180,0,0,.45));

    transform-origin:center;
    transition:
        transform .25s ease,
        opacity .25s ease,
        filter .25s ease;

    animation:heartPulse 1.4s infinite ease-in-out;
}

/* Lost heart */
.heart.lost{
    opacity:.25;
    transform:scale(.7);
    filter:grayscale(100%) brightness(.65);
    animation:none;
}

/* Heart pulse animation */
@keyframes heartPulse{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.12);
    }
}
    /* ── RESPAWN FLASH ── */
    #flashOverlay {
      position: fixed;
      inset: 0;
      z-index: 140;
      pointer-events: none;
      background: rgba(255, 80, 80, .0);
      display: none;
    }

    .flash-anim {
      animation: flashPulse .6s ease-out forwards;
      display: block !important;
    }

    @keyframes flashPulse {
      0% {
        background: rgba(255, 80, 80, .55);
      }

      100% {
        background: rgba(255, 80, 80, .0);
      }
    }

    /* ── LIFE LOST TOAST ── */
    #lifeLost {
      position: fixed;
      left: 50%;
      top: 32%;
      transform: translateX(-50%);
      z-index: 130;
      pointer-events: none;
      display: none;
      font-size: 28px;
      font-weight: 900;
      color: #ff5555;
      white-space: nowrap;
      text-shadow: 0 0 24px rgba(255, 80, 80, .9), 0 2px 8px rgba(0, 0, 0, .6);
    }

    .lifelost-anim {
      animation: lifeLostPop 1s ease-out forwards;
      display: block !important;
    }

    @keyframes lifeLostPop {
      0% {
        opacity: 0;
        transform: translateX(-50%) scale(.6);
      }

      20% {
        opacity: 1;
        transform: translateX(-50%) scale(1.15);
      }

      60% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
      }

      100% {
        opacity: 0;
        transform: translateX(-50%) scale(.9) translateY(-30px);
      }
    }