@layer base {
  :root.is-pressing * {
    cursor: var(--cursor-press, pointer) !important;
  }

  a {
    color: #ffe45c;
  }
}

@layer layout {
  .app {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: radial-gradient(120% 90% at 50% 0%, #5a1a8a 0%, #2a0845 55%, #14022a 100%);
    isolation: isolate;
  }

  .screen {
    position: absolute;
    inset: 0;
  }

  .screen--map {
    z-index: 1;
  }

  .screen--level {
    z-index: 30;
  }

}

@layer components {
  .loader {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 18px;
    padding: 24px;
    background: radial-gradient(120% 90% at 50% 20%, #ff7ac6 0%, #b8338f 30%, #4a0f6e 70%, #1b0533 100%);
    transition: opacity 0.6s ease, visibility 0.6s ease;
  }

  .loader.is-done {
    opacity: 0;
    visibility: hidden;
  }

  .loader__glow {
    position: absolute;
    width: 90vmin;
    height: 90vmin;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 12%, rgba(255, 255, 255, 0.18) 25%, rgba(255, 255, 255, 0) 37%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.18) 75%, rgba(255, 255, 255, 0) 87%);
    animation: mm-spin 14s linear infinite;
    pointer-events: none;
  }

  .loader__candies {
    position: relative;
    width: 180px;
    height: 70px;
  }

  .loader__candies i {
    position: absolute;
    top: 14px;
    left: calc(var(--k, 0) * 30px);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff 0 10%, var(--c) 45%, var(--d) 100%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
    animation: mm-bounce 0.9s ease-in-out infinite;
    animation-delay: calc(var(--k, 0) * -0.14s);
  }

  .loader__candies i:nth-child(1) { --k: 0; --c: #ff3d5e; --d: #8a0018; }
  .loader__candies i:nth-child(2) { --k: 1; --c: #ff9b1f; --d: #a44100; }
  .loader__candies i:nth-child(3) { --k: 2; --c: #ffd21f; --d: #b07f00; }
  .loader__candies i:nth-child(4) { --k: 3; --c: #35c93a; --d: #0f6e17; }
  .loader__candies i:nth-child(5) { --k: 4; --c: #1b8cff; --d: #083c9a; }
  .loader__candies i:nth-child(6) { --k: 5; --c: #ae3bff; --d: #4f0c94; }

  .loader__title {
    display: grid;
    justify-items: center;
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 0.9;
    color: #fff;
    -webkit-text-stroke: 3px #7a0f53;
    paint-order: stroke fill;
    text-shadow: 0 5px 0 #7a0f53, 0 12px 24px rgba(40, 0, 40, 0.6);
    animation: mm-pop-in 0.8s var(--ease-pop) both;
  }

  .loader__title span:first-child {
    font-size: clamp(46px, 14vw, 78px);
    color: #ffe45c;
  }

  .loader__title span:last-child {
    font-size: clamp(54px, 17vw, 96px);
  }

  .loader__bar {
    position: relative;
    width: min(280px, 70vw);
    height: 20px;
    border-radius: 99px;
    background: rgba(40, 0, 50, 0.55);
    border: 3px solid #fff;
    box-shadow: 0 5px 0 #7a0f53;
    overflow: hidden;
  }

  .loader__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 8%;
    border-radius: 99px;
    background: repeating-linear-gradient(-45deg, #ffe45c 0 10px, #ffb21f 10px 20px);
    background-size: 28px 28px;
    animation: mm-stripes 0.6s linear infinite;
    transition: width 0.35s ease;
  }

  .loader__status {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  }

  .topbar {
    position: absolute;
    z-index: 40;
    top: calc(var(--safe-top) + 8px);
    left: calc(var(--safe-left) + 8px);
    right: calc(var(--safe-right) + 8px);
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
  }

  .topbar > * {
    pointer-events: auto;
  }

  .topbar__me {
    flex: none;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    transition: transform 0.12s var(--ease-pop);
  }

  .topbar__me:active {
    transform: scale(0.92);
  }

  .topbar__gear {
    flex: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
  }

  .pill--lives {
    padding-left: 38px;
    min-width: 96px;
  }

  .pill--coins,
  .pill--gems {
    flex: 0 1 auto;
    min-width: 76px;
  }

  .pill__heart {
    display: grid;
    place-items: center;
  }

  .pill__heart .ico {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .pill__heartnum {
    position: relative;
    z-index: 1;
    font-size: 17px;
    color: #fff;
    -webkit-text-stroke: 3px #8a0018;
    paint-order: stroke fill;
    margin-top: -2px;
  }

  .pill__heart.is-empty .ico {
    filter: grayscale(1) brightness(0.7);
  }

  .pill--lives.is-infinite .pill__heart {
    animation: mm-pulse 1.4s ease-in-out infinite;
  }

  .pill__text {
    min-width: 1.4ch;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pill.is-hit,
  .topbar__gear.is-hit,
  .topbar__me.is-hit {
    animation: mm-hit 0.35s var(--ease-pop);
  }

  .nav {
    position: absolute;
    z-index: 40;
    left: 50%;
    bottom: calc(var(--safe-bottom) + 8px);
    translate: -50% 0;
    width: min(520px, calc(100% - 16px));
    height: var(--nav-h);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: end;
    padding: 0 8px 8px;
    border-radius: 26px;
    background: linear-gradient(180deg, #ff8fd0 0%, #d6278f 55%, #9c1368 100%);
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px #6a0a4f, 0 10px 24px rgba(30, 0, 40, 0.5), inset 0 3px 0 rgba(255, 255, 255, 0.45);
  }

  .nav__tab {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 2px;
    font-family: var(--font-display);
    font-size: 14px;
    color: #fff;
    -webkit-text-stroke: 1px #6a0a4f;
    paint-order: stroke fill;
    text-shadow: 0 2px 0 #6a0a4f;
    transition: transform 0.25s var(--ease-pop);
  }

  .nav__tab .ico {
    width: 38px;
    height: 38px;
    filter: drop-shadow(0 3px 2px rgba(60, 0, 40, 0.5));
    transition: transform 0.3s var(--ease-pop);
  }

  .nav__tab.is-on {
    transform: translateY(-14px);
  }

  .nav__tab.is-on .ico {
    transform: scale(1.3);
    animation: mm-float 2.4s ease-in-out infinite;
  }

  .nav__tab .badge {
    top: -4px;
    right: 10%;
  }

  .nav__glow {
    position: absolute;
    left: var(--x, 37.5%);
    bottom: 10px;
    width: 86px;
    height: 86px;
    translate: -50% 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, #fff7c2 0%, #ffcf3f 35%, #f08a00 70%, #a44f00 100%);
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px #6a0a4f, 0 8px 18px rgba(40, 0, 30, 0.45);
    transition: left 0.35s var(--ease-pop);
    pointer-events: none;
  }

  .map-ui {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
  }

  .map-ui__left,
  .map-ui__right {
    position: absolute;
    top: calc(var(--safe-top) + 74px);
    display: grid;
    gap: 12px;
    pointer-events: auto;
  }

  .map-ui__left {
    left: calc(var(--safe-left) + 10px);
  }

  .map-ui__right {
    right: calc(var(--safe-right) + 10px);
  }

  .bubble {
    position: relative;
    display: grid;
    justify-items: center;
    width: 64px;
    text-decoration: none;
    transition: transform 0.15s var(--ease-pop);
    animation: mm-rise 0.6s var(--ease-pop) both;
  }

  .bubble:nth-child(2) { animation-delay: 0.08s; }
  .bubble:nth-child(3) { animation-delay: 0.16s; }

  .bubble > .ico {
    width: 56px;
    height: 56px;
    padding: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, #ffffff 0%, #ffe3f1 45%, #ffb3dc 100%);
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px #7a0f53, 0 6px 12px rgba(30, 0, 40, 0.45);
    animation: mm-float 3.2s ease-in-out infinite;
  }

  .bubble--slots > .ico {
    background: radial-gradient(circle at 50% 30%, #fff 0%, #ffe6b0 45%, #ffb21f 100%);
  }

  .bubble--chest.is-ready > .ico {
    animation: mm-wiggle 0.6s ease-in-out infinite;
    background: radial-gradient(circle at 50% 30%, #fff 0%, #fff29a 45%, #ffc21a 100%);
  }

  .bubble__label {
    margin-top: 2px;
    font-family: var(--font-display);
    font-size: 13px;
    color: #fff;
    -webkit-text-stroke: 1px #3b0d4a;
    paint-order: stroke fill;
    text-shadow: 0 2px 0 #3b0d4a;
    white-space: nowrap;
  }

  .bubble:active {
    transform: scale(0.9);
  }

  .bubble .badge {
    top: -2px;
    right: 0;
  }

  .map-play {
    position: absolute;
    left: 50%;
    bottom: calc(var(--safe-bottom) + var(--nav-h) + 26px);
    translate: -50% 0;
    min-width: 170px;
    padding: 12px 28px 14px;
    overflow: hidden;
    border-radius: 22px;
    font-size: 26px;
    color: #fff;
    background: linear-gradient(180deg, #a6f56a 0%, #54c81c 52%, #2c9a0c 100%);
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px #1b6608, 0 7px 0 #1b6608, 0 12px 20px rgba(20, 0, 30, 0.45);
    -webkit-text-stroke: 1.5px #1b6608;
    paint-order: stroke fill;
    text-shadow: 0 3px 0 #1b6608;
    pointer-events: auto;
    animation: mm-pulse 2.2s ease-in-out infinite;
  }

  .map-play__shine {
    position: absolute;
    inset: 0;
    width: 40%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
    animation: mm-shine 3.4s ease-in-out infinite;
    pointer-events: none;
  }

  .map-play:active {
    translate: -50% 4px;
  }

  .map-play__tier {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 2px;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-text-stroke: 0;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  }

  .map-play__tier[hidden] {
    display: none;
  }

  .map-play__tier .ico {
    width: 16px;
    height: 16px;
  }

  .map-play[data-tier] {
    padding: 8px 24px 10px;
  }

  .map-play[data-tier='hard'] {
    background: linear-gradient(180deg, #e2a8ff 0%, #a846f0 52%, #6a15b0 100%);
    box-shadow: 0 0 0 3px #4d0d85, 0 7px 0 #4d0d85, 0 0 22px rgba(190, 90, 255, 0.6), 0 12px 20px rgba(20, 0, 30, 0.45);
    -webkit-text-stroke-color: #4d0d85;
    text-shadow: 0 3px 0 #4d0d85;
  }

  .map-play[data-tier='super'] {
    background: linear-gradient(180deg, #ffb38a 0%, #ff3b2f 52%, #b30f12 100%);
    box-shadow: 0 0 0 3px #7a0508, 0 7px 0 #7a0508, 0 0 22px rgba(255, 90, 40, 0.6), 0 12px 20px rgba(20, 0, 30, 0.45);
    -webkit-text-stroke-color: #7a0508;
    text-shadow: 0 3px 0 #7a0508;
  }

  .map-play[data-tier='nightmare'] {
    background: linear-gradient(180deg, #a9b8ff 0%, #4b2bb8 52%, #1d0c5c 100%);
    box-shadow: 0 0 0 3px #10053a, 0 7px 0 #10053a, 0 0 22px rgba(110, 90, 255, 0.7), 0 12px 20px rgba(20, 0, 30, 0.45);
    -webkit-text-stroke-color: #10053a;
    text-shadow: 0 3px 0 #10053a;
  }

  .map-play[data-tier='nightmare'] .map-play__tier .ico {
    filter: hue-rotate(215deg) saturate(1.3);
  }

  .fatal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: 24px;
    background: radial-gradient(120% 90% at 50% 20%, #ff7ac6 0%, #b8338f 30%, #4a0f6e 70%, #1b0533 100%);
  }

  .fatal__card {
    max-width: 420px;
    display: grid;
    gap: 14px;
    justify-items: center;
    text-align: center;
    padding: 28px 22px;
    border-radius: 28px;
    background: linear-gradient(180deg, #fff7fc, #ffe3f1);
    border: 6px solid #b8338f;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    color: var(--ink);
  }

  .fatal__card h1 {
    font-size: 36px;
    --ol: #8e0f5c;
  }

  .fatal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 6px;
  }

  .sheet {
    position: absolute;
    inset: 0;
    z-index: 25;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    padding-top: calc(var(--safe-top) + 66px);
    padding-bottom: calc(var(--safe-bottom) + var(--nav-h) + 16px);
  }

  .sheet.is-enter {
    animation: sheet-in 0.45s var(--ease-out) both;
  }

  .sheet.is-swap .sheet__scroll,
  .sheet.is-swap .sheet__head {
    animation: sheet-swap 0.35s var(--ease-out) both;
  }

  .sheet.is-out {
    animation: sheet-out 0.35s var(--ease-in) both;
  }

  .toasts {
    position: fixed;
    z-index: 120;
    left: 50%;
    top: calc(var(--safe-top) + 70px);
    translate: -50% 0;
    display: grid;
    gap: 8px;
    width: min(440px, calc(100% - 24px));
    pointer-events: none;
  }

  .toast {
    padding: 12px 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, #4a1a78, #2a0845);
    border: 2px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    font-size: 15px;
    text-align: center;
    color: #fff;
    opacity: 0;
    translate: 0 -12px;
    transition: opacity 0.25s ease, translate 0.3s var(--ease-pop);
  }

  .toast.is-in {
    opacity: 1;
    translate: 0 0;
  }

  .toast.is-out {
    opacity: 0;
    translate: 0 -12px;
  }

  .toast--good {
    background: linear-gradient(180deg, #3fbf12, #1b6608);
  }

  .toast--error {
    background: linear-gradient(180deg, #ff5454, #9a1414);
  }

  .toast--warn {
    background: linear-gradient(180deg, #ffb21f, #b86400);
  }

  .reward-flyer {
    position: fixed;
    z-index: 150;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
  }

  .reward-flyer img,
  .reward-flyer .ico {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .wipe {
    position: fixed;
    inset: 0;
    z-index: 180;
    pointer-events: none;
  }

  .wipe.is-cover,
  .wipe.is-reveal,
  .wipe.is-fade,
  .wipe.is-unfade {
    pointer-events: auto;
  }

  .wipe__disc {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: radial-gradient(circle at var(--x) var(--y), #fff4b0 0%, #ff8fd0 18%, #d6278f 45%, #6a0a4f 100%);
    clip-path: circle(0% at var(--x) var(--y));
  }

  .wipe__disc[data-tone='blue'] {
    background: radial-gradient(circle at var(--x) var(--y), #e0fbff 0%, #5ec8ff 22%, #1a70d4 55%, #0c2f66 100%);
  }

  .wipe.is-cover .wipe__disc {
    animation: wipe-cover 0.72s var(--ease-in) forwards;
  }

  .wipe.is-reveal .wipe__disc {
    clip-path: circle(150% at var(--x) var(--y));
    animation: wipe-reveal 0.7s var(--ease-out) forwards;
  }

  .wipe__swirl {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 260vmax;
    height: 260vmax;
    translate: -50% -50%;
    background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.22) 0 10deg, rgba(255, 255, 255, 0) 10deg 20deg);
    animation: mm-spin 3s linear infinite;
  }

  .wipe__candies {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 0;
    height: 0;
  }

  .wipe__candies img {
    position: absolute;
    left: 0;
    top: 0;
    width: 64px;
    height: 64px;
    translate: -50% -50%;
    animation: wipe-candy 1.2s var(--ease-out) both;
    animation-delay: calc(var(--i) * 0.04s);
    --dist: 42vmin;
  }

  .wipe__title {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    font-size: clamp(38px, 11vw, 64px);
    color: #fff;
    -webkit-text-stroke: 3px #6a0a4f;
    paint-order: stroke fill;
    text-shadow: 0 6px 0 #6a0a4f;
    white-space: nowrap;
    animation: wipe-title 1.2s var(--ease-pop) both;
  }

  .wipe__fade {
    position: absolute;
    inset: 0;
    background: #1b0533;
    opacity: 0;
  }

  .wipe.is-fade .wipe__fade {
    animation: mm-fade 0.38s ease forwards;
  }

  .wipe.is-unfade .wipe__fade {
    opacity: 1;
    animation: mm-unfade 0.38s ease forwards;
  }
}

@layer fx {
  @keyframes mm-bounce {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -22px; }
  }

  @keyframes mm-stripes {
    to { background-position: 28px 0; }
  }

  @keyframes mm-hit {
    0% { scale: 1; }
    40% { scale: 1.2; }
    100% { scale: 1; }
  }

  @keyframes sheet-in {
    from { opacity: 0; translate: 0 40px; scale: 0.96; }
  }

  @keyframes sheet-out {
    to { opacity: 0; translate: 0 40px; scale: 0.96; }
  }

  @keyframes sheet-swap {
    from { opacity: 0; translate: 30px 0; }
  }

  @keyframes wipe-cover {
    from { clip-path: circle(0% at var(--x) var(--y)); }
    to { clip-path: circle(150% at var(--x) var(--y)); }
  }

  @keyframes wipe-reveal {
    from { clip-path: circle(150% at 50% 50%); }
    to { clip-path: circle(0% at 50% 50%); }
  }

  @keyframes wipe-candy {
    0% { transform: rotate(var(--a)) translateY(0) scale(0.2) rotate(0deg); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: rotate(var(--a)) translateY(calc(var(--dist) * -1)) scale(1.1) rotate(200deg); opacity: 1; }
  }

  @keyframes wipe-title {
    0% { scale: 0.2; opacity: 0; rotate: -12deg; }
    60% { scale: 1.12; opacity: 1; rotate: 3deg; }
    100% { scale: 1; opacity: 1; rotate: 0deg; }
  }

  @keyframes mm-fade {
    to { opacity: 1; }
  }

  @keyframes mm-unfade {
    to { opacity: 0; }
  }
}

@layer state {
  .app[data-screen='level'] .topbar,
  .app[data-screen='level'] .nav,
  .app[data-screen='level'] .map-ui,
  .app[data-screen='boot'] .topbar,
  .app[data-screen='boot'] .nav {
    display: none;
  }

  @media (max-width: 430px) {
    .topbar {
      gap: 6px;
    }

    .pill {
      font-size: 16px;
      padding-left: 31px;
      padding-right: 8px;
    }

    .pill__plus {
      display: none;
    }

    .pill--lives {
      min-width: 0;
      padding-left: 38px;
    }

    .pill--coins,
    .pill--gems {
      flex: 1 1 auto;
      min-width: 0;
    }

    .pill__text {
      min-width: 3ch;
    }

    .topbar__me {
      width: 44px;
      height: 44px;
    }

    .topbar__gear {
      width: 40px;
      height: 40px;
    }
  }

  @media (max-width: 380px) {
    .topbar {
      gap: 5px;
    }

    .pill {
      height: 32px;
      font-size: 14px;
      padding-left: 27px;
      padding-right: 6px;
    }

    .pill .pill__icon {
      width: 34px;
      height: 34px;
      left: -7px;
    }

    .pill--lives {
      padding-left: 32px;
    }

    .pill__heartnum {
      font-size: 15px;
    }

    .topbar__me {
      width: 38px;
      height: 38px;
    }

    .topbar__gear {
      width: 36px;
      height: 36px;
    }

    .bubble {
      width: 58px;
    }

    .bubble > .ico {
      width: 50px;
      height: 50px;
    }
  }

  @media (max-height: 600px) and (orientation: landscape) {
    .map-ui__left,
    .map-ui__right {
      top: calc(var(--safe-top) + 64px);
      gap: 6px;
    }

    .bubble > .ico {
      width: 46px;
      height: 46px;
      padding: 6px;
    }

    .bubble__label {
      font-size: 11px;
    }

    :root {
      --nav-h: 62px;
    }
  }
}