* {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: #050508;
      font-family: "Nunito", "Poppins", ui-rounded, system-ui, sans-serif;
      touch-action: none;
    }

    body {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      /* Option 1 fallback under the live blur layer */
      background: linear-gradient(135deg, #0f0f1a, #050508);
    }

    /* Option 2: live blurred 3D scene around the portrait frame */
    .scene-backdrop {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
      background: linear-gradient(135deg, #0f0f1a, #050508);
    }

    .scene-backdrop canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.14);
      filter: blur(20px) brightness(0.3);
      opacity: .95;
    }

    button {
      font: inherit;
    }

    /* Portrait 3:4 — full height, wider than 9:16 for easier play */
    #game-container {
      position: relative;
      z-index: 1;
      container-type: size;
      height: 100vh !important;
      height: 100dvh !important;
      width: min(100vw, calc(100vh * 3 / 4));
      width: min(100vw, calc(100dvh * 3 / 4));
      max-width: calc(100vh * 3 / 4);
      max-width: calc(100dvh * 3 / 4);
      aspect-ratio: 3 / 4;
      margin: 0 auto;
      overflow: hidden;
      border-radius: 0;
      box-shadow:
        0 0 0 2px rgba(255, 255, 255, .08),
        0 18px 50px rgba(0, 0, 0, .55);
      background: #07152e;
      flex-shrink: 0;
    }

    #game {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    #game canvas {
      display: block;
      width: 100% !important;
      height: 100% !important;
    }

    /* Full-area input surface under HUD — receives mouse/touch drag */
    .drag-layer {
      position: absolute;
      inset: 0;
      z-index: 4;
      touch-action: none;
      cursor: grab;
      -webkit-user-select: none;
      user-select: none;
    }

    .drag-layer:active {
      cursor: grabbing;
    }

    .ui {
      position: absolute;
      inset: 0;
      pointer-events: none;
      color: white;
      text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
      z-index: 5;
      overflow: hidden;
    }

    .hud {
      position: absolute;
      top: max(10px, env(safe-area-inset-top));
      left: 50%;
      width: 94%;
      transform: translateX(-50%);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      padding: 0 1%;
      background: none;
      height: auto;
      z-index: 6;
    }

    .stat-capsule {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      flex: 0 1 auto;
      padding: 6px 12px 6px 6px;
      border-radius: 999px;
      background: rgba(0, 0, 0, .5);
      box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
      font-weight: 900;
      font-size: clamp(14px, 4.6cqi, 22px);
      letter-spacing: .02em;
    }

    .stat-capsule img {
      width: clamp(24px, 7cqi, 32px);
      height: clamp(24px, 7cqi, 32px);
      object-fit: contain;
      filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25));
    }

    .level-badge {
      position: relative;
      top: auto;
      left: auto;
      flex: 0 0 auto;
      z-index: 1;
      min-width: 0;
      margin: 0;
      padding: 5px 12px 6px;
      border: 2px solid #fff;
      border-radius: 999px;
      background: linear-gradient(180deg, #ffd84a 0%, #ffb400 48%, #f08c00 100%);
      box-shadow:
        0 3px 0 #c56a00,
        0 6px 12px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .55);
      font-family: inherit;
      font-weight: 1000;
      font-size: clamp(11px, 3.2cqi, 15px);
      letter-spacing: .08em;
      line-height: 1.1;
      color: #fff;
      text-shadow: 0 2px 0 rgba(150, 70, 0, .55);
      white-space: nowrap;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      pointer-events: auto;
      transition: transform .12s, filter .12s;
    }

    .hud-trail {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      flex: 0 1 auto;
    }

    .pause-btn {
      flex: 0 0 auto;
      width: 40px;
      height: 40px;
      padding: 0;
      border: 2px solid rgba(255, 255, 255, .9);
      border-radius: 50%;
      background: rgba(0, 0, 0, .5);
      box-shadow: 0 3px 0 rgba(0, 0, 0, .45), 0 6px 12px rgba(0, 0, 0, .2);
      color: #fff;
      cursor: pointer;
      pointer-events: auto;
      display: grid;
      place-items: center;
      -webkit-tap-highlight-color: transparent;
      transition: transform .12s, filter .12s;
    }

    .pause-btn[hidden] {
      display: none !important;
    }

    .pause-btn:active {
      transform: scale(.94);
      filter: brightness(.95);
    }

    .pause-btn-bars {
      display: block;
      width: 12px;
      height: 14px;
      border-left: 4px solid #fff;
      border-right: 4px solid #fff;
      box-sizing: border-box;
    }

    .pause-modal {
      position: absolute;
      inset: 0;
      z-index: 46;
      display: grid;
      place-items: center;
      padding: 18px;
      background: rgba(0, 0, 0, .5);
      pointer-events: auto;
    }

    .pause-modal[hidden] {
      display: none !important;
    }

    .pause-panel {
      position: relative;
      width: min(88%, 340px);
      padding: 32px 22px 26px;
      border-radius: 28px;
      background: rgba(0, 0, 0, .85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 3px solid rgba(255, 255, 255, .18);
      box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      animation: level-select-pop .28s cubic-bezier(.2, 1.3, .4, 1) both;
    }

    .pause-title {
      margin: 0 0 8px;
      font-family: "Luckiest Guy", "Nunito", sans-serif;
      font-size: clamp(28px, 8cqi, 36px);
      letter-spacing: .08em;
      color: #ffd84a;
      text-shadow: 0 3px 0 rgba(0, 0, 0, .35);
    }

    .pause-btn-resume {
      background: linear-gradient(180deg, #6dff8a 0%, #1fbf4a 55%, #129a38 100%);
      box-shadow:
        0 5px 0 #0a6b24,
        0 10px 18px rgba(0, 0, 0, .28),
        inset 0 2px 0 rgba(255, 255, 255, .45);
    }

    .pause-btn-home {
      background: linear-gradient(180deg, #ff7a8a 0%, #e23b55 55%, #c01f3a 100%);
      box-shadow:
        0 5px 0 #8a1428,
        0 10px 18px rgba(0, 0, 0, .28),
        inset 0 2px 0 rgba(255, 255, 255, .4);
    }

    .level-select {
      position: absolute;
      inset: 0;
      z-index: 40;
      display: grid;
      place-items: center;
      padding: 18px;
      background: rgba(0, 0, 0, .45);
      pointer-events: auto;
    }

    .level-select[hidden] {
      display: none !important;
    }

    .level-select-panel {
      position: relative;
      width: min(92%, 360px);
      max-height: min(78%, 520px);
      padding: 28px 18px 20px;
      border-radius: 28px;
      background: rgba(0, 0, 0, .85);
      border: 3px solid rgba(255, 255, 255, .18);
      box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
      text-align: center;
      overflow-y: auto;
      animation: level-select-pop .28s cubic-bezier(.2, 1.3, .4, 1) both;
    }

    .level-select-close {
      position: absolute;
      top: 10px;
      right: 12px;
      width: 36px;
      height: 36px;
      padding: 0;
      border: 2px solid rgba(255, 255, 255, .35);
      border-radius: 50%;
      background: rgba(255, 255, 255, .1);
      color: #fff;
      font-size: 22px;
      font-weight: 800;
      line-height: 1;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .level-select-close:active {
      transform: scale(.94);
      background: rgba(255, 255, 255, .2);
    }

    .level-select-title {
      margin: 0 0 18px;
      font-family: "Luckiest Guy", "Nunito", sans-serif;
      font-size: clamp(22px, 7cqi, 30px);
      letter-spacing: .06em;
      color: #ffd84a;
      text-shadow: 0 3px 0 rgba(0, 0, 0, .35);
    }

    .level-select-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
    }

    .level-select-btn {
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border: 2px solid rgba(255, 255, 255, .55);
      border-radius: 14px;
      background: linear-gradient(180deg, #3a3f55 0%, #222636 100%);
      color: #fff;
      font-family: "Nunito", sans-serif;
      font-weight: 900;
      font-size: clamp(12px, 3.4cqi, 15px);
      letter-spacing: .02em;
      cursor: pointer;
      box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
      transition: transform .12s, filter .12s, border-color .12s;
      -webkit-tap-highlight-color: transparent;
    }

    .level-select-btn:active {
      transform: translateY(2px) scale(.96);
      filter: brightness(1.08);
    }

    .level-select-btn.current {
      border-color: #ffd84a;
      background: linear-gradient(180deg, #ffd84a 0%, #f08c00 100%);
      color: #fff;
      text-shadow: 0 2px 0 rgba(120, 60, 0, .45);
      box-shadow: 0 4px 0 #c56a00;
    }

    @keyframes level-select-pop {
      from { opacity: 0; transform: scale(.86); }
      to { opacity: 1; transform: scale(1); }
    }

    .progress {
      position: absolute;
      top: calc(max(10px, env(safe-area-inset-top)) + 52px);
      left: 50%;
      width: 72%;
      height: 8px;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, .35);
      border: 2px solid rgba(255, 255, 255, .85);
      border-radius: 999px;
      overflow: hidden;
      box-shadow: 0 3px 8px rgba(0, 0, 0, .15);
    }

    .progress>i {
      display: block;
      width: 0;
      height: 100%;
      background: linear-gradient(90deg, #ffd24a, #ff7a1a);
      border-radius: inherit;
    }

    .screen {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      pointer-events: auto;
      background: linear-gradient(rgba(6, 13, 38, .2), rgba(6, 10, 32, .76));
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .screen[hidden] {
      display: none;
    }

    .panel {
      width: min(91%, 560px);
      min-height: 270px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 42px 11%;
      text-align: center;
    }

    .result-panel {
      position: relative;
      z-index: 2;
      width: min(86%, 400px);
      min-height: 0;
      padding: 34px 26px 28px;
      border: 2px solid rgba(255, 255, 255, .22);
      border-radius: 28px;
      background: linear-gradient(160deg, #3a1a6e 0%, #5b2d9e 48%, #2a1458 100%);
      box-shadow:
        0 16px 36px rgba(0, 0, 0, .45),
        inset 0 1px 0 rgba(255, 255, 255, .22);
      transform: scale(.7);
      opacity: 0;
      animation: none;
    }

    #resultScreen:not([hidden]) .result-panel {
      animation: result-pop .42s cubic-bezier(.2, 1.4, .4, 1) forwards;
    }

    #resultScreen.lose .result-panel {
      background: linear-gradient(160deg, #4a1838 0%, #7a2f55 50%, #321028 100%);
    }

    .result-title {
      margin: 0;
      font-family: "Luckiest Guy", "Nunito", Impact, sans-serif;
      font-size: clamp(44px, 11vw, 62px);
      font-weight: 400;
      line-height: 1.05;
      letter-spacing: .04em;
      color: #ffd700;
      -webkit-text-stroke: 2px #000;
      paint-order: stroke fill;
      text-shadow:
        0 4px 0 rgba(0, 0, 0, .4),
        0 0 20px rgba(255, 215, 0, .3);
    }

    .result-title.lose {
      color: #ff6b81;
      text-shadow:
        0 4px 0 rgba(0, 0, 0, .4),
        0 0 16px rgba(255, 80, 100, .28);
    }

    .result-subtitle {
      margin: 6px 0 0;
      font-family: "Nunito", ui-rounded, system-ui, sans-serif;
      font-size: clamp(15px, 4cqi, 20px);
      font-weight: 800;
      letter-spacing: .12em;
      color: rgba(255, 255, 255, .92);
      text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
    }

    .result-subtitle[hidden] {
      display: none !important;
    }

    .result-stats {
      width: 100%;
      margin: 22px 0 26px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      font-family: "Nunito", ui-rounded, system-ui, sans-serif;
      font-weight: 900;
      color: #fff;
    }

    .result-coin-block {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .coin-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 30%, #fff6a8, #ffd700 42%, #e09a00 78%);
      box-shadow:
        0 2px 0 #a86a00,
        inset 0 2px 0 rgba(255, 255, 255, .55);
      position: relative;
      flex-shrink: 0;
    }

    .coin-icon-lg {
      width: 42px;
      height: 42px;
      box-shadow:
        0 3px 0 #a86a00,
        inset 0 2px 0 rgba(255, 255, 255, .55);
    }

    .coin-icon::after {
      content: "$";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      font-size: 14px;
      font-weight: 900;
      color: #a86a00;
      text-shadow: none;
      -webkit-text-stroke: 0;
    }

    .coin-icon-lg::after {
      font-size: 20px;
    }

    .result-coin-copy {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      line-height: 1.1;
    }

    .result-coin-value {
      font-size: clamp(28px, 7.5cqi, 40px);
      font-weight: 900;
      letter-spacing: .02em;
      color: #fff;
      text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
    }

    .result-bonus-line {
      font-size: clamp(13px, 3.4cqi, 16px);
      font-weight: 800;
      letter-spacing: .04em;
      color: #ffe566;
      text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
    }

    .result-bonus-line[hidden] {
      display: none !important;
    }

    .result-lose-note {
      margin: 0;
      font-size: clamp(15px, 4cqi, 18px);
      font-weight: 800;
      color: rgba(255, 255, 255, .85);
      letter-spacing: .06em;
    }

    .result-actions {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      width: 100%;
    }

    .cartoon-btn {
      position: relative;
      overflow: hidden;
      width: min(82%, 280px);
      min-height: 58px;
      padding: 12px 28px 14px;
      border: 2px solid rgba(255, 255, 255, .85);
      border-radius: 999px;
      color: #fff;
      cursor: pointer;
      font-family: "Nunito", ui-rounded, system-ui, sans-serif;
      font-size: clamp(20px, 5.2vw, 26px);
      font-weight: 900;
      letter-spacing: .06em;
      -webkit-text-stroke: 0;
      paint-order: stroke fill;
      text-shadow: 0 2px 0 rgba(0, 0, 0, .22);
      transition: transform .16s ease, filter .16s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .cartoon-btn::after {
      content: "";
      position: absolute;
      top: -55%;
      left: -45%;
      width: 30%;
      height: 210%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
      transform: rotate(22deg);
      animation: button-shine 2.1s ease-in-out infinite;
      pointer-events: none;
    }

    .cartoon-btn:hover {
      transform: translateY(-2px) scale(1.03);
      filter: saturate(1.08) brightness(1.04);
    }

    .cartoon-btn:active {
      transform: translateY(2px) scale(.97);
    }

    .cartoon-btn-go {
      width: min(88%, 320px);
      min-height: 64px;
      font-size: clamp(22px, 5.6vw, 28px);
      background: linear-gradient(180deg, #8dff7e 0%, #3de055 48%, #1db83a 100%);
      box-shadow:
        0 5px 0 #0f7a28,
        0 10px 18px rgba(0, 0, 0, .22),
        inset 0 2px 0 rgba(255, 255, 255, .45);
    }

    .cartoon-btn-retry {
      background: linear-gradient(180deg, #ffef5a 0%, #ffc928 48%, #f09812 100%);
      box-shadow:
        0 5px 0 #a84a12,
        0 10px 16px rgba(0, 0, 0, .2),
        inset 0 2px 0 rgba(255, 255, 255, .45);
      color: #fff;
    }

    .confetti-layer {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 1;
    }

    .confetti-piece {
      position: absolute;
      top: -12px;
      width: 10px;
      height: 14px;
      border-radius: 2px;
      opacity: .95;
      animation-name: confetti-fall;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
    }

    @keyframes result-pop {
      from {
        opacity: 0;
        transform: scale(.7);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes confetti-fall {
      0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 1;
      }
      100% {
        transform: translate3d(var(--dx), 110vh, 0) rotate(720deg);
        opacity: .15;
      }
    }

    /* Premium casual-game home card. Result screens keep the image-asset panel. */
    .start-panel {
      position: relative;
      isolation: isolate;
      width: 85%;
      max-width: none;
      min-height: min(68%, 620px);
      padding: clamp(28px, 5%, 56px) clamp(5%, 7%, 48px) 24px;
      border: 3px solid rgba(127, 239, 255, .88);
      border-radius: clamp(24px, 6cqi, 48px);
      background:
        radial-gradient(circle at 50% 2%, rgba(106, 235, 255, .4), transparent 42%),
        linear-gradient(155deg, rgba(31, 91, 205, .96), rgba(77, 35, 177, .97) 58%, rgba(24, 20, 91, .98));
      box-shadow:
        0 8px 0 #271460,
        0 15px 0 rgba(9, 16, 67, .88),
        0 26px 45px rgba(0, 4, 28, .58),
        0 0 24px rgba(55, 224, 255, .62),
        inset 0 2px 0 rgba(255, 255, 255, .62),
        inset 0 -10px 24px rgba(13, 7, 74, .38);
      overflow: hidden;
    }

    .start-panel::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 10px;
      border: 1px solid rgba(255, 255, 255, .24);
      border-radius: inherit;
      pointer-events: none;
    }

    .start-panel::after {
      content: "";
      position: absolute;
      z-index: -1;
      width: 240px;
      height: 240px;
      top: -150px;
      right: -70px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .13);
      filter: blur(2px);
      pointer-events: none;
    }

    .logo {
      margin: 0;
      width: 100%;
      font-size: clamp(38px, 12cqi, 72px);
      line-height: .88;
      letter-spacing: -.055em;
      color: #fff;
    }

    .start-panel .logo {
      font-family: "Poppins", "Montserrat", Impact, ui-rounded, sans-serif;
      font-size: clamp(44px, 14cqi, 84px);
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: 2px;
      -webkit-text-stroke: 1.5px #000;
      paint-order: stroke fill;
      text-shadow:
        0 3px 0 rgba(0, 0, 0, .6),
        0 7px 10px rgba(0, 0, 0, .35),
        0 0 12px rgba(72, 229, 255, .42);
      animation: title-float 2.8s ease-in-out infinite;
      will-change: transform;
    }

    .logo span {
      display: block;
      color: #22d9ff;
    }

    .start-panel .logo span {
      color: #ffe35b;
      -webkit-text-stroke: 1.5px #000;
      text-shadow:
        0 3px 0 rgba(0, 0, 0, .62),
        0 7px 10px rgba(0, 0, 0, .35),
        0 0 12px rgba(255, 220, 70, .42);
    }

    .tagline {
      margin: 14px 0 17px;
      max-width: 330px;
      font-size: clamp(15px, 3.8vw, 20px);
      font-weight: 800;
      color: #dcecff;
      line-height: 1.2;
    }

    .start-panel .tagline {
      margin: clamp(28px, 5vh, 44px) 0 24px;
      color: #e8f8ff;
      font-size: clamp(15px, 3.8vw, 19px);
      text-shadow: 0 2px 0 rgba(15, 18, 82, .75);
    }

    .play-btn {
      position: relative;
      width: 85%;
      max-width: none;
      min-height: clamp(64px, 12cqi, 88px);
      padding: 8px 32px 12px;
      overflow: hidden;
      border: 3px solid #fff9b0;
      border-radius: 999px;
      background: linear-gradient(180deg, #ffef5a 0%, #ffc928 48%, #f09812 100%);
      box-shadow:
        0 7px 0 #a84a12,
        0 12px 18px rgba(7, 8, 49, .45),
        inset 0 4px 0 rgba(255, 255, 255, .72),
        inset 0 -5px 0 rgba(177, 64, 8, .28),
        0 0 22px rgba(255, 223, 57, .5);
      color: white;
      cursor: pointer;
      font-size: clamp(26px, 8cqi, 42px);
      font-weight: 1000;
      letter-spacing: .08em;
      -webkit-text-stroke: 1px #8f4210;
      paint-order: stroke fill;
      text-shadow: 0 4px 0 #b95712, 0 7px 10px rgba(89, 32, 4, .35);
      transition: transform .16s ease, filter .16s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .play-btn::after {
      content: "";
      position: absolute;
      top: -55%;
      left: -42%;
      width: 28%;
      height: 210%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.82), transparent);
      transform: rotate(22deg);
      animation: button-shine 2s ease-in-out infinite;
      pointer-events: none;
    }

    .play-btn:hover {
      transform: translateY(-2px) scale(1.05);
      filter: saturate(1.12) brightness(1.05);
    }

    .play-btn:active {
      transform: translateY(5px) scale(.95);
      box-shadow:
        0 2px 0 #a84a12,
        0 6px 10px rgba(7, 8, 49, .4),
        inset 0 3px 0 rgba(255, 255, 255, .62);
    }

    .home-wallet {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 14px;
      padding: 6px 14px 6px 8px;
      border-radius: 999px;
      background: rgba(0, 0, 0, .35);
      border: 2px solid rgba(255, 220, 80, .55);
      font-weight: 900;
      font-size: clamp(16px, 4.5cqi, 22px);
      color: #ffe566;
      pointer-events: none;
    }

    .home-wallet .coin-icon {
      width: 22px;
      height: 22px;
    }

    .store-fab {
      position: absolute;
      right: max(12px, env(safe-area-inset-right));
      bottom: max(16px, env(safe-area-inset-bottom));
      z-index: 8;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      width: auto;
      height: auto;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      cursor: pointer;
      pointer-events: auto;
      -webkit-tap-highlight-color: transparent;
      animation: store-fab-wobble 2s ease-in-out infinite;
      transform-origin: 50% 70%;
    }

    .store-fab[hidden] {
      display: none !important;
    }

    .store-fab-badge {
      display: grid;
      place-items: center;
      width: 86px;
      height: 86px;
      border-radius: 50%;
      background: rgba(0, 0, 0, .4);
      border: 2px solid rgba(255, 255, 255, .22);
      box-shadow:
        0 8px 18px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .18);
    }

    .store-fab img {
      display: block;
      width: 72px;
      height: 72px;
      object-fit: contain;
      border-radius: 0;
      background: transparent;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35));
    }

    .store-fab-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 64px;
      padding: 3px 10px 4px;
      border-radius: 999px;
      background: linear-gradient(180deg, #ffe566 0%, #f0a800 100%);
      border: 2px solid #1a1208;
      box-shadow: 0 3px 0 #8a5200, 0 5px 10px rgba(0, 0, 0, .28);
      color: #fff;
      font-family: "Luckiest Guy", "Nunito", sans-serif;
      font-size: 13px;
      letter-spacing: .08em;
      line-height: 1;
      text-shadow:
        -1.5px -1.5px 0 #1a1208,
         1.5px -1.5px 0 #1a1208,
        -1.5px  1.5px 0 #1a1208,
         1.5px  1.5px 0 #1a1208,
         0 2px 0 #1a1208;
      pointer-events: none;
    }

    .store-fab:active {
      animation: none;
      transform: scale(.94);
    }

    .store-fab:active .store-fab-label {
      box-shadow: 0 1px 0 #8a5200;
      transform: translateY(1px);
    }

    .store-modal {
      position: absolute;
      inset: 0;
      z-index: 45;
      display: grid;
      place-items: center;
      padding: 18px;
      background: rgba(0, 0, 0, .45);
      pointer-events: auto;
    }

    .store-modal[hidden] {
      display: none !important;
    }

    .store-panel {
      position: relative;
      width: min(92%, 360px);
      max-height: min(82%, 560px);
      padding: 28px 16px 18px;
      border-radius: 28px;
      background: rgba(0, 0, 0, .85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 3px solid rgba(255, 255, 255, .18);
      box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
      text-align: center;
      overflow-y: auto;
      animation: level-select-pop .28s cubic-bezier(.2, 1.3, .4, 1) both;
    }

    .store-close {
      position: absolute;
      top: 10px;
      right: 12px;
      width: 36px;
      height: 36px;
      padding: 0;
      border: 2px solid rgba(255, 255, 255, .35);
      border-radius: 50%;
      background: rgba(255, 255, 255, .1);
      color: #fff;
      font-size: 22px;
      font-weight: 800;
      line-height: 1;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .store-close:active {
      transform: scale(.94);
      background: rgba(255, 255, 255, .2);
    }

    .store-title {
      margin: 0 0 12px;
      font-family: "Luckiest Guy", "Nunito", sans-serif;
      font-size: clamp(26px, 8cqi, 34px);
      letter-spacing: .08em;
      color: #ffd84a;
      text-shadow: 0 3px 0 rgba(0, 0, 0, .35);
    }

    .store-wallet {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 16px;
      padding: 6px 14px 6px 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .08);
      border: 2px solid rgba(255, 220, 80, .55);
      font-weight: 900;
      font-size: clamp(16px, 4.5cqi, 22px);
      color: #ffe566;
    }

    .store-wallet .coin-icon {
      width: 22px;
      height: 22px;
    }

    .skill-shop {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 10px;
      pointer-events: auto;
    }

    .skill-btn {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 10px 12px;
      border: 2px solid rgba(255, 255, 255, .45);
      border-radius: 16px;
      background: linear-gradient(180deg, #3d4a78 0%, #24305a 100%);
      box-shadow: 0 4px 0 #141a33, inset 0 1px 0 rgba(255, 255, 255, .25);
      color: #fff;
      cursor: pointer;
      text-align: left;
      -webkit-tap-highlight-color: transparent;
      transition: transform .12s, filter .12s, opacity .12s;
    }

    .skill-btn:not(:disabled):active {
      transform: translateY(2px) scale(.98);
    }

    .skill-btn:disabled,
    .skill-btn.is-locked {
      background: linear-gradient(180deg, #6a6e7a 0%, #4a4e58 100%);
      border-color: rgba(255, 255, 255, .28);
      box-shadow: 0 3px 0 #2e3138;
      opacity: .72;
      cursor: not-allowed;
      filter: grayscale(.35);
    }

    .skill-icon {
      flex: 0 0 auto;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, .5);
      box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35);
    }

    .skill-icon-magnet {
      background:
        radial-gradient(circle at 30% 30%, #fff 0 14%, transparent 15%),
        linear-gradient(135deg, #ff5a6a 0 48%, #4aa6ff 52% 100%);
    }

    .skill-icon-shield {
      background:
        radial-gradient(circle at 50% 38%, #ffe566 0 18%, transparent 19%),
        linear-gradient(180deg, #5ec8ff 0%, #2a6dff 100%);
    }

    .skill-icon-army {
      background:
        radial-gradient(circle at 35% 40%, #7cf0ff 0 22%, transparent 23%),
        radial-gradient(circle at 65% 40%, #7cf0ff 0 22%, transparent 23%),
        linear-gradient(180deg, #3aa0ff 0%, #1a5fd4 100%);
    }

    .skill-icon-income {
      background:
        radial-gradient(circle at 50% 45%, #fff6a8 0 28%, transparent 29%),
        linear-gradient(180deg, #ffe566 0%, #f0a800 100%);
    }

    .skill-copy {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
    }

    .skill-copy b {
      font-size: clamp(13px, 3.6cqi, 15px);
      font-weight: 900;
      letter-spacing: .03em;
      line-height: 1.1;
    }

    .skill-copy small {
      font-size: 11px;
      font-weight: 800;
      color: rgba(220, 235, 255, .75);
    }

    .skill-price {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(0, 0, 0, .35);
      border: 1px solid rgba(255, 220, 80, .45);
      font-weight: 900;
      font-size: clamp(12px, 3.2cqi, 14px);
      color: #ffe566;
    }

    .skill-price .coin-icon,
    .skill-price i.coin-icon {
      width: 14px;
      height: 14px;
      display: inline-block;
    }

    @keyframes store-fab-wobble {
      0%, 72%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
      }
      78% {
        transform: translateY(-5px) rotate(-7deg) scale(1.06);
      }
      84% {
        transform: translateY(-2px) rotate(6deg) scale(1.04);
      }
      90% {
        transform: translateY(-4px) rotate(-4deg) scale(1.05);
      }
      96% {
        transform: translateY(0) rotate(2deg) scale(1.02);
      }
    }

    .menu-tip {
      margin: 18px 0 0;
      color: rgba(229, 248, 255, .92);
      font-size: clamp(13px, 3.4vw, 17px);
      font-weight: 900;
      letter-spacing: .13em;
      text-shadow: 0 2px 0 rgba(14, 17, 77, .7);
      animation: tip-pulse 1.6s ease-in-out infinite;
    }

    .tip {
      position: absolute;
      left: 50%;
      bottom: max(28px, env(safe-area-inset-bottom));
      transform: translateX(-50%);
      white-space: nowrap;
      font-weight: 900;
      font-size: clamp(15px, 3.6vw, 20px);
      padding: 8px 18px;
      border-radius: 999px;
      background: rgba(0, 0, 0, .45);
      opacity: 0;
      transition: opacity .4s;
    }

    .float-text {
      position: absolute;
      transform: translate(-50%, -50%);
      font-size: 32px;
      font-weight: 1000;
      animation: pop .8s ease-out forwards;
    }

    .gate-flash {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 20;
      background: radial-gradient(circle, rgba(255,255,255,.65), rgba(92,231,255,.18) 42%, transparent 72%);
      animation: gate-flash .38s ease-out forwards;
    }

    @keyframes pop {
      0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(.65);
      }

      30% {
        opacity: 1;
        transform: translate(-50%, -35px) scale(1.15);
      }

      100% {
        opacity: 0;
        transform: translate(-50%, -80px) scale(.9);
      }
    }

    @keyframes gate-flash {
      from { opacity: .9; }
      to { opacity: 0; }
    }

    @keyframes title-float {
      0%, 100% { transform: translateY(0) rotate(-1deg); }
      50% { transform: translateY(-10px) rotate(1deg); }
    }

    @keyframes button-shine {
      0%, 35% { left: -42%; opacity: 0; }
      45% { opacity: 1; }
      72%, 100% { left: 118%; opacity: 0; }
    }

    @keyframes tip-pulse {
      0%, 100% { opacity: .48; transform: scale(.97); }
      50% { opacity: 1; transform: scale(1.03); }
    }

    @media (prefers-reduced-motion: reduce) {
      .start-panel .logo,
      .play-btn::after,
      .cartoon-btn::after,
      .menu-tip,
      .store-fab,
      .confetti-piece,
      #resultScreen:not([hidden]) .result-panel { animation: none; }
      #resultScreen:not([hidden]) .result-panel {
        opacity: 1;
        transform: scale(1);
      }
      .level-select-panel,
      .store-panel,
      .pause-panel { animation: none; }
    }

    @media (min-width: 760px) {
      .tip {
        bottom: 32px;
      }
    }