:root {
      --bg: #030208;
      --gold: #f7c948;
      --gold-2: #ff7a18;
      --cream: #fff1bc;
      --danger: #ff3864;
      --mint: #4dffd2;
      --violet: #a78bfa;
      --ice: #7dd3fc;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at 50% -12%, rgba(255,211,78,.28), transparent 34rem),
        radial-gradient(circle at 18% 86%, rgba(255,79,63,.10), transparent 28rem),
        linear-gradient(135deg, #030302, #1b1005 55%, #030302);
      color: var(--cream);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .game { width: min(1140px, calc(100vw - 22px)); padding: 14px; }

    .shell {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,211,78,.34);
      border-radius: 32px;
      background: linear-gradient(180deg, rgba(255,211,78,.08), rgba(0,0,0,.18));
      box-shadow: 0 28px 90px rgba(0,0,0,.52), inset 0 0 55px rgba(255,211,78,.07);
    }

    .topbar {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
      padding: 16px 18px 10px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      color: var(--gold);
      font-size: 13px;
      font-weight: 950;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .brand-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 0 20px var(--gold);
      flex: 0 0 auto;
    }

    .stats {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
      font-size: 13px;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .pill, .music-toggle {
      border: 1px solid rgba(255,211,78,.26);
      border-radius: 999px;
      padding: 8px 11px;
      background: rgba(5,4,3,.58);
      color: rgba(255,244,186,.76);
      white-space: nowrap;
      box-shadow: inset 0 0 16px rgba(255,211,78,.05);
    }

    .pill strong { color: var(--gold); }
    .pill .danger { color: var(--danger); }
    .pill .mint { color: var(--mint); }
    .pill .ice { color: var(--ice); }

    .music-toggle {
      color: var(--gold);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
      cursor: pointer;
    }

    .music-toggle:hover { transform: translateY(-1px); background: rgba(255,211,78,.12); }

    .mission-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 0 18px 12px;
      font-size: 13px;
      color: rgba(255,244,186,.76);
    }

    .mission {
      overflow: hidden;
      border: 1px solid rgba(255,211,78,.18);
      border-radius: 999px;
      background: rgba(5,4,3,.46);
    }

    .mission-text { position: relative; z-index: 2; display: block; padding: 9px 12px; }
    .mission-bar { height: 100%; width: 0%; background: linear-gradient(90deg, rgba(255,159,28,.18), rgba(255,211,78,.35)); position: absolute; inset: 0 auto 0 0; transition: width .2s ease; }
    .mission-inner { position: relative; min-height: 36px; }
    .effects { text-align: right; color: var(--mint); min-width: 180px; }

    .canvas-wrap { position: relative; padding: 0 18px 18px; }

    canvas {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 26px;
      background: #080604;
      box-shadow: inset 0 0 0 1px rgba(255,211,78,.14);
      cursor: crosshair;
      outline: none;
      touch-action: none;
    }

    .overlay {
      position: absolute;
      inset: 0 18px 18px;
      display: grid;
      place-items: center;
      padding: 22px;
      border-radius: 26px;
      background:
        radial-gradient(circle at 50% 22%, rgba(255,211,78,.2), transparent 24rem),
        rgba(2,2,1,.70);
      backdrop-filter: blur(7px);
      transition: 180ms ease;
    }

    .overlay[hidden] { opacity: 0; visibility: hidden; pointer-events: none; }

    .card {
      width: min(760px, 100%);
      max-height: calc(100% - 18px);
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      padding: clamp(18px, 4vw, 30px);
      border: 1px solid rgba(255,211,78,.36);
      border-radius: 30px;
      background: linear-gradient(180deg, rgba(14,10,4,.94), rgba(3,3,2,.92));
      text-align: center;
      box-shadow: 0 24px 80px rgba(0,0,0,.52), 0 0 44px rgba(255,159,28,.12);
    }

    .card::-webkit-scrollbar, .shop-panel::-webkit-scrollbar { width: 10px; }
    .card::-webkit-scrollbar-track, .shop-panel::-webkit-scrollbar-track { background: rgba(255,211,78,.08); border-radius: 999px; }
    .card::-webkit-scrollbar-thumb, .shop-panel::-webkit-scrollbar-thumb { background: rgba(255,211,78,.34); border-radius: 999px; }
    .card::-webkit-scrollbar-thumb:hover, .shop-panel::-webkit-scrollbar-thumb:hover { background: rgba(255,211,78,.52); }

    h1 {
      margin: 0 0 10px;
      color: var(--gold);
      font-size: clamp(38px, 7vw, 76px);
      line-height: .88;
      letter-spacing: -.08em;
      text-transform: uppercase;
      text-shadow: 0 0 28px rgba(255,211,78,.3);
    }

    p { margin: 0 auto 20px; max-width: 60ch; color: rgba(255,244,186,.82); line-height: 1.55; }

    button.primary {
      border: 0;
      border-radius: 999px;
      padding: 13px 21px;
      background: linear-gradient(135deg, var(--cream), var(--gold), var(--gold-2));
      color: #181006;
      font-weight: 950;
      letter-spacing: .05em;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 15px 38px rgba(255,159,28,.28);
    }

    button.primary:hover { transform: translateY(-1px); }

    .overlay-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      align-items: center;
    }

    button.secondary {
      border: 1px solid rgba(255,211,78,.28);
      border-radius: 999px;
      padding: 13px 21px;
      background: rgba(5,4,3,.68);
      color: var(--cream);
      font-weight: 950;
      letter-spacing: .05em;
      text-transform: uppercase;
      cursor: pointer;
    }

    button.secondary:hover {
      transform: translateY(-1px);
      background: rgba(255,211,78,.12);
    }
    .help { display: block; margin-top: 13px; color: rgba(255,244,186,.62); font-size: 12px; }

    .quickstart {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin: 18px auto 14px;
      max-width: 680px;
      text-align: left;
    }

    .step-card {
      position: relative;
      overflow: hidden;
      min-height: 132px;
      border: 1px solid rgba(255,211,78,.22);
      border-radius: 22px;
      padding: 14px;
      background: linear-gradient(180deg, rgba(255,211,78,.10), rgba(5,4,3,.56));
      box-shadow: inset 0 0 22px rgba(255,211,78,.05);
    }

    .step-card::after {
      content: '';
      position: absolute;
      inset: auto -18px -26px auto;
      width: 86px;
      height: 86px;
      border-radius: 50%;
      background: rgba(255,211,78,.08);
    }

    .step-icon {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      margin-bottom: 10px;
      border-radius: 16px;
      background: rgba(255,211,78,.16);
      color: var(--gold);
      font-size: 24px;
      box-shadow: 0 0 18px rgba(255,211,78,.12);
    }

    .step-card strong {
      display: block;
      margin-bottom: 6px;
      color: var(--gold);
      font-size: 17px;
      letter-spacing: -.02em;
    }

    .step-card span {
      display: block;
      color: rgba(255,244,186,.76);
      font-size: 13px;
      line-height: 1.32;
    }

    .control-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin: 8px auto 16px;
    }

    .key-chip {
      border: 1px solid rgba(255,211,78,.22);
      border-radius: 999px;
      padding: 7px 10px;
      background: rgba(5,4,3,.58);
      color: rgba(255,244,186,.82);
      font-size: 12px;
      font-weight: 850;
      letter-spacing: .03em;
      white-space: nowrap;
    }

    .more-rules {
      max-width: 680px;
      margin: 0 auto 18px;
      border: 1px solid rgba(255,211,78,.18);
      border-radius: 18px;
      background: rgba(5,4,3,.42);
      text-align: left;
      color: rgba(255,244,186,.76);
    }

    .more-rules summary {
      padding: 10px 13px;
      cursor: pointer;
      color: var(--gold);
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
      font-size: 12px;
    }

    .more-rules ul {
      margin: 0;
      padding: 0 16px 14px 32px;
      font-size: 13px;
      line-height: 1.42;
    }

    .shop-panel {
      max-width: 720px;
      max-height: min(52vh, 440px);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-right: 8px;
      margin: 16px auto 18px;
      text-align: left;
    }

    .shop-head {
      position: sticky;
      top: 0;
      z-index: 3;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-bottom: 10px;
      padding: 8px 0 10px;
      background: linear-gradient(180deg, rgba(14,10,4,.98), rgba(14,10,4,.86));
      color: rgba(255,244,186,.76);
      font-size: 13px;
    }

    .shop-head strong { color: var(--gold); }

    .shop-tabs {
      position: sticky;
      top: 45px;
      z-index: 3;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
      padding: 0 0 10px;
      background: linear-gradient(180deg, rgba(14,10,4,.92), rgba(14,10,4,.72));
    }

    .shop-tab {
      border: 1px solid rgba(255,211,78,.22);
      border-radius: 999px;
      padding: 8px 11px;
      background: rgba(5,4,3,.58);
      color: rgba(255,244,186,.74);
      font-size: 12px;
      font-weight: 950;
      letter-spacing: .04em;
      text-transform: uppercase;
      cursor: pointer;
    }

    .shop-tab:hover {
      background: rgba(255,211,78,.12);
      color: var(--cream);
    }

    .shop-tab.active {
      border-color: rgba(77,255,210,.55);
      background: rgba(77,255,210,.16);
      color: var(--mint);
      box-shadow: 0 0 18px rgba(77,255,210,.10);
    }

    .shop-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 10px;
    }

    .shop-card {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,211,78,.20);
      border-radius: 20px;
      padding: 12px;
      background: linear-gradient(180deg, rgba(255,211,78,.09), rgba(5,4,3,.58));
      min-height: 194px;
    }

    .shop-preview {
      display: grid;
      place-items: center;
      height: 92px;
      margin-bottom: 9px;
      border-radius: 16px;
      background:
        radial-gradient(circle at 50% 30%, rgba(255,211,78,.16), transparent 62%),
        rgba(0,0,0,.25);
      box-shadow: inset 0 0 18px rgba(255,211,78,.05);
    }

    .shop-canvas {
      width: 100%;
      height: 86px;
      display: block;
    }

    .shop-card h3 {
      margin: 0 0 4px;
      color: var(--gold);
      font-size: 15px;
      line-height: 1.1;
    }

    .shop-card p {
      margin: 0 0 10px;
      color: rgba(255,244,186,.68);
      font-size: 12px;
      line-height: 1.3;
    }

    .shop-card button {
      width: 100%;
      border: 1px solid rgba(255,211,78,.24);
      border-radius: 999px;
      padding: 8px 10px;
      background: rgba(255,211,78,.12);
      color: var(--cream);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
      cursor: pointer;
    }

    .shop-card button:hover { background: rgba(255,211,78,.20); }
    .shop-card button:disabled { opacity: .45; cursor: not-allowed; }

    .shop-card.equipped {
      border-color: rgba(77,255,210,.55);
      box-shadow: 0 0 24px rgba(77,255,210,.08), inset 0 0 24px rgba(77,255,210,.05);
    }

    .shop-tag {
      position: absolute;
      top: 10px;
      right: 10px;
      border-radius: 999px;
      padding: 4px 7px;
      background: rgba(0,0,0,.35);
      color: rgba(255,244,186,.75);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    @media (max-width: 760px) {
      .quickstart { grid-template-columns: 1fr; }
      .shop-grid { grid-template-columns: 1fr; }
      .topbar, .mission-row { grid-template-columns: 1fr; }
      .stats { justify-content: flex-start; }
      .effects { text-align: left; }
      .canvas-wrap { padding: 0 10px 10px; }
      .overlay { inset: 0 10px 10px; }
    }

    .ad-cta {
      position: relative;
      isolation: isolate;
      min-width: 310px;
      padding: 16px 24px !important;
      border: 2px solid rgba(255, 211, 78, .95) !important;
      border-radius: 999px !important;
      background:
        linear-gradient(135deg, #fff1bc 0%, #ffd166 38%, #ff9f1c 100%) !important;
      color: #1b1200 !important;
      font-size: 15px !important;
      font-weight: 950 !important;
      letter-spacing: .08em !important;
      box-shadow:
        0 0 0 3px rgba(255, 211, 78, .12),
        0 10px 28px rgba(255, 159, 28, .32),
        0 0 34px rgba(255, 211, 78, .34) !important;
      transform: translateY(0);
      animation: adCtaPulse 1.15s ease-in-out infinite;
    }

    .ad-cta::before {
      content: "";
      position: absolute;
      inset: -7px;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(255, 211, 78, .45), rgba(255, 77, 227, .34));
      filter: blur(14px);
      opacity: .75;
      z-index: -1;
    }

    .ad-cta::after {
      content: "REWARD";
      position: absolute;
      top: -12px;
      right: 18px;
      padding: 3px 9px;
      border-radius: 999px;
      background: #ff3864;
      color: #fff1bc;
      font-size: 9px;
      font-weight: 950;
      letter-spacing: .08em;
      box-shadow: 0 0 18px rgba(255, 56, 100, .55);
    }

    .ad-cta:hover {
      transform: translateY(-2px) scale(1.035);
      box-shadow:
        0 0 0 4px rgba(255, 211, 78, .18),
        0 14px 34px rgba(255, 159, 28, .42),
        0 0 48px rgba(255, 211, 78, .48) !important;
    }

    .ad-cta:active {
      transform: translateY(1px) scale(.98);
    }

    .revive-ad-cta {
      background:
        linear-gradient(135deg, #fff1bc 0%, #4dffd2 38%, #ff4de3 100%) !important;
      border-color: rgba(77, 255, 210, .95) !important;
      box-shadow:
        0 0 0 3px rgba(77, 255, 210, .14),
        0 10px 30px rgba(255, 77, 227, .34),
        0 0 40px rgba(77, 255, 210, .35) !important;
    }

    .revive-ad-cta::after {
      content: "REVIVE";
      background: #4dffd2;
      color: #06120f;
    }

    @keyframes adCtaPulse {
      0%, 100% {
        filter: brightness(1);
      }

      50% {
        filter: brightness(1.18);
      }
    }

    #dominionButton {
      border-color: rgba(255, 77, 227, .75) !important;
      background: linear-gradient(135deg, rgba(255, 77, 227, .22), rgba(255, 211, 78, .12)) !important;
      color: #ff6bd6 !important;
      box-shadow:
        0 0 18px rgba(255, 77, 227, .22),
        inset 0 0 18px rgba(255, 77, 227, .08) !important;
    }

    #dominionButton:hover {
      background: linear-gradient(135deg, rgba(255, 77, 227, .34), rgba(255, 211, 78, .18)) !important;
      color: #fff1bc !important;
      transform: translateY(-1px);
      box-shadow:
        0 0 26px rgba(255, 77, 227, .36),
        inset 0 0 20px rgba(255, 77, 227, .12) !important;
    }

    .in-game-music-picker {
      position: absolute;
      right: 28px;
      top: 188px;
      z-index: 20;
      display: grid;
      justify-items: end;
      gap: 8px;
      pointer-events: none;
    }

    #inGameMusicButton,
    .in-game-music-menu button {
      pointer-events: auto;
    }

    #inGameMusicButton {
      width: 52px;
      height: 52px;
      border-radius: 999px;
      border: 2px solid rgba(127, 255, 246, .95);

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

      padding: 0;
      margin: 0;

      background:
        radial-gradient(circle at 32% 26%, #ffffff 0%, #7ffff6 16%, #20e7dd 42%, #07515d 100%);
      color: #06120f;
      font-size: 31px;
      font-weight: 950;
      line-height: 1;
      text-align: center;

      box-shadow:
        0 0 0 3px rgba(0, 0, 0, .24),
        0 0 24px rgba(77, 255, 210, .52),
        0 10px 24px rgba(0, 0, 0, .34),
        inset 0 3px 12px rgba(255,255,255,.38),
        inset 0 -8px 18px rgba(0,0,0,.22);

      cursor: pointer;
      transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    }

    #inGameMusicButton:hover {
      transform: translateY(-1px) scale(1.07);
      filter: brightness(1.12);
      border-color: #fff1bc;
      box-shadow:
        0 0 0 3px rgba(0, 0, 0, .24),
        0 0 34px rgba(127, 255, 246, .72),
        0 12px 28px rgba(0, 0, 0, .38),
        inset 0 3px 14px rgba(255,255,255,.45),
        inset 0 -8px 18px rgba(0,0,0,.20);
    }

    #inGameMusicButton:active {
      transform: scale(.96);
    }

    #inGameMusicButton.open {
      background:
        radial-gradient(circle at 32% 26%, #ffffff 0%, #fff1bc 18%, #4dffd2 46%, #ff4de3 100%);
      border-color: #fff1bc;
      box-shadow:
        0 0 0 3px rgba(0, 0, 0, .24),
        0 0 42px rgba(255, 77, 227, .55),
        0 0 28px rgba(77, 255, 210, .55),
        inset 0 3px 14px rgba(255,255,255,.48),
        inset 0 -8px 18px rgba(0,0,0,.18);
    }

    

    .in-game-music-menu {
      width: 190px;
      padding: 10px;
      border: 1px solid rgba(255, 211, 78, .35);
      border-radius: 18px;
      background: rgba(3, 2, 8, .82);
      box-shadow:
        0 16px 40px rgba(0, 0, 0, .48),
        0 0 22px rgba(77, 255, 210, .18);
      backdrop-filter: blur(10px);
    }

    .in-game-music-menu button {
      width: 100%;
      margin: 3px 0;
      padding: 9px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 211, 78, .28);
      background: rgba(255, 255, 255, .04);
      color: #fff1bc;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .06em;
      text-align: left;
      cursor: pointer;
    }

    .in-game-music-menu button:hover,
    .in-game-music-menu button.active {
      border-color: #4dffd2;
      color: #4dffd2;
      background: rgba(77, 255, 210, .12);
    }

    .in-game-music-menu {
      width: 210px !important;
      padding: 12px !important;
      border: 2px solid rgba(127, 255, 246, .85) !important;
      border-radius: 22px !important;

      background:
        radial-gradient(circle at 25% 0%, rgba(127, 255, 246, .45), transparent 55%),
        linear-gradient(180deg, rgba(255, 241, 188, .96), rgba(255, 211, 78, .88)) !important;

      box-shadow:
        0 16px 38px rgba(0, 0, 0, .42),
        0 0 26px rgba(77, 255, 210, .42),
        inset 0 2px 12px rgba(255, 255, 255, .42) !important;

      backdrop-filter: blur(10px);
    }

    .in-game-music-menu::before {
      content: "PICK MUSIC";
      display: block;
      margin: 0 0 8px;
      color: #1b1200;
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .12em;
      text-align: center;
      opacity: .72;
    }

    .in-game-music-menu button {
      width: 100% !important;
      margin: 5px 0 !important;
      padding: 11px 13px !important;
      border-radius: 999px !important;

      border: 1.5px solid rgba(27, 18, 0, .22) !important;
      background: rgba(255, 255, 255, .58) !important;
      color: #1b1200 !important;

      font-size: 12px !important;
      font-weight: 950 !important;
      letter-spacing: .06em !important;
      text-align: left !important;

      box-shadow:
        inset 0 1px 8px rgba(255, 255, 255, .42),
        0 2px 8px rgba(0, 0, 0, .10) !important;

      cursor: pointer;
    }

    .in-game-music-menu button:hover {
      border-color: #06120f !important;
      background: rgba(255, 255, 255, .86) !important;
      color: #06120f !important;
      transform: translateX(-2px);
    }

    .in-game-music-menu button.active {
      border-color: #4dffd2 !important;
      background:
        linear-gradient(135deg, #4dffd2, #fff1bc) !important;
      color: #06120f !important;
      box-shadow:
        0 0 18px rgba(77, 255, 210, .55),
        inset 0 2px 10px rgba(255, 255, 255, .5) !important;
    }

    /* prettier music option colors */
    .in-game-music-menu button {
      transition: transform .15s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
      text-shadow: 0 1px 0 rgba(255,255,255,.18);
    }

    /* No Music */
    .in-game-music-menu button[data-music-style="none"] {
      color: #8c1431 !important;
      border-color: rgba(255, 56, 100, .65) !important;
      background: linear-gradient(135deg, rgba(255,180,195,.95), rgba(255,230,235,.92)) !important;
      box-shadow: inset 0 1px 8px rgba(255,255,255,.38), 0 0 10px rgba(255,56,100,.16);
    }
    .in-game-music-menu button[data-music-style="none"]:hover,
    .in-game-music-menu button[data-music-style="none"].active {
      color: #fff6f8 !important;
      border-color: #ff3864 !important;
      background: linear-gradient(135deg, #ff6b8d, #ff3864) !important;
      box-shadow: 0 0 18px rgba(255,56,100,.45), inset 0 1px 10px rgba(255,255,255,.22);
    }

    /* Classic */
    .in-game-music-menu button[data-music-style="classic"] {
      color: #6e4b00 !important;
      border-color: rgba(255, 209, 102, .78) !important;
      background: linear-gradient(135deg, rgba(255,245,200,.98), rgba(255,223,120,.9)) !important;
      box-shadow: inset 0 1px 8px rgba(255,255,255,.4), 0 0 10px rgba(255,209,102,.18);
    }
    .in-game-music-menu button[data-music-style="classic"]:hover,
    .in-game-music-menu button[data-music-style="classic"].active {
      color: #251500 !important;
      border-color: #ffd166 !important;
      background: linear-gradient(135deg, #fff1bc, #ffd166) !important;
      box-shadow: 0 0 18px rgba(255,209,102,.42), inset 0 1px 10px rgba(255,255,255,.22);
    }

    /* Tropical */
    .in-game-music-menu button[data-music-style="tropical"] {
      color: #006b52 !important;
      border-color: rgba(77, 255, 210, .82) !important;
      background: linear-gradient(135deg, rgba(220,255,242,.98), rgba(132,255,201,.94)) !important;
      box-shadow: inset 0 1px 8px rgba(255,255,255,.4), 0 0 10px rgba(77,255,210,.18);
    }
    .in-game-music-menu button[data-music-style="tropical"]:hover,
    .in-game-music-menu button[data-music-style="tropical"].active {
      color: #03251d !important;
      border-color: #4dffd2 !important;
      background: linear-gradient(135deg, #b8ffe7, #4dffd2) !important;
      box-shadow: 0 0 18px rgba(77,255,210,.45), inset 0 1px 10px rgba(255,255,255,.22);
    }

    /* Underwater */
    .in-game-music-menu button[data-music-style="underwater"] {
      color: #0f4f8e !important;
      border-color: rgba(108, 196, 255, .82) !important;
      background: linear-gradient(135deg, rgba(227,246,255,.98), rgba(168,224,255,.94)) !important;
      box-shadow: inset 0 1px 8px rgba(255,255,255,.4), 0 0 10px rgba(108,196,255,.18);
    }
    .in-game-music-menu button[data-music-style="underwater"]:hover,
    .in-game-music-menu button[data-music-style="underwater"].active {
      color: #031c35 !important;
      border-color: #6cc4ff !important;
      background: linear-gradient(135deg, #dff5ff, #6cc4ff) !important;
      box-shadow: 0 0 18px rgba(108,196,255,.42), inset 0 1px 10px rgba(255,255,255,.22);
    }

    /* Ancient Temple */
    .in-game-music-menu button[data-music-style="temple"] {
      color: #6a4100 !important;
      border-color: rgba(255, 181, 71, .82) !important;
      background: linear-gradient(135deg, rgba(255,242,212,.98), rgba(255,205,124,.94)) !important;
      box-shadow: inset 0 1px 8px rgba(255,255,255,.4), 0 0 10px rgba(255,181,71,.18);
    }
    .in-game-music-menu button[data-music-style="temple"]:hover,
    .in-game-music-menu button[data-music-style="temple"].active {
      color: #2b1800 !important;
      border-color: #ffb547 !important;
      background: linear-gradient(135deg, #ffecc7, #ffb547) !important;
      box-shadow: 0 0 18px rgba(255,181,71,.42), inset 0 1px 10px rgba(255,255,255,.22);
    }

    .in-game-music-menu button:hover {
      transform: translateY(-1px) scale(1.01);
    }

    .in-game-music-menu button[data-music-style="none"],
    .in-game-music-menu button[data-music-style="classic"],
    .in-game-music-menu button[data-music-style="tropical"],
    .in-game-music-menu button[data-music-style="underwater"],
    .in-game-music-menu button[data-music-style="temple"],
    .in-game-music-menu button[data-music-style="anime"] {
      font-size: 13.4px !important;
      font-weight: 950 !important;
      line-height: 1 !important;
    }

    #inGameMusicButton {
      display: grid !important;
      place-items: center !important;
      padding: 0 !important;
      margin: 0 !important;
      line-height: 1 !important;
      font-size: 0 !important;
    }

    /* Disable old ::before fix if you added it earlier */
    #inGameMusicButton::before {
      content: none !important;
    }

    .music-note-icon {
      display: block;
      width: 1em;
      height: 1em;
      font-size: 31px;
      line-height: 1;
      text-align: center;
      transform: translate(-1px, -2px);
      pointer-events: none;
    }

    .in-game-music-menu {
      max-height: 280px !important;
      overflow-y: auto !important;
      overscroll-behavior: contain;
      padding-right: 12px !important;
    }

    .in-game-music-menu::-webkit-scrollbar {
      width: 8px;
    }

    .in-game-music-menu::-webkit-scrollbar-track {
      background: rgba(27, 18, 0, .12);
      border-radius: 999px;
    }

    .in-game-music-menu::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #4dffd2, #ffd166);
      border-radius: 999px;
    }

    .in-game-music-menu::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #fff1bc, #4dffd2);
    }

    .in-game-music-menu button[data-music-style="anime"] {
      color: #6d1b87 !important;
      border-color: rgba(255, 77, 227, .82) !important;
      background: linear-gradient(135deg, rgba(255,235,255,.98), rgba(255,170,245,.94)) !important;
      box-shadow:
        inset 0 1px 8px rgba(255,255,255,.45),
        0 0 12px rgba(255,77,227,.22);
    }

    .in-game-music-menu button[data-music-style="anime"]:hover,
    .in-game-music-menu button[data-music-style="anime"].active {
      color: #fff7ff !important;
      border-color: #ff4de3 !important;
      background: linear-gradient(135deg, #ff9df3, #a78bfa, #4dffd2) !important;
      box-shadow:
        0 0 20px rgba(255,77,227,.48),
        0 0 14px rgba(77,255,210,.28),
        inset 0 1px 10px rgba(255,255,255,.28) !important;
    }