@media (max-width: 899px) {
  .screen--task-list {
    padding: 0 !important;
    background: #f3f3f3 !important;
  }

  .screen--task-list.screen--fig-export > :not(.fig-page) {
    display: none !important;
  }

  .fig-page--task-list {
    position: relative;
    width: 100vw;
    max-width: 390px;
    min-height: 1260px;
    margin: 0 auto;
    overflow: hidden;
    background: #f3f3f3;
    color: #202124;
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif;
    letter-spacing: 0;
  }

  .fig-page--task-list::after {
    content: "";
    position: absolute;
    left: 0;
    top: 940px;
    width: 390px;
    height: 105px;
    pointer-events: none;
    background: url("assets/figma-exact/task-list-buy-note-mobile-exact.png") center / 100% 100% no-repeat;
    z-index: 1;
  }

  .fig-page--task-list *,
  .fig-page--task-list *::before,
  .fig-page--task-list *::after {
    box-sizing: border-box;
    letter-spacing: 0;
  }

  .fig-task-topbar {
    position: absolute;
    left: 20px;
    top: 45px;
    width: 348px;
    height: 53px;
    display: flex;
    align-items: center;
    padding: 0 9px 0 13px;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 5px 13px rgba(0,0,0,.12);
    z-index: 2;
  }

  .fig-task-topbar > button:first-child {
    position: relative;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 0;
    border-radius: 50%;
    background: #efefef;
  }

  .fig-task-topbar > button:first-child::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 12px;
    width: 11px;
    height: 11px;
    border-left: 3px solid #a5a5a5;
    border-bottom: 3px solid #a5a5a5;
    transform: rotate(45deg);
  }

  .fig-task-topbar h1 {
    flex: 1 1 auto;
    margin: 0 10px 0 13px;
    color: #191919;
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif !important;
    font-size: 17px;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
    text-transform: none !important;
  }

  .fig-task-topbar > button:last-child {
    position: relative;
    width: 83px;
    height: 34px;
    flex: 0 0 83px;
    padding: 0 11px 1px 33px;
    border: 0;
    border-radius: 999px;
    background: #38383a;
    color: #e9e9e9;
    text-align: right;
    font-size: 17px;
    line-height: 34px;
    font-weight: 900;
  }

  .fig-task-topbar > button:last-child::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 4px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: url("assets/figma/fig-coin.webp") center / cover no-repeat;
  }

  .fig-task-title {
    position: absolute;
    left: 0;
    top: 151px;
    width: 100%;
    margin: 0;
    text-align: center;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 26px;
    line-height: .95;
    text-transform: uppercase;
  }

  .fig-task-title span { color: #151515; }
  .fig-task-title em { color: #ff861c; font-style: normal; }

  .fig-task-list {
    position: absolute;
    left: 20px;
    top: 218px;
    width: 348px;
  }

  .fig-task-card {
    position: absolute;
    left: 0;
    width: 350px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,.09);
    overflow: hidden;
  }

  .fig-task-card--cups {
    top: 0;
    height: 366px;
  }

  .fig-task-card--dice {
    top: 381px;
    height: 381px;
  }

  .fig-task-card img {
    display: block;
    width: 100%;
    height: 270px;
    object-fit: cover;
    object-position: center top;
  }

  .fig-task-card--dice img {
    height: 248px;
  }

  .fig-task-card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 115px;
    padding: 13px 22px 14px;
    border-radius: 18px 18px 0 0;
    background: #fff;
  }

  .fig-task-card__body p {
    width: 218px;
    margin: 0;
    color: #2b2b2b;
    font-size: 10.8px;
    line-height: 1.15;
    font-weight: 650;
  }

  .fig-task-card__tags {
    position: absolute;
    left: 22px;
    bottom: 14px;
    display: flex;
    gap: 4px;
  }

  .fig-task-card__tags span {
    display: inline-flex;
    align-items: center;
    height: 17px;
    padding: 0 8px;
    border-radius: 999px;
    background: #ff8b1f;
    color: #fff;
    font-size: 9px;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
  }

  .fig-task-card__tags span:nth-child(3) {
    border: 1px solid #c8c8c8;
    background: #fff;
    color: #aaa;
  }

  .fig-task-card__body button {
    position: absolute;
    right: 15px;
    bottom: 18px;
    width: 73px;
    height: 55px;
    border: 0;
    border-radius: 30px;
    background: #ff3426;
    color: #fff;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 22px;
    line-height: 1;
  }

  .fig-task-buy {
    position: absolute;
    left: 20px;
    top: 1010px;
    width: 350px;
    height: 61px;
    border: 0;
    border-radius: 33px;
    background: #ff3426;
    color: #fff;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 27px;
    line-height: 1;
    text-transform: uppercase;
  }

  .fig-task-note {
    position: absolute;
    left: 0;
    top: 1084px;
    width: 100%;
    margin: 0;
    color: #999;
    text-align: center;
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
  }

  .fig-task-footer {
    position: absolute;
    left: 0;
    top: 1130px;
    width: 100%;
    height: 130px;
    border-radius: 35px 35px 0 0;
    background: #111;
    color: #777;
  }

  .fig-task-footer strong {
    position: absolute;
    left: 22px;
    top: 49px;
    width: 149px;
    height: 56px;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    line-height: 0;
    background: url("assets/figma-exact/footer-logo-mobile-exact.png") left top / contain no-repeat;
    transform: none;
  }

  .fig-task-footer p,
  .fig-task-footer a,
  .fig-task-footer small {
    position: absolute;
    left: 212px;
    width: 150px;
    margin: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    line-height: 0;
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
  }

  .fig-task-footer p {
    top: 46px;
    height: 28px;
    background-image: url("assets/figma-exact/footer-legal-mobile-exact.png");
  }

  .fig-task-footer a {
    top: 97px;
    width: 139px;
    height: 11px;
    background-image: url("assets/figma-exact/footer-privacy-mobile-exact.png");
  }

  .fig-task-footer small {
    top: 114px;
    width: 130px;
    height: 9px;
    background-image: url("assets/figma-exact/footer-copy-mobile-exact.png");
  }

  .fig-page--task-list .fig-task-topbar {
    top: 39px;
    height: 43px;
    padding: 0 8px 0 10px;
    border-radius: 24px;
    box-shadow: 0 2px 7px rgba(0,0,0,.10);
  }

  .fig-page--task-list .fig-task-topbar > button:first-child {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .fig-page--task-list .fig-task-topbar > button:first-child::before {
    left: 11px;
    top: 9px;
    width: 9px;
    height: 9px;
    border-left-width: 2px;
    border-bottom-width: 2px;
  }

  .fig-page--task-list .fig-task-topbar h1 {
    margin: 0 8px 0 11px;
    font-size: 14px;
    font-weight: 900;
  }

  .fig-page--task-list .fig-task-topbar > button:last-child {
    width: 83px;
    height: 30px;
    flex-basis: 83px;
    padding: 0 9px 1px 31px;
    font-size: 15px;
    line-height: 30px;
  }

  .fig-page--task-list .fig-task-topbar > button:last-child::before {
    left: 4px;
    top: 3px;
    width: 25px;
    height: 25px;
    background-image: url("assets/figma-exact/balance-coin-mobile.png");
  }

  .fig-page--task-list .fig-task-title {
    top: 100px;
    height: 60px;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
    background: url("assets/figma-exact/task-list-title-mobile-exact.png") center / 100% 100% no-repeat;
    transform: none;
  }

  .fig-page--task-list .fig-task-title span,
  .fig-page--task-list .fig-task-title em {
    color: transparent;
  }

  .fig-page--task-list .fig-task-list {
    top: 176px;
  }

  .fig-page--task-list .fig-task-card {
    border-radius: 18px;
  }

  .fig-page--task-list .fig-task-card--cups {
    height: 374px;
  }

  .fig-page--task-list .fig-task-card--dice {
    top: 389px;
    height: 371px;
  }

  .fig-page--task-list .fig-task-card img {
    width: 347px;
    height: 262px;
    margin-left: 1px;
    object-fit: fill;
  }

  .fig-page--task-list .fig-task-card--dice img {
    height: 248px;
  }

  .fig-page--task-list .fig-task-card__body {
    height: 112px;
    min-height: 112px;
    padding: 12px 14px 13px 15px;
    border-radius: 18px 18px 0 0;
  }

  .fig-page--task-list .fig-task-card--dice .fig-task-card__body {
    height: 123px;
    min-height: 123px;
  }

  .fig-page--task-list .fig-task-card__body p {
    width: 222px;
    font-size: 10.1px;
    line-height: 1.2;
    font-weight: 400;
  }

  .fig-page--task-list .fig-task-card__tags {
    left: 14px;
    bottom: 14px;
  }

  .fig-page--task-list .fig-task-card__tags span {
    height: 17px;
    padding: 0 6px;
    font-size: 8.2px;
    font-weight: 800;
  }

  .fig-page--task-list .fig-task-card__body button {
    right: 18px;
    bottom: 16px;
    width: 74px;
    height: 39px;
    font-family: "Alumni Sans", Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 39px;
    padding: 0;
    text-align: center;
  }

  .fig-page--task-list .fig-task-buy {
    left: 21px;
    top: 952px;
    width: 347px;
    height: 57px;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 24px;
    opacity: 0;
    z-index: 2;
  }

  .fig-page--task-list .fig-task-note {
    top: 1024px;
    font-size: 10.5px;
    opacity: 0;
    z-index: 2;
  }

  .fig-page--task-list .fig-task-footer {
    top: 1061px;
    height: 199px;
    border-radius: 0;
    background: url("assets/figma-exact/task-list-footer-mobile-exact.png") center / 100% 100% no-repeat;
  }

  .fig-page--task-list .fig-task-footer > * {
    opacity: 0;
  }
}

/* Mobile Figma quality recovery: keep high-resolution exports as the visual layer,
   while interactive hotspots remain above them. */
@media (max-width: 899px) {
  .fig-home--vector > .fig-render-frame--mobile,
  .screen--setup .fig-page-render--mobile,
  .screen--mafia .fig-page--mafia > .fig-page-render--mobile,
  .screen--karaoke-battle .fig-page--karaoke-battle > .fig-page-render--zip-game,
  .screen--royal-battle .fig-page--royal-battle > .fig-page-render--zip-game,
  .screen--meloman .fig-page--meloman > .fig-page-render--meloman {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    image-rendering: auto !important;
  }

  .screen--setup .fig-setup-slice,
  .screen--mafia .fig-page--mafia > .fig-mafia-layer,
  .screen--karaoke-battle .fig-page--karaoke-battle > .fig-karaoke-layer,
  .screen--royal-battle .fig-page--royal-battle > .fig-royal-layer,
  .screen--meloman .fig-page--meloman > .fig-meloman-layer {
    display: none !important;
  }
}

@media (max-width: 899px) {
  .screen--birthday-pack {
    padding: 0 !important;
    background: #f3f3f3 !important;
  }

  .screen--birthday-pack.screen--fig-export > :not(.fig-page) {
    display: none !important;
  }

  .fig-page--birthday-pack {
    position: relative;
    width: 100vw;
    max-width: 390px;
    min-height: 1976px;
    margin: 0 auto;
    overflow: hidden;
    background: #f3f3f3;
    color: #202124;
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif;
    letter-spacing: 0;
  }

  .fig-page--birthday-pack *,
  .fig-page--birthday-pack *::before,
  .fig-page--birthday-pack *::after {
    box-sizing: border-box;
    letter-spacing: 0;
  }

  .screen--birthday-pack .fig-bday-topbar {
    left: 20px;
    top: 39px;
    width: 350px;
    height: 43px;
    min-height: 43px;
    padding: 0;
    background: url("assets/figma-exact/birthday-pack-locked-topbar-mobile-exact.png") center / 100% 100% no-repeat;
    box-shadow: none;
  }

  .screen--birthday-pack .fig-bday-topbar > * {
    opacity: 0;
  }

  .screen--birthday-pack .fig-bpack-title {
    left: 0;
    top: 112px;
    width: 390px;
    height: 40px;
    background: url("assets/figma-exact/birthday-pack-locked-title-mobile-exact.png") center / 100% 100% no-repeat;
    color: transparent;
    transform: none;
  }

  .screen--birthday-pack .fig-bpack-title > * {
    opacity: 0;
  }

  .fig-bpack-hero {
    position: absolute;
    left: 20px;
    top: 201px;
    width: 350px;
    height: 343px;
    border-radius: 20px;
    background: #ff861c;
    color: #fff;
    overflow: hidden;
  }

  .screen--birthday-pack .fig-bpack-hero {
    background: url("assets/figma-exact/birthday-pack-hero-mobile-exact.png") center / 100% 100% no-repeat;
  }

  .screen--birthday-pack .fig-bpack-hero > * {
    opacity: 0;
  }

  .fig-bpack-badge {
    position: absolute;
    left: 24px;
    top: 27px;
    height: 30px;
    padding: 0 15px;
    border-radius: 999px;
    background: rgba(133, 92, 38, .5);
    color: #fff;
    font-size: 10px;
    line-height: 30px;
    font-weight: 900;
  }

  .fig-bpack-hero h3 {
    position: absolute;
    left: 24px;
    top: 75px;
    z-index: 2;
    margin: 0;
    color: #fff;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 44px;
    line-height: .88;
    font-weight: 900;
    text-transform: uppercase;
  }

  .fig-bpack-hero ul {
    position: absolute;
    left: 36px;
    top: 194px;
    z-index: 2;
    width: 190px;
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 11.2px;
    line-height: 1.12;
    font-weight: 760;
  }

  .fig-bpack-hero img {
    position: absolute;
    right: 0;
    top: 82px;
    width: 169px;
    height: 253px;
    object-fit: cover;
    object-position: center top;
  }

  .fig-bpack-price {
    position: absolute;
    left: 25px;
    bottom: 21px;
    z-index: 3;
    width: 177px;
    height: 53px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding-left: 19px;
    border-radius: 999px;
    background: #ff3426;
    box-shadow: 0 8px 18px rgba(255, 52, 38, .32);
    color: #fff;
  }

  .fig-bpack-price span {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: url("assets/figma/fig-coin.webp") center / cover no-repeat;
  }

  .fig-bpack-price strong {
    color: #fff;
    font-size: 20px;
    line-height: 1;
    font-weight: 950;
    text-transform: lowercase;
  }

  .fig-bpack-free {
    position: absolute;
    left: 20px;
    top: 557px;
    width: 350px;
    height: 65px;
    border: 0;
    border-radius: 32px;
    background: #ff3426;
    color: #fff;
    text-align: left;
  }

  .fig-bpack-free strong {
    position: absolute;
    left: 20px;
    top: 21px;
    color: #fff;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 25px;
    line-height: 1;
    font-weight: 900;
  }

  .screen--birthday-pack .fig-bpack-free strong {
    top: 20px;
    font-size: 24px;
    transform: scaleX(.76);
    transform-origin: left top;
    white-space: nowrap;
  }

  .fig-bpack-free span {
    position: absolute;
    right: 16px;
    top: 18px;
    width: 60px;
    height: 28px;
    border-radius: 999px;
    background: #b83318;
    color: #fff;
    text-align: center;
    font-size: 10px;
    line-height: 28px;
    font-weight: 900;
  }

  .fig-bpack-props {
    position: absolute;
    left: 20px;
    top: 638px;
    width: 350px;
    height: 170px;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .08);
  }

  .screen--birthday-pack .fig-bpack-props {
    background: url("assets/figma-exact/birthday-pack-props-mobile-exact.png") center / 100% 100% no-repeat;
    box-shadow: none;
  }

  .screen--birthday-pack .fig-bpack-props > * {
    opacity: 0;
  }

  .fig-bpack-props h3 {
    position: absolute;
    left: 15px;
    top: 22px;
    margin: 0;
    color: #191919;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 20px;
    line-height: .9;
    font-weight: 900;
    text-transform: uppercase;
  }

  .fig-bpack-props > button {
    position: absolute;
    right: 17px;
    top: 23px;
    width: 105px;
    height: 31px;
    border: 0;
    border-radius: 999px;
    background: #ffddb9;
    color: #ff861c;
    font-size: 10px;
    font-weight: 850;
  }

  .fig-bpack-props .fig-bday-props__grid {
    left: 15px;
    top: 84px;
  }

  .fig-bpack-types {
    position: absolute;
    left: 0;
    top: 827px;
    width: 390px;
    height: 395px;
    border-radius: 39px;
    background: #111;
    color: #fff;
  }

  .screen--birthday-pack .fig-bpack-types {
    height: 466px;
    background: url("assets/figma-exact/birthday-pack-types-mobile-exact.png") center / 100% 100% no-repeat;
  }

  .screen--birthday-pack .fig-bpack-types > * {
    opacity: 0;
  }

  .fig-bpack-types h3 {
    position: absolute;
    left: 0;
    top: 34px;
    width: 100%;
    margin: 0;
    color: #fff;
    text-align: center;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 27px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
  }

  .fig-bpack-types h3 span {
    color: #ff861c;
  }

  .fig-bpack-type-grid article {
    position: absolute;
    width: 96px;
    height: 132px;
    padding: 56px 8px 9px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 5px;
    background: linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.02) 34%, rgba(255,134,28,.65));
    color: #fff;
    text-align: center;
    overflow: hidden;
  }

  .fig-bpack-type-grid article::before {
    content: "";
    position: absolute;
    inset: -24px;
    background: linear-gradient(132deg, transparent 0 35%, rgba(255,255,255,.22) 44%, transparent 58%);
    transform: rotate(8deg);
  }

  .fig-bpack-type-grid article:nth-child(1) { left: 45px; top: 75px; }
  .fig-bpack-type-grid article:nth-child(2) { left: 153px; top: 75px; }
  .fig-bpack-type-grid article:nth-child(3) { left: 261px; top: 75px; }
  .fig-bpack-type-grid article:nth-child(4) { left: 99px; top: 222px; }
  .fig-bpack-type-grid article:nth-child(5) { left: 207px; top: 222px; }

  .fig-bpack-type-grid i {
    position: absolute;
    left: 32px;
    top: 24px;
    z-index: 1;
    width: 32px;
    height: 32px;
    color: #ff861c;
  }

  .fig-bpack-type-grid i::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 28%, #ffe3a9 0 12%, #ff861c 13% 58%, transparent 59%);
    box-shadow: 0 0 14px rgba(255, 134, 28, .5);
  }

  .fig-bpack-type-grid article:nth-child(2) i::before {
    clip-path: polygon(50% 0, 60% 35%, 100% 35%, 67% 57%, 80% 100%, 50% 72%, 20% 100%, 33% 57%, 0 35%, 40% 35%);
  }

  .fig-bpack-type-grid article:nth-child(3) i::before {
    border-radius: 10px;
    clip-path: polygon(50% 0, 92% 24%, 92% 76%, 50% 100%, 8% 76%, 8% 24%);
  }

  .fig-bpack-type-grid article:nth-child(4) i::before {
    border-radius: 3px;
    transform: rotate(45deg);
  }

  .fig-bpack-type-grid strong {
    position: relative;
    z-index: 1;
    display: block;
    color: #fff;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 17px;
    line-height: .9;
    font-weight: 900;
    text-transform: uppercase;
  }

  .fig-bpack-type-grid p {
    position: relative;
    z-index: 1;
    margin: 5px 0 0;
    color: #fff;
    font-size: 7.5px;
    line-height: 1.05;
    font-weight: 700;
  }

  .fig-bpack-rounds {
    position: absolute;
    left: 63px;
    top: 382px;
    width: 265px;
    height: 70px;
    border-radius: 0 0 14px 14px;
    background: #fff;
    color: #222;
    text-align: center;
  }

  .fig-bpack-rounds strong {
    position: absolute;
    left: 66px;
    top: -19px;
    width: 133px;
    height: 34px;
    border-radius: 999px;
    background: #ff861c;
    color: #fff;
    font-size: 18px;
    line-height: 34px;
    font-weight: 900;
  }

  .fig-bpack-rounds p {
    margin: 33px auto 0;
    width: 218px;
    color: #2a2a2a;
    font-size: 10.5px;
    line-height: 1.12;
    font-weight: 800;
  }

  .fig-bpack-controls {
    top: 1322px;
  }

  .screen--birthday-pack .fig-bpack-controls {
    left: 20px;
    top: 1323px !important;
    width: 350px;
    height: 120px;
    overflow: hidden;
    background: url("assets/figma-exact/birthday-pack-locked-controls-mobile-exact.png") left top / 350px 209px no-repeat;
  }

  .screen--birthday-pack .fig-bpack-controls > * {
    opacity: 0;
  }

  .fig-bpack-controls .fig-bday-control-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fig-bpack-tips {
    top: 1452px;
  }

  .screen--birthday-pack .fig-bpack-tips {
    height: 263px;
    background: url("assets/figma-exact/birthday-pack-tips-mobile-exact.png") center / 100% 100% no-repeat;
  }

  .screen--birthday-pack .fig-bpack-tips > * {
    opacity: 0;
  }

  .fig-bpack-footer {
    top: 1724px;
    height: 252px;
  }

  .screen--birthday-pack .fig-bpack-footer {
    background: url("assets/figma-exact/birthday-pack-footer-mobile-exact.png") center / 100% 100% no-repeat !important;
    box-shadow: none !important;
  }

  .screen--birthday-pack .fig-bpack-footer > * {
    opacity: 0;
  }

  .fig-bpack-footer strong {
    top: 65px;
  }

  .fig-bpack-footer p {
    top: 67px;
  }

  .fig-bpack-footer a {
    top: 132px;
  }

  .fig-bpack-footer small {
    top: 149px;
  }

  .screen--birthday-task {
    padding: 0 !important;
    background: #f3f3f3 !important;
  }

  .screen--birthday-task.screen--fig-export > :not(.fig-page) {
    display: none !important;
  }

  .fig-page--birthday-task {
    position: relative;
    width: 100vw;
    max-width: 390px;
    min-height: 1599px;
    margin: 0 auto;
    overflow: hidden;
    background: #f3f3f3;
    color: #202124;
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif;
    letter-spacing: 0;
  }

  .fig-page--birthday-task *,
  .fig-page--birthday-task *::before,
  .fig-page--birthday-task *::after {
    box-sizing: border-box;
    letter-spacing: 0;
  }

  .fig-bday-topbar {
    left: 22px;
    top: 39px;
    width: 346px;
    height: 43px;
    min-height: 43px;
    padding: 0 8px 0 10px;
    border-radius: 999px;
  }

  .screen--birthday-task .fig-bday-topbar {
    left: 21px;
    width: 348px;
    background: url("assets/figma-exact/birthday-pack-locked-topbar-mobile-exact.png") center / 100% 100% no-repeat;
    box-shadow: none;
  }

  .screen--birthday-task .fig-bday-topbar > * {
    opacity: 0;
  }

  .screen--birthday-task .fig-bday-topbar > button:first-child {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

  .screen--birthday-task .fig-bday-topbar > button:first-child::before {
    left: 9px;
    top: 7px;
    width: 9px;
    height: 9px;
    border-width: 2.5px;
  }

  .fig-page--birthday-task .fig-task-topbar h1 {
    margin-left: 12px;
    font-size: 14px;
    font-weight: 850;
  }

  .screen--birthday-task .fig-bday-topbar > button:last-child {
    width: 78px;
    height: 32px;
    flex: 0 0 78px;
    line-height: 32px;
  }

  .fig-bday-title {
    position: absolute;
    left: 0;
    top: 123px;
    width: 100%;
    margin: 0;
    text-align: center;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 27px;
    line-height: .95;
    text-transform: uppercase;
    transform: scaleX(.78);
    transform-origin: center top;
  }

  .fig-bday-title span {
    color: #151515;
  }

  .fig-bday-title em {
    color: #ff861c;
    font-style: normal;
  }

  .fig-bday-type {
    position: absolute;
    left: 20px;
    top: 199px;
    width: 350px;
    height: 80px;
    border-radius: 18px;
    background: #ffd8b6;
    overflow: hidden;
  }

  .screen--birthday-task .fig-bday-type {
    left: 21px;
    top: 195px;
    width: 347px;
    height: 83px;
    border-radius: 0;
    background: url("assets/figma-exact/birthday-task-type-mobile-exact.png") center / 100% 100% no-repeat;
  }

  .screen--birthday-task .fig-bday-type > * {
    opacity: 0;
  }

  .fig-bday-type__icon {
    position: absolute;
    left: 37px;
    top: 25px;
    width: 35px;
    height: 35px;
    border-radius: 48% 42% 52% 46%;
    background: radial-gradient(circle at 58% 20%, #fff7c8 0 7%, transparent 8%),
      radial-gradient(circle at 52% 34%, #ffcc63 0 19%, #ff8c1b 20% 52%, transparent 54%),
      linear-gradient(140deg, #ff3927 0 58%, #ff8b1a 59% 100%);
    box-shadow: 0 8px 13px rgba(255, 83, 28, .26);
    transform: rotate(-17deg);
  }

  .fig-bday-type__icon::before,
  .fig-bday-type__icon::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: #ff8a17;
  }

  .fig-bday-type__icon::before {
    left: 22px;
    top: -8px;
    width: 9px;
    height: 18px;
    transform: rotate(28deg);
  }

  .fig-bday-type__icon::after {
    left: 15px;
    top: -12px;
    width: 7px;
    height: 15px;
    transform: rotate(-17deg);
  }

  .fig-bday-type__copy {
    position: absolute;
    left: 91px;
    top: 25px;
    width: 180px;
  }

  .fig-bday-type__copy strong {
    display: block;
    color: #171717;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 23px;
    line-height: .9;
    font-weight: 900;
    text-transform: uppercase;
  }

  .fig-bday-type__copy strong span {
    color: #ff861c;
  }

  .fig-bday-type__copy p {
    margin: 5px 0 0;
    color: #242424;
    font-size: 10.5px;
    line-height: 1.1;
    font-weight: 750;
  }

  .fig-bday-score {
    position: absolute;
    right: 0;
    top: 0;
    width: 84px;
    height: 80px;
    border-radius: 18px;
    background: #ff3426;
    color: #fff;
    text-align: center;
  }

  .fig-bday-score strong {
    display: block;
    margin-top: 18px;
    font-size: 26px;
    line-height: .82;
    font-weight: 950;
  }

  .fig-bday-score span {
    display: block;
    margin-top: 8px;
    font-size: 9.5px;
    line-height: 1.1;
    font-weight: 850;
  }

  .fig-bday-media {
    position: absolute;
    left: 20px;
    top: 306px;
    width: 350px;
    height: 285px;
    border-radius: 22px 22px 0 0;
    overflow: hidden;
    background: #d9d9d9;
  }

  .screen--birthday-task .fig-bday-media {
    background: url("assets/figma-exact/birthday-task-media-mobile-exact.png") center / 100% 100% no-repeat;
  }

  .fig-bday-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .screen--birthday-task .fig-bday-media img {
    opacity: 0;
  }

  .fig-bday-media button {
    position: absolute;
    right: 14px;
    bottom: 16px;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 50%;
    background: #3b3b3a;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
  }

  .screen--birthday-task .fig-bday-media button {
    background: transparent;
    box-shadow: none;
  }

  .fig-bday-media button::before,
  .fig-bday-media button::after {
    content: "";
    position: absolute;
    top: 17px;
    width: 6px;
    height: 23px;
    border-radius: 5px;
    background: #fff;
  }

  .fig-bday-media button::before {
    left: 20px;
  }

  .fig-bday-media button::after {
    right: 20px;
  }

  .screen--birthday-task .fig-bday-media button::before,
  .screen--birthday-task .fig-bday-media button::after {
    display: none;
  }

  .fig-bday-media button.is-paused::before {
    left: 21px;
    top: 17px;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 20px solid #fff;
    border-radius: 0;
    background: transparent;
  }

  .fig-bday-media button.is-paused::after {
    display: none;
  }

  .fig-bday-rules,
  .fig-bday-props {
    position: absolute;
    left: 20px;
    width: 350px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .08);
  }

  .fig-bday-rules {
    top: 579px;
    height: 103px;
    border-radius: 18px;
    z-index: 2;
  }

  .screen--birthday-task .fig-bday-rules {
    top: 579px;
    height: 107px;
    border-radius: 0;
    background: url("assets/figma-exact/birthday-task-rules-mobile-exact.png") center / 100% 100% no-repeat;
    box-shadow: none;
  }

  .screen--birthday-task .fig-bday-rules > * {
    opacity: 0;
  }

  .fig-bday-rules h3,
  .fig-bday-props h3 {
    margin: 0;
    color: #191919;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 22px;
    line-height: .9;
    text-transform: uppercase;
  }

  .fig-bday-rules h3 {
    position: absolute;
    left: 24px;
    top: 25px;
  }

  .fig-bday-rules p {
    position: absolute;
    left: 24px;
    top: 55px;
    width: 296px;
    margin: 0;
    color: #2a2a2a;
    font-size: 10.9px;
    line-height: 1.1;
    font-weight: 760;
  }

  .fig-bday-props {
    top: 681px;
    height: 153px;
    border-radius: 18px;
  }

  .screen--birthday-task .fig-bday-props {
    top: 686px;
    height: 151px;
    border-radius: 0;
    background: url("assets/figma-exact/birthday-task-props-mobile-exact.png") center / 100% 100% no-repeat;
    box-shadow: none;
  }

  .screen--birthday-task .fig-bday-props > * {
    opacity: 0;
  }

  .fig-bday-props::before {
    content: "";
    position: absolute;
    left: 20px;
    top: -1px;
    width: 310px;
    border-top: 1px dashed #ff861c;
  }

  .fig-bday-props h3 {
    position: absolute;
    left: 24px;
    top: 25px;
  }

  .fig-bday-props__grid {
    position: absolute;
    left: 22px;
    top: 66px;
    display: flex;
    gap: 10px;
  }

  .fig-bday-props figure {
    width: 67px;
    margin: 0;
    text-align: center;
  }

  .fig-bday-props figure span {
    display: grid;
    place-items: center;
    width: 67px;
    height: 67px;
    border: 1.5px solid #ff861c;
    border-radius: 5px;
    background: #fff;
  }

  .fig-bday-props figure span::before {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff861c;
    transform: translate(30px, -31px);
  }

  .fig-bday-props img {
    max-width: 49px;
    max-height: 49px;
    object-fit: contain;
  }

  .fig-bday-props figcaption {
    margin-top: 5px;
    color: #252525;
    font-size: 5.5px;
    line-height: 1;
    font-weight: 800;
  }

  .fig-bday-actions {
    position: absolute;
    left: 20px;
    top: 850px;
    display: flex;
    gap: 8px;
  }

  .fig-bday-actions button {
    height: 58px;
    border: 0;
    border-radius: 30px;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
  }

  .screen--birthday-task .fig-bday-actions button {
    font-family: "Alumni Sans", "Arial Narrow", Teko, Impact, sans-serif;
    font-size: 23px;
    font-weight: 700;
    line-height: .95;
    word-spacing: 1px;
  }

  .fig-bday-actions button:first-child {
    width: 142px;
    background: #ffd9b8;
    color: #ff861c;
  }

  .fig-bday-actions button:last-child {
    width: 200px;
    background: #ff3426;
    color: #fff;
  }

  .screen--birthday-task .fig-bday-actions button:last-child {
    width: 198px;
  }

  .fig-bday-controls {
    position: absolute;
    left: 20px;
    top: 935px;
    width: 350px;
  }

  .screen--birthday-task .fig-bday-controls {
    top: 933px;
    height: 209px;
    background: url("assets/figma-exact/birthday-pack-locked-controls-mobile-exact.png") center / 100% 100% no-repeat;
  }

  .screen--birthday-task .fig-bday-controls > * {
    opacity: 0;
  }

  .fig-bday-controls h3,
  .fig-bday-tips h3 {
    margin: 0;
    color: #242424;
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif;
    font-size: 24px;
    line-height: 1;
    font-weight: 850;
    text-transform: none !important;
  }

  .fig-bday-control-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 13px;
  }

  .screen--birthday-task .fig-bday-control-grid {
    margin-top: 11px;
  }

  .fig-bday-control-grid button {
    position: relative;
    height: 83px;
    padding: 49px 11px 9px;
    border: 0;
    border-radius: 9px;
    background: #fff;
    text-align: left;
  }

  .screen--birthday-task .fig-bday-control-grid button {
    height: 79px;
  }

  .fig-bday-control-grid strong {
    display: block;
    color: #333;
    font-size: 11.2px;
    line-height: 1.05;
    font-weight: 850;
  }

  .screen--birthday-task .fig-bday-controls h3 {
    font-size: 19px;
    font-weight: 600;
  }

  .screen--birthday-task .fig-bday-control-grid strong {
    font-size: 10.2px;
    font-weight: 700;
  }

  .screen--birthday-task .fig-bday-control-grid span {
    margin-top: 3px;
    font-size: 8.5px;
  }

  .screen--birthday-task .fig-bday-control-grid b {
    left: 17px;
    top: 18px;
    font-size: 35px;
  }

  .fig-bday-control-grid span {
    display: block;
    margin-top: 2px;
    color: #aaa;
    font-size: 9.3px;
    line-height: 1;
    font-weight: 750;
  }

  .fig-bday-control-grid b {
    position: absolute;
    left: 17px;
    top: 20px;
    color: #ff861c;
    font-size: 41px;
    line-height: .55;
    font-weight: 300;
  }

  .fig-bday-icon {
    position: absolute;
    left: 17px;
    top: 15px;
    width: 31px;
    height: 31px;
    color: #ff861c;
  }

  .fig-bday-icon--pack {
    border: 5px solid currentColor;
    border-radius: 3px;
  }

  .fig-bday-icon--pack::after {
    content: "";
    position: absolute;
    right: -10px;
    bottom: -9px;
    width: 23px;
    height: 23px;
    border-right: 4px solid currentColor;
    border-bottom: 4px solid currentColor;
    border-radius: 0 0 4px 0;
  }

  .fig-bday-icon--winner::before,
  .fig-bday-icon--winner::after {
    content: "";
    position: absolute;
    background: currentColor;
  }

  .fig-bday-icon--winner::before {
    left: 1px;
    top: 13px;
    width: 30px;
    height: 4px;
    transform: rotate(-19deg);
  }

  .fig-bday-icon--winner::after {
    left: 10px;
    top: 1px;
    width: 11px;
    height: 31px;
    border-radius: 9px 9px 0 0;
    clip-path: polygon(50% 0, 70% 34%, 100% 42%, 73% 58%, 81% 100%, 50% 74%, 18% 100%, 27% 58%, 0 42%, 30% 34%);
  }

  .fig-bday-icon--play {
    border-radius: 50%;
    background: currentColor;
  }

  .fig-bday-icon--play::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 8px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid #fff;
  }

  .fig-bday-tips {
    position: absolute;
    left: 20px;
    top: 1158px;
    width: 350px;
  }

  .screen--birthday-task .fig-bday-tips {
    height: 267px;
    background: url("assets/figma-exact/birthday-task-tips-mobile-exact.png") center / 100% 100% no-repeat;
  }

  .screen--birthday-task .fig-bday-tips > * {
    opacity: 0;
  }

  .fig-bday-tips article {
    position: relative;
    min-height: 69px;
    margin-top: 13px;
    padding: 20px 20px 18px 64px;
    border-radius: 9px;
    background: #dedede;
  }

  .fig-bday-tips article:nth-of-type(2) {
    min-height: 64px;
    background: #ff861c;
    color: #fff;
  }

  .fig-bday-tips article p {
    margin: 0;
    color: inherit;
    font-size: 12px;
    line-height: 1.12;
    font-weight: 820;
  }

  .fig-bday-tips article:not(.fig-bday-tip-accent) p {
    color: #3d3d3d;
  }

  .fig-bday-tips .fig-bday-icon {
    left: 18px;
    top: 19px;
  }

  .fig-bday-icon--prep {
    width: 30px;
    height: 30px;
    background: currentColor;
    clip-path: polygon(0 16%, 72% 16%, 72% 0, 100% 28%, 100% 100%, 0 100%);
  }

  .fig-bday-icon--prep::after {
    content: "";
    position: absolute;
    left: 11px;
    top: -4px;
    width: 5px;
    height: 36px;
    border-radius: 5px;
    background: #fff;
    transform: rotate(40deg);
  }

  .fig-bday-icon--score::before,
  .fig-bday-icon--score::after {
    content: "";
    position: absolute;
    left: 10px;
    width: 24px;
    height: 4px;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 10px 0 #fff, 0 20px 0 #fff;
  }

  .fig-bday-icon--score::before {
    top: 5px;
  }

  .fig-bday-icon--score::after {
    left: 1px;
    top: 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
  }

  .fig-bday-icon--video {
    width: 31px;
    height: 23px;
    top: 21px !important;
    border-radius: 4px;
    background: currentColor;
  }

  .fig-bday-icon--video::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 6px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #fff;
  }

  .fig-bday-icon--video::after {
    content: "";
    position: absolute;
    left: -1px;
    bottom: -11px;
    width: 32px;
    height: 4px;
    border-radius: 4px;
    background: currentColor;
  }

  .fig-bday-footer {
    top: 1434px;
    height: 165px;
    border-radius: 35px 35px 0 0;
  }

  .screen--birthday-task .fig-bday-footer {
    background: url("assets/figma-exact/birthday-task-footer-mobile-exact.png") center / 100% 100% no-repeat !important;
    box-shadow: none !important;
  }

  .screen--birthday-task .fig-bday-footer > * {
    opacity: 0;
  }

  .fig-bday-footer strong {
    top: 58px;
  }

  .fig-bday-footer p {
    top: 57px;
  }

  .fig-bday-footer a {
    top: 121px;
    width: 168px;
    font-size: 9px;
    white-space: nowrap;
  }

  .fig-bday-footer small {
    top: 138px;
    width: 168px;
    font-size: 9px;
    white-space: nowrap;
  }

  .fig-page--birthday-pack .fig-bpack-props .fig-bday-props__grid {
    left: 15px;
    top: 84px;
  }

  .fig-page--birthday-pack .fig-bpack-props figure {
    width: 67px;
    margin: 0;
    text-align: center;
  }

  .fig-page--birthday-pack .fig-bpack-props figure span {
    position: relative;
    display: grid;
    place-items: center;
    width: 67px;
    height: 67px;
    border: 1.5px solid #ff861c;
    border-radius: 5px;
    background: #fff;
  }

  .fig-page--birthday-pack .fig-bpack-props figure span::before {
    content: "";
    position: absolute;
    right: -5px;
    top: -5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff861c;
  }

  .fig-page--birthday-pack .fig-bpack-props img {
    max-width: 49px;
    max-height: 49px;
    object-fit: contain;
  }

  .fig-page--birthday-pack .fig-bpack-props figcaption {
    margin-top: 5px;
    color: #252525;
    font-size: 5.5px;
    line-height: 1;
    font-weight: 800;
  }

  .fig-page--birthday-pack .fig-bpack-controls {
    top: 1322px;
  }

  .fig-page--birthday-pack .fig-bpack-tips {
    top: 1452px;
  }

  .fig-page--birthday-pack .fig-bpack-footer {
    top: 1724px;
    height: 252px;
  }

  .fig-page--birthday-pack .fig-bpack-footer strong {
    top: 65px;
  }

  .fig-page--birthday-pack .fig-bpack-footer p {
    top: 67px;
  }

  .fig-page--birthday-pack .fig-bpack-footer a {
    top: 132px;
  }

  .fig-page--birthday-pack .fig-bpack-footer small {
    top: 149px;
  }

  .screen--birthday-pack-locked {
    padding: 0 !important;
    background: #f3f3f3 !important;
  }

  .screen--birthday-pack-locked.screen--fig-export > :not(.fig-page) {
    display: none !important;
  }

  .fig-page--birthday-pack-locked {
    position: relative;
    width: 100vw;
    max-width: 390px;
    min-height: 1223px;
    margin: 0 auto;
    overflow: hidden;
    background: #f3f3f3;
    color: #202124;
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif;
    letter-spacing: 0;
  }

  .fig-page--birthday-pack-locked *,
  .fig-page--birthday-pack-locked *::before,
  .fig-page--birthday-pack-locked *::after {
    box-sizing: border-box;
    letter-spacing: 0;
  }

  .fig-page--birthday-pack-locked .fig-task-topbar h1 {
    margin-left: 13px;
    font-size: 16px;
    font-weight: 850;
  }

  .fig-page--birthday-pack-locked .fig-task-topbar {
    top: 39px;
    width: 350px;
    height: 43px;
    padding: 0;
    border-radius: 0;
    background: url("assets/figma-exact/birthday-pack-locked-topbar-mobile-exact.png") center / 100% 100% no-repeat;
    box-shadow: none;
  }

  .fig-page--birthday-pack-locked .fig-task-topbar > * {
    opacity: 0;
  }

  .fig-page--birthday-pack-locked .fig-bplock-title {
    top: 112px;
    height: 40px;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    line-height: 0;
    background: url("assets/figma-exact/birthday-pack-locked-title-mobile-exact.png") center / 100% 100% no-repeat;
  }

  .fig-page--birthday-pack-locked .fig-bplock-title span,
  .fig-page--birthday-pack-locked .fig-bplock-title em {
    color: transparent;
  }

  .fig-bplock-hero {
    position: absolute;
    left: 20px;
    top: 201px;
    width: 350px;
    height: 250px;
    border-radius: 28px;
    overflow: hidden;
    background: #cfa579;
  }

  .screen--birthday-pack-locked .fig-bplock-hero {
    background: url("assets/figma-exact/birthday-pack-locked-hero-mobile-exact.png") center / 100% 100% no-repeat;
  }

  .screen--birthday-pack-locked .fig-bplock-hero > * {
    opacity: 0;
  }

  .screen--birthday-pack-locked .fig-bplock-hero::after {
    display: none;
  }

  .fig-bplock-hero img {
    position: absolute;
    inset: -18px;
    width: calc(100% + 36px);
    height: calc(100% + 36px);
    object-fit: cover;
    object-position: 49% 40%;
    filter: blur(5px);
    transform: scale(1.03);
  }

  .fig-bplock-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(224, 178, 134, .13), rgba(67, 43, 22, .58));
  }

  .fig-bplock-price {
    position: absolute;
    left: 19px;
    top: 170px;
    z-index: 2;
    width: 173px;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding-left: 19px;
    border-radius: 999px;
    background: #ff3426;
    box-shadow: 0 9px 18px rgba(255, 52, 38, .34);
    color: #fff;
  }

  .fig-bplock-price i {
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: url("assets/figma-exact/balance-coin-mobile.png") center / cover no-repeat;
  }

  .fig-bplock-price strong {
    color: #fff;
    font-size: 20px;
    line-height: 1;
    font-weight: 950;
    text-transform: lowercase;
  }

  .fig-bplock-hero p {
    position: absolute;
    left: 207px;
    top: 180px;
    z-index: 2;
    width: 120px;
    margin: 0;
    color: #fff;
    font-size: 12px;
    line-height: 1.04;
    font-weight: 850;
  }

  .fig-bplock-actions {
    position: absolute;
    left: 20px;
    top: 466px;
    width: 350px;
    height: 56px;
    display: flex;
    gap: 8px;
    background: url("assets/figma-exact/birthday-pack-locked-actions-mobile-exact.png") center / 100% 100% no-repeat;
  }

  .fig-bplock-actions button {
    height: 58px;
    border: 0;
    border-radius: 30px;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 20px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    opacity: 0;
  }

  .fig-bplock-actions button:first-child {
    width: 149px;
    background: #ffd9b8;
    color: #ff861c;
  }

  .fig-bplock-actions button:last-child {
    width: 193px;
    background: #ff3426;
    color: #fff;
  }

  .fig-page--birthday-pack-locked .fig-bplock-controls {
    top: 556px;
    height: 209px;
    background: url("assets/figma-exact/birthday-pack-locked-controls-mobile-exact.png") center / 100% 100% no-repeat;
  }

  .fig-page--birthday-pack-locked .fig-bplock-controls > * {
    opacity: 0;
  }

  .fig-page--birthday-pack-locked .fig-bplock-controls h3 {
    font-size: 20px;
  }

  .fig-page--birthday-pack-locked .fig-bday-control-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fig-page--birthday-pack-locked .fig-bday-control-grid strong {
    font-size: 10.4px;
  }

  .fig-page--birthday-pack-locked .fig-bday-control-grid span {
    font-size: 9.3px;
  }

  .fig-page--birthday-pack-locked .fig-bplock-tips {
    top: 779px;
  }

  .screen--birthday-pack-locked .fig-bplock-tips {
    height: 264px;
    background: url("assets/figma-exact/birthday-pack-locked-tips-mobile-exact.png") center / 100% 100% no-repeat;
  }

  .screen--birthday-pack-locked .fig-bplock-tips > * {
    opacity: 0;
  }

  .fig-page--birthday-pack-locked .fig-bplock-footer {
    top: 1053px;
    height: 170px;
    border-radius: 35px 35px 0 0;
  }

  .screen--birthday-pack-locked .fig-bplock-footer {
    background: url("assets/figma-exact/birthday-pack-locked-footer-mobile-exact.png") center / 100% 100% no-repeat !important;
    box-shadow: none !important;
  }

  .screen--birthday-pack-locked .fig-bplock-footer > * {
    opacity: 0;
  }

  .fig-page--birthday-pack-locked .fig-bplock-footer strong {
    top: 58px;
  }

  .fig-page--birthday-pack-locked .fig-bplock-footer p {
    top: 57px;
  }

  .fig-page--birthday-pack-locked .fig-bplock-footer a {
    top: 121px;
    width: 168px;
    font-size: 9px;
    white-space: nowrap;
  }

  .fig-page--birthday-pack-locked .fig-bplock-footer small {
    top: 138px;
    width: 168px;
    font-size: 9px;
    white-space: nowrap;
  }

  .fig-page--birthday-pack-locked .fig-task-topbar > button:last-child::before {
    background-image: url("assets/figma-exact/balance-coin-mobile.png");
  }

  .screen--props-purchase {
    padding: 0 !important;
    background: #f3f3f3 !important;
  }

  .screen--props-purchase.screen--fig-export > :not(.fig-page) {
    display: none !important;
  }

  .fig-page--props-purchase {
    position: relative;
    width: 100vw;
    max-width: 390px;
    min-height: 1599px;
    margin: 0 auto;
    overflow: hidden;
    background: #f3f3f3;
    color: #202124;
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif;
    letter-spacing: 0;
  }

  .fig-page--props-purchase *,
  .fig-page--props-purchase *::before,
  .fig-page--props-purchase *::after {
    box-sizing: border-box;
    letter-spacing: 0;
  }

  .fig-page--props-purchase .fig-props-topbar {
    z-index: 4;
    background: transparent;
    box-shadow: none;
  }

  .fig-page--props-purchase .fig-props-topbar > * {
    opacity: 0;
  }

  .fig-page--props-purchase .fig-props-topbar h1 {
    margin-left: 13px;
    font-size: 16px;
    font-weight: 850;
  }

  .fig-page--props-purchase .fig-props-topbar > button:last-child::before {
    background-image: url("assets/figma-exact/balance-coin-mobile.png");
  }

  .fig-props-underlay {
    position: absolute;
    inset: 0;
    background: url("assets/figma-exact/props-purchase-backdrop-outside-modal-exact.png") center top / 100% 100% no-repeat;
    filter: none;
    opacity: 1;
    transform: none;
    transform-origin: 50% 0;
    pointer-events: none;
  }

  .fig-props-underlay > * {
    display: none;
  }

  .fig-props-underlay h2 {
    position: absolute;
    left: 0;
    top: 9px;
    width: 100%;
    margin: 0;
    text-align: center;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 27px;
    line-height: .95;
    text-transform: uppercase;
  }

  .fig-props-underlay h2 span {
    color: #151515;
  }

  .fig-props-underlay h2 em {
    color: #ff861c;
    font-style: normal;
  }

  .fig-props-underlay__hero {
    position: absolute;
    left: 20px;
    top: 89px;
    width: 350px;
    height: 250px;
    border-radius: 28px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(65, 38, 15, .48)),
      url("assets/figma-exact/task-birthday-dice-mobile-exact.png") 50% 38% / cover no-repeat;
  }

  .fig-props-underlay__actions {
    position: absolute;
    left: 20px;
    top: 356px;
    width: 350px;
    height: 58px;
  }

  .fig-props-underlay__actions i,
  .fig-props-underlay__actions b {
    position: absolute;
    top: 0;
    height: 58px;
    border-radius: 30px;
  }

  .fig-props-underlay__actions i {
    left: 0;
    width: 149px;
    background: #ffd9b8;
  }

  .fig-props-underlay__actions b {
    right: 0;
    width: 193px;
    background: #ff3426;
  }

  .fig-props-underlay__controls {
    position: absolute;
    left: 20px;
    top: 446px;
    width: 350px;
    height: 174px;
    background:
      linear-gradient(#fff, #fff) left top / 171px 83px no-repeat,
      linear-gradient(#fff, #fff) right top / 171px 83px no-repeat,
      linear-gradient(#fff, #fff) left bottom / 171px 83px no-repeat,
      linear-gradient(#fff, #fff) right bottom / 171px 83px no-repeat;
    border-radius: 10px;
  }

  .fig-props-underlay__tips {
    position: absolute;
    left: 20px;
    top: 665px;
    width: 350px;
    height: 241px;
    background:
      linear-gradient(#dedede, #dedede) 0 0 / 350px 69px no-repeat,
      linear-gradient(#ff861c, #ff861c) 0 86px / 350px 64px no-repeat,
      linear-gradient(#dedede, #dedede) 0 168px / 350px 73px no-repeat;
    border-radius: 10px;
  }

  .fig-props-underlay__footer {
    position: absolute;
    left: 0;
    top: 1320px;
    width: 390px;
    height: 279px;
    border-radius: 35px 35px 0 0;
    background: #111;
    color: #777;
  }

  .fig-props-underlay__footer strong {
    position: absolute;
    left: 29px;
    top: 78px;
    color: #ff3426;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 30px;
    line-height: .9;
    font-weight: 900;
    transform: skew(-8deg);
  }

  .fig-props-underlay__footer p {
    position: absolute;
    left: 224px;
    top: 73px;
    margin: 0;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 700;
  }

  .fig-props-modal {
    position: absolute;
    left: 20px;
    top: 96px;
    z-index: 5;
    width: 350px;
    height: 461px;
    border-radius: 12px;
    background: #fff;
    color: #202124;
    box-shadow: none;
  }

  .fig-props-modal > h2 {
    position: absolute;
    left: 21px;
    top: 40px;
    width: 420px;
    margin: 0;
    color: #171717;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 23px;
    line-height: .98;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
    transform: scaleX(.7);
    transform-origin: left top;
  }

  .fig-props-close {
    position: absolute;
    right: 20px;
    top: 43px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: #e1e1e1;
  }

  .fig-props-close::before,
  .fig-props-close::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 13px;
    width: 13px;
    height: 2.5px;
    border-radius: 3px;
    background: #9b9b9b;
  }

  .fig-props-close::before {
    transform: rotate(45deg);
  }

  .fig-props-close::after {
    transform: rotate(-45deg);
  }

  .fig-props-item {
    position: absolute;
    left: 18px;
    top: 96px;
    width: 314px;
    height: 69px;
    border: 1.5px solid #b7b7b7;
    border-radius: 18px;
    background: #fff;
  }

  .fig-props-item--ball {
    top: 171px;
  }

  .fig-props-item > span {
    position: absolute;
    left: 9px;
    top: 9px;
    width: 49px;
    height: 49px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #ffd8b5;
  }

  .fig-props-item > span img {
    max-width: 37px;
    max-height: 37px;
    object-fit: contain;
  }

  .fig-props-item--ball > span img {
    max-width: 40px;
    max-height: 40px;
  }

  .fig-props-item div {
    position: absolute;
    left: 77px;
    top: 21px;
    width: 155px;
  }

  .fig-props-item h3 {
    margin: 0;
    color: #424242;
    font-size: 10.5px;
    line-height: 1;
    font-weight: 850;
  }

  .fig-props-item p,
  .fig-props-basket small {
    margin: 6px 0 0;
    color: #ff861c;
    font-size: 7.2px;
    line-height: 1;
    font-weight: 800;
  }

  .fig-props-item p::before,
  .fig-props-basket small::before {
    content: "!";
    display: inline-grid;
    place-items: center;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 6px;
    line-height: 1;
  }

  .fig-props-item > button {
    position: absolute;
    right: 10px;
    top: 17px;
    width: 62px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: #ff861c;
    color: #fff;
    font-size: 11px;
    line-height: 38px;
    font-weight: 700;
  }

  .fig-props-basket {
    position: absolute;
    left: 18px;
    top: 244px;
    width: 314px;
    height: 140px;
    border: 1.5px solid #ff861c;
    border-radius: 17px;
    background: #fff;
  }

  .fig-props-basket i {
    position: absolute;
    left: 12px;
    top: 16px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: #d40eb9;
    color: #fff;
    font-size: 16px;
    font-style: normal;
    line-height: 1;
    font-weight: 950;
  }

  .fig-props-basket h3 {
    position: absolute;
    left: 56px;
    top: 17px;
    margin: 0;
    color: #303030;
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
  }

  .fig-props-basket p {
    position: absolute;
    left: 56px;
    top: 32px;
    margin: 0;
    color: #5d5d5d;
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
  }

  .fig-props-basket div {
    position: absolute;
    left: 12px;
    top: 62px;
    display: flex;
    gap: 5px;
  }

  .fig-props-basket div span {
    height: 23px;
    padding: 0 12px;
    border: 1.5px solid #a8a8a8;
    border-radius: 999px;
    color: #777;
    font-size: 10px;
    line-height: 20px;
    font-weight: 800;
  }

  .fig-props-basket small {
    position: absolute;
    left: 12px;
    top: 91px;
    margin: 0;
  }

  .fig-props-basket button {
    position: absolute;
    left: 12px;
    bottom: 10px;
    width: 284px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: #ff861c;
    color: #fff;
    font-size: 12px;
    line-height: 38px;
    font-weight: 900;
  }

  .screen--winner-select {
    padding: 0 !important;
    background: #ff861c !important;
  }

  .screen--winner-select.screen--fig-export > :not(.fig-page) {
    display: none !important;
  }

  .fig-page--winner-select {
    position: relative;
    width: 100vw;
    max-width: 390px;
    min-height: 1079px;
    margin: 0 auto;
    overflow: hidden;
    background: #ff861c;
    color: #fff;
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif;
    letter-spacing: 0;
  }

  .fig-page--winner-select *,
  .fig-page--winner-select *::before,
  .fig-page--winner-select *::after {
    box-sizing: border-box;
    letter-spacing: 0;
  }

  .fig-wselect-rays {
    position: absolute;
    inset: 0;
    background: url("assets/figma-exact/winner-select-decor-backdrop-mobile-exact.png") center top / 100% 100% no-repeat;
  }

  .fig-wselect-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .screen--winner-select .fig-wselect-confetti,
  .screen--winner-select .fig-wselect-bingo {
    display: none;
  }

  .fig-wselect-confetti i {
    position: absolute;
    width: 8px;
    height: 19px;
    border-radius: 2px;
    background: #ff4d73;
    transform: rotate(15deg);
  }

  .fig-wselect-confetti i:nth-child(3n) { background: #ffcf21; }
  .fig-wselect-confetti i:nth-child(4n) { background: #8d55f5; height: 44px; border-radius: 999px; }
  .fig-wselect-confetti i:nth-child(5n) { background: #13b7cf; height: 13px; }
  .fig-wselect-confetti i:nth-child(1) { left: 9px; top: 12px; transform: rotate(76deg); }
  .fig-wselect-confetti i:nth-child(2) { left: 59px; top: 7px; transform: rotate(18deg); }
  .fig-wselect-confetti i:nth-child(3) { left: 182px; top: -1px; transform: rotate(48deg); }
  .fig-wselect-confetti i:nth-child(4) { left: 276px; top: 0; transform: rotate(-41deg); }
  .fig-wselect-confetti i:nth-child(5) { left: 328px; top: 4px; transform: rotate(-62deg); }
  .fig-wselect-confetti i:nth-child(6) { left: 376px; top: 20px; transform: rotate(58deg); }
  .fig-wselect-confetti i:nth-child(7) { left: 12px; top: 116px; transform: rotate(-31deg); }
  .fig-wselect-confetti i:nth-child(8) { left: 126px; top: 105px; transform: rotate(8deg); }
  .fig-wselect-confetti i:nth-child(9) { left: 204px; top: 98px; transform: rotate(-57deg); }
  .fig-wselect-confetti i:nth-child(10) { left: 319px; top: 101px; transform: rotate(22deg); }
  .fig-wselect-confetti i:nth-child(11) { left: 65px; top: 235px; transform: rotate(-10deg); }
  .fig-wselect-confetti i:nth-child(12) { left: 147px; top: 254px; transform: rotate(84deg); }
  .fig-wselect-confetti i:nth-child(13) { left: 216px; top: 226px; transform: rotate(-72deg); }
  .fig-wselect-confetti i:nth-child(14) { left: 337px; top: 238px; transform: rotate(12deg); }
  .fig-wselect-confetti i:nth-child(15) { left: 24px; top: 395px; transform: rotate(-28deg); }
  .fig-wselect-confetti i:nth-child(16) { left: 172px; top: 382px; transform: rotate(41deg); }
  .fig-wselect-confetti i:nth-child(17) { left: 267px; top: 438px; transform: rotate(-18deg); }
  .fig-wselect-confetti i:nth-child(18) { left: 357px; top: 365px; transform: rotate(23deg); }
  .fig-wselect-confetti i:nth-child(n+19) { opacity: .75; top: 560px; }
  .fig-wselect-confetti i:nth-child(19) { left: 86px; }
  .fig-wselect-confetti i:nth-child(20) { left: 164px; top: 620px; }
  .fig-wselect-confetti i:nth-child(21) { left: 249px; top: 590px; }
  .fig-wselect-confetti i:nth-child(22) { left: 329px; top: 650px; }
  .fig-wselect-confetti i:nth-child(23) { left: 38px; top: 720px; }
  .fig-wselect-confetti i:nth-child(24) { left: 302px; top: 770px; }

  .fig-wselect-topbar {
    top: 38px;
    z-index: 2;
  }

  .fig-page--winner-select .fig-wselect-topbar h1 {
    margin-left: 15px;
    color: #202124;
    font-size: 20px;
    font-weight: 850;
  }

  .fig-page--winner-select .fig-wselect-topbar > button:last-child::before {
    background-image: url("assets/figma-exact/balance-coin-mobile.png");
  }

  .fig-wselect-bingo {
    position: absolute;
    left: -5px;
    top: 220px;
    width: 420px;
    height: 250px;
    color: rgba(255, 255, 255, .9);
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 128px;
    line-height: .76;
    font-weight: 900;
    text-transform: uppercase;
  }

  .fig-wselect-bingo span,
  .fig-wselect-bingo strong,
  .fig-wselect-bingo em {
    position: absolute;
    display: block;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
    transform: scaleX(.82);
    transform-origin: left top;
  }

  .fig-wselect-bingo span {
    left: 58px;
    top: -3px;
    opacity: .78;
  }

  .fig-wselect-bingo strong {
    left: 21px;
    top: 83px;
    opacity: .96;
  }

  .fig-wselect-bingo em {
    left: 57px;
    top: 171px;
    opacity: .48;
  }

  .fig-wselect-footer {
    top: 913px;
    height: 166px;
    border-radius: 35px 35px 0 0;
  }

  .screen--winner-select .fig-wselect-footer {
    background: url("assets/figma-exact/winner-select-footer-mobile-exact.png") center / 100% 100% no-repeat !important;
    box-shadow: none !important;
  }

  .screen--winner-select .fig-wselect-footer > * {
    opacity: 0;
  }

  .fig-page--winner-select .fig-wselect-footer strong {
    top: 58px;
  }

  .fig-page--winner-select .fig-wselect-footer p {
    top: 57px;
  }

  .fig-page--winner-select .fig-wselect-footer a {
    top: 121px;
    width: 168px;
    font-size: 9px;
    white-space: nowrap;
  }

  .fig-page--winner-select .fig-wselect-footer small {
    top: 138px;
    width: 168px;
    font-size: 9px;
    white-space: nowrap;
  }

  .fig-kcat-hero-hit {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: transparent;
  }

  .screen--karaoke-popup {
    padding: 0 !important;
    background: #f3f3f3 !important;
  }

  .screen--karaoke-popup.screen--fig-export > :not(.fig-page) {
    display: none !important;
  }

  .fig-page--karaoke-popup {
    position: relative;
    width: 100vw;
    max-width: 390px;
    min-height: 968px;
    margin: 0 auto;
    overflow: hidden;
    background: #f3f3f3;
    color: #202124;
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif;
    letter-spacing: 0;
  }

  .fig-page--karaoke-popup *,
  .fig-page--karaoke-popup *::before,
  .fig-page--karaoke-popup *::after {
    box-sizing: border-box;
    letter-spacing: 0;
  }

  .fig-kpopup-underlay {
    position: absolute;
    inset: -12px 0 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .66) 64%, rgba(255, 255, 255, .08)),
      url("assets/figma-exact/karaoke-splash-90s-hero-mobile-exact.png") center top / 390px auto no-repeat;
    filter: blur(12px) saturate(1.18);
    opacity: .82;
    transform: scale(1.05);
    transform-origin: 50% 0;
  }

  [data-screen="karaoke-info-popup"] .fig-kpopup-underlay {
    inset: 0;
    background: url("assets/figma-exact/karaoke-info-popup-backdrop-outside-modal-exact.png") center top / 100% 100% no-repeat;
    filter: none;
    opacity: 1;
    transform: none;
  }

  [data-screen="karaoke-song-list-popup"] .fig-kpopup-underlay {
    inset: 0;
    background: url("assets/figma-exact/karaoke-song-list-popup-backdrop-outside-modal-exact.png") center top / 100% 100% no-repeat;
    filter: none;
    opacity: 1;
    transform: none;
  }

  [data-screen="karaoke-song-list-popup"] .fig-kpopup-topbar,
  [data-screen="karaoke-info-popup"] .fig-kpopup-topbar,
  [data-screen="karaoke-info-popup"] .fig-kpopup-footer,
  [data-screen="karaoke-song-list-popup"] .fig-kpopup-footer {
    background: transparent !important;
    box-shadow: none !important;
  }

  [data-screen="karaoke-song-list-popup"] .fig-kpopup-topbar > *,
  [data-screen="karaoke-info-popup"] .fig-kpopup-topbar > *,
  [data-screen="karaoke-info-popup"] .fig-kpopup-footer > *,
  [data-screen="karaoke-song-list-popup"] .fig-kpopup-footer > * {
    opacity: 0;
  }

  .fig-kpopup-topbar {
    top: 38px;
    z-index: 3;
  }

  .fig-page--karaoke-popup .fig-kpopup-topbar h1 {
    margin-left: 13px;
    color: #202124;
    font-size: 17px;
    font-weight: 850;
  }

  .fig-page--karaoke-popup .fig-kpopup-topbar > button:last-child {
    width: 64px;
    flex-basis: 64px;
    padding-right: 9px;
    padding-left: 31px;
  }

  .fig-page--karaoke-popup .fig-kpopup-topbar > button:last-child::before {
    background-image: url("assets/figma-exact/balance-coin-mobile.png");
  }

  .fig-kpopup-card {
    position: absolute;
    left: 21px;
    top: 113px;
    z-index: 2;
    width: 348px;
    height: 459px;
    border-radius: 12px;
    background: #fff;
    color: #202124;
    box-shadow: 0 13px 25px rgba(0, 0, 0, .22);
  }

  [data-screen="karaoke-song-list-popup"] .fig-kpopup-card {
    left: 21px;
    top: 113px;
    width: 347px;
    height: 458px;
    border-radius: 15px;
    box-shadow: none;
  }

  .fig-kpopup-pill {
    position: absolute;
    left: 25px;
    top: 22px;
    min-width: 86px;
    height: 30px;
    padding: 0 11px;
    border: 0;
    border-radius: 999px;
    background: #ff861c;
    color: #fff;
    font-size: 12px;
    line-height: 30px;
    font-weight: 850;
  }

  [data-screen="karaoke-info-popup"] .fig-kpopup-pill {
    width: 86px;
    min-width: 0;
    padding: 0;
    font-size: 11px;
  }

  .fig-kpopup-close {
    position: absolute;
    right: 18px;
    top: 46px;
    width: 31px;
    height: 31px;
    border: 0;
    border-radius: 50%;
    background: #e3e3e3;
  }

  [data-screen="karaoke-info-popup"] .fig-kpopup-close {
    top: 22px;
    right: 18px;
    width: 24px;
    height: 24px;
  }

  .fig-kpopup-close::before,
  .fig-kpopup-close::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 14px;
    width: 15px;
    height: 2.5px;
    border-radius: 3px;
    background: #8e8e8e;
  }

  [data-screen="karaoke-info-popup"] .fig-kpopup-close::before,
  [data-screen="karaoke-info-popup"] .fig-kpopup-close::after {
    left: 6px;
    top: 11px;
    width: 12px;
    height: 2px;
  }

  .fig-kpopup-close::before {
    transform: rotate(45deg);
  }

  .fig-kpopup-close::after {
    transform: rotate(-45deg);
  }

  [data-screen="karaoke-song-list-popup"] .fig-kpopup-pill {
    left: 26px;
    top: 22px;
    width: 99px;
    height: 30px;
    min-width: 0;
    padding: 0;
    background: url("assets/figma-exact/karaoke-song-list-popup-pill-mobile-exact.png") center / 100% 100% no-repeat;
    color: transparent;
    font-size: 0;
    line-height: 0;
  }

  [data-screen="karaoke-song-list-popup"] .fig-kpopup-close {
    top: 22px;
    right: 17px;
    width: 24px;
    height: 24px;
    background: url("assets/figma-exact/karaoke-song-list-popup-close-mobile-exact.png") center / 100% 100% no-repeat;
  }

  [data-screen="karaoke-song-list-popup"] .fig-kpopup-close::before,
  [data-screen="karaoke-song-list-popup"] .fig-kpopup-close::after {
    display: none;
  }

  .fig-kpopup-card--info p {
    position: absolute;
    left: 51px;
    top: 70px;
    width: 232px;
    margin: 0;
    color: #202124;
    font-size: 12px;
    line-height: 1.08;
    font-weight: 500;
  }

  .fig-kpopup-card--info p::before {
    content: "•";
    position: absolute;
    left: -18px;
    top: 0;
  }

  .fig-kpopup-card--info p::before {
    content: "\2022";
  }

  .fig-kpopup-song-columns {
    position: absolute;
    left: 27px;
    top: 71px;
    width: 300px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 29px;
  }

  [data-screen="karaoke-song-list-popup"] .fig-kpopup-song-columns {
    left: 24.5px;
    top: 75px;
    column-gap: 18px;
  }

  .fig-kpopup-song-columns ul {
    margin: 0;
    padding-left: 13px;
    color: #202124;
    font-size: 8.35px;
    line-height: 1;
    font-weight: 500;
  }

  .fig-kpopup-song-columns li {
    margin: 0 0 2px;
  }

  [data-screen="karaoke-song-list-popup"] .fig-kpopup-song-columns ul {
    color: #606060;
    font-size: 7.9px;
    line-height: 1.12;
    font-weight: 400;
  }

  [data-screen="karaoke-song-list-popup"] .fig-kpopup-song-columns li {
    margin-bottom: .25px;
  }

  [data-screen="karaoke-song-list-popup"] .fig-kpopup-song-columns ul:first-child {
    position: relative;
    top: .5px;
  }

  .fig-kpopup-more {
    position: absolute;
    left: 47px;
    top: 402px;
    width: 245px;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 35px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
    transform: scaleX(.8);
    transform-origin: left top;
  }

  [data-screen="karaoke-song-list-popup"] .fig-kpopup-more {
    left: 26px;
    top: 410px;
    width: 157px;
    height: 31px;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    line-height: 0;
    background: url("assets/figma-exact/karaoke-song-list-popup-more-ref-mobile-exact.png") center / 100% 100% no-repeat;
    transform: none;
  }

  .fig-kpopup-more span {
    color: #1b1b1b;
  }

  .fig-kpopup-more em,
  .fig-kpopup-more strong {
    color: #ff861c;
    font-style: normal;
  }

  [data-screen="karaoke-song-list-popup"] .fig-kpopup-more span,
  [data-screen="karaoke-song-list-popup"] .fig-kpopup-more em,
  [data-screen="karaoke-song-list-popup"] .fig-kpopup-more strong {
    color: transparent;
  }

  .fig-kpopup-footer {
    top: 796px;
    height: 172px;
    border-radius: 35px 35px 0 0;
  }

  .fig-page--karaoke-popup .fig-kpopup-footer strong {
    top: 58px;
  }

  .fig-page--karaoke-popup .fig-kpopup-footer p {
    top: 57px;
  }

  .fig-page--karaoke-popup .fig-kpopup-footer a {
    top: 121px;
    width: 168px;
    font-size: 9px;
    white-space: nowrap;
  }

  .fig-page--karaoke-popup .fig-kpopup-footer small {
    top: 138px;
    width: 168px;
    font-size: 9px;
    white-space: nowrap;
  }

  .screen--new-category-confirm {
    padding: 0 !important;
    background: #f3f3f3 !important;
  }

  .screen--new-category-confirm.screen--fig-export > :not(.fig-page) {
    display: none !important;
  }

  .fig-page--new-category-confirm {
    position: relative;
    width: 100vw;
    max-width: 390px;
    min-height: 1079px;
    margin: 0 auto;
    overflow: hidden;
    background: #f3f3f3;
    color: #171717;
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif;
    letter-spacing: 0;
  }

  .fig-page--new-category-confirm *,
  .fig-page--new-category-confirm *::before,
  .fig-page--new-category-confirm *::after {
    box-sizing: border-box;
    letter-spacing: 0;
  }

  .fig-newcat-underlay {
    position: absolute;
    inset: 0;
    background: url("assets/figma-exact/new-category-confirm-backdrop-outside-modal-exact.png") center top / 390px auto no-repeat;
    filter: none;
    opacity: 1;
    transform: none;
    transform-origin: 50% 0;
  }

  .fig-newcat-modal {
    position: absolute;
    left: 22px;
    top: 374px;
    z-index: 2;
    width: 346px;
    height: 283px;
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
  }

  .fig-newcat-close {
    position: absolute;
    right: 16px;
    top: 23px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: #e9e9e9;
  }

  .fig-newcat-close::before,
  .fig-newcat-close::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 15px;
    width: 16px;
    height: 2.5px;
    border-radius: 3px;
    background: #8f8f8f;
  }

  .fig-newcat-close::before {
    transform: rotate(45deg);
  }

  .fig-newcat-close::after {
    transform: rotate(-45deg);
  }

  .fig-newcat-modal h2 {
    position: absolute;
    left: 32px;
    top: 42px;
    width: 283px;
    margin: 0;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 27px;
    line-height: 1;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    color: #111;
    transform: scaleX(.80);
    transform-origin: center top;
  }

  .fig-newcat-modal h2 span,
  .fig-newcat-modal h2 strong {
    display: block;
    font: inherit;
  }

  .fig-newcat-modal h2 strong {
    color: #ff861c;
  }

  .fig-newcat-modal p {
    position: absolute;
    left: 60px;
    top: 124px;
    width: 227px;
    margin: 0;
    color: #202124;
    font-size: 13px;
    line-height: 1.1;
    font-weight: 400;
    text-align: center;
  }

  .fig-newcat-primary,
  .fig-newcat-secondary {
    position: absolute;
    left: 22px;
    width: 302px;
    height: 43px;
    border-radius: 999px;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 24px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
  }

  .fig-newcat-primary {
    top: 174px;
    border: 0;
    background: #ff372b;
    color: #fff;
    box-shadow: 0 4px 8px rgba(255, 55, 43, .28);
  }

  .fig-newcat-secondary {
    top: 227px;
    border: 2px solid #202124;
    background: #fff;
    color: #202124;
  }

  .screen--karaoke-splash {
    padding: 0 !important;
    background: #f3f3f3 !important;
  }

  .screen--karaoke-splash.screen--fig-export > :not(.fig-page) {
    display: none !important;
  }

  .fig-page--karaoke-splash {
    position: relative;
    width: 100vw;
    max-width: 390px;
    min-height: 1293px;
    margin: 0 auto;
    overflow: hidden;
    background: #f3f3f3;
    color: #202124;
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif;
    letter-spacing: 0;
  }

  .fig-page--karaoke-splash *,
  .fig-page--karaoke-splash *::before,
  .fig-page--karaoke-splash *::after {
    box-sizing: border-box;
    letter-spacing: 0;
  }

  .fig-kcat-topbar {
    top: 40px;
  }

  .fig-kcat-topbar h1 {
    font-size: 16px !important;
  }

  .fig-kcat-select {
    position: absolute;
    left: 20px;
    top: 120px;
    width: 350px;
    height: 48px;
    border: 2px solid #1f2022;
    border-radius: 999px;
    background: #f3f3f3;
    color: #252525;
    text-align: left;
    padding-left: 13px;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 28px;
    line-height: 44px;
    text-transform: uppercase;
  }

  [data-screen="karaoke-splash"] .fig-kcat-select,
  [data-screen="karaoke-splash-90s"] .fig-kcat-select {
    top: 119px;
    width: 353px;
    height: 47px;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: transparent;
    font-size: 0;
    line-height: 0;
  }

  [data-screen="karaoke-splash"] .fig-kcat-select {
    background: url("assets/figma-exact/karaoke-splash-select-mobile-exact.png") center / 100% 100% no-repeat;
  }

  [data-screen="karaoke-splash-90s"] .fig-kcat-select {
    background: url("assets/figma-exact/karaoke-splash-90s-select-mobile-exact.png") center / 100% 100% no-repeat;
  }

  .fig-kcat-select span {
    position: absolute;
    right: 14px;
    top: 13px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #252525;
  }

  [data-screen="karaoke-splash"] .fig-kcat-select span,
  [data-screen="karaoke-splash-90s"] .fig-kcat-select span {
    display: none;
  }

  .fig-kcat-select span::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 6px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
  }

  .fig-kcat-hero {
    position: absolute;
    left: 20px;
    top: 200px;
    width: 350px;
    height: 343px;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    background: #111;
  }

  [data-screen="karaoke-splash"] .fig-kcat-hero,
  [data-screen="karaoke-splash-90s"] .fig-kcat-hero {
    top: 193px;
    height: 350px;
    border-radius: 0;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  [data-screen="karaoke-splash"] .fig-kcat-hero {
    background-image: url("assets/figma-exact/karaoke-splash-hero-section-mobile-exact.png");
  }

  [data-screen="karaoke-splash-90s"] .fig-kcat-hero {
    background-image: url("assets/figma-exact/karaoke-splash-90s-hero-section-mobile-exact.png");
  }

  .fig-kcat-hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  [data-screen="karaoke-splash"] .fig-kcat-hero img,
  [data-screen="karaoke-splash-90s"] .fig-kcat-hero img {
    opacity: 0;
  }

  .fig-kcat-start {
    position: absolute;
    left: 20px;
    top: 550px;
    width: 350px;
    height: 66px;
    border: 0;
    border-radius: 34px;
    background: #ff3426;
    color: #fff;
    text-align: left;
  }

  [data-screen="karaoke-splash"] .fig-kcat-start,
  [data-screen="karaoke-splash-90s"] .fig-kcat-start {
    top: 548px;
    height: 60px;
    border-radius: 0;
    color: transparent;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  [data-screen="karaoke-splash"] .fig-kcat-start {
    background-image: url("assets/figma-exact/karaoke-splash-start-mobile-exact.png");
  }

  [data-screen="karaoke-splash-90s"] .fig-kcat-start {
    background-image: url("assets/figma-exact/karaoke-splash-90s-start-mobile-exact.png");
  }

  .fig-kcat-start strong {
    position: absolute;
    left: 22px;
    top: 21px;
    color: #fff;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 27px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
  }

  [data-screen="karaoke-splash"] .fig-kcat-start strong,
  [data-screen="karaoke-splash-90s"] .fig-kcat-start strong {
    opacity: 0;
  }

  .fig-kcat-start span {
    position: absolute;
    right: 17px;
    top: 16px;
    min-width: 76px;
    height: 35px;
    padding: 0 13px;
    border-radius: 999px;
    background: #bf2a15;
    color: #fff;
    text-align: center;
    font-size: 12px;
    line-height: 35px;
    font-weight: 900;
  }

  [data-screen="karaoke-splash"] .fig-kcat-start span,
  [data-screen="karaoke-splash-90s"] .fig-kcat-start span {
    opacity: 0;
  }

  .fig-kcat-controls {
    position: absolute;
    left: 20px;
    top: 637px;
    width: 350px;
  }

  [data-screen="karaoke-splash"] .fig-kcat-controls {
    height: 193px;
    background: url("assets/figma-exact/karaoke-splash-controls-mobile-exact.png") center / 100% 100% no-repeat;
  }

  [data-screen="karaoke-splash"] .fig-kcat-controls > * {
    opacity: 0;
  }

  [data-screen="karaoke-splash-90s"] .fig-kcat-controls {
    height: 193px;
    background: url("assets/figma-exact/karaoke-splash-90s-controls-mobile-exact.png") center / 100% 100% no-repeat;
  }

  [data-screen="karaoke-splash-90s"] .fig-kcat-controls > * {
    opacity: 0;
  }

  .fig-kcat-controls h3,
  .fig-kcat-tips h3 {
    margin: 0;
    color: #242424;
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif;
    font-size: 24px;
    line-height: 1;
    font-weight: 850;
    text-transform: none !important;
  }

  .fig-kcat-control-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 13px;
  }

  .fig-kcat-control-grid button {
    position: relative;
    height: 83px;
    padding: 48px 12px 10px;
    border: 0;
    border-radius: 9px;
    background: #fff;
    text-align: left;
  }

  .fig-kcat-control-grid strong {
    display: block;
    color: #333;
    font-size: 12.4px;
    line-height: 1;
    font-weight: 850;
  }

  .fig-kcat-control-grid span {
    display: block;
    margin-top: 3px;
    color: #aaa;
    font-size: 10px;
    line-height: 1;
    font-weight: 750;
  }

  .fig-kcat-control-grid b {
    position: absolute;
    left: 17px;
    top: 19px;
    color: #ff861c;
    font-size: 41px;
    line-height: .55;
    font-weight: 300;
  }

  .fig-kcat-icon {
    position: absolute;
    left: 18px;
    top: 17px;
    width: 30px;
    height: 30px;
    color: #ff861c;
  }

  .fig-kcat-icon--blank::before,
  .fig-kcat-icon--blank::after {
    content: "";
    position: absolute;
    border: 4px solid currentColor;
    border-radius: 2px;
  }

  .fig-kcat-icon--blank::before {
    inset: 0 7px 6px 3px;
  }

  .fig-kcat-icon--blank::after {
    right: 2px;
    bottom: 0;
    width: 19px;
    height: 22px;
    border-left: 0;
    border-top: 0;
  }

  .fig-kcat-icon--winner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 30px;
    height: 5px;
    border-radius: 4px;
    background: currentColor;
    transform: rotate(-20deg);
  }

  .fig-kcat-icon--winner::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 0;
    width: 11px;
    height: 29px;
    border-radius: 50% 50% 10px 10px;
    background: currentColor;
    clip-path: polygon(50% 0, 63% 36%, 100% 39%, 70% 59%, 82% 100%, 50% 75%, 18% 100%, 30% 59%, 0 39%, 37% 36%);
  }

  .fig-kcat-icon--play {
    border-radius: 50%;
    background: currentColor;
  }

  .fig-kcat-icon--play::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 8px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid #fff;
  }

  .fig-kcat-tips {
    position: absolute;
    left: 20px;
    top: 860px;
    width: 350px;
  }

  [data-screen="karaoke-splash"] .fig-kcat-tips {
    height: 264px;
    background: url("assets/figma-exact/karaoke-splash-tips-mobile-exact.png") center / 100% 100% no-repeat;
  }

  [data-screen="karaoke-splash"] .fig-kcat-tips > * {
    opacity: 0;
  }

  [data-screen="karaoke-splash-90s"] .fig-kcat-tips {
    height: 264px;
    background: url("assets/figma-exact/karaoke-splash-90s-tips-mobile-exact.png") center / 100% 100% no-repeat;
  }

  [data-screen="karaoke-splash-90s"] .fig-kcat-tips > * {
    opacity: 0;
  }

  .fig-kcat-tips article {
    position: relative;
    min-height: 69px;
    margin-top: 13px;
    padding: 20px 20px 18px 64px;
    border-radius: 9px;
    background: #dedede;
  }

  .fig-kcat-tips article:nth-of-type(2) {
    min-height: 64px;
    background: #ff861c;
    color: #fff;
  }

  .fig-kcat-tips article p {
    margin: 0;
    color: #3d3d3d;
    font-size: 12.4px;
    line-height: 1.13;
    font-weight: 760;
  }

  .fig-kcat-tip-accent p {
    color: #fff !important;
  }

  .fig-kcat-tips .fig-kcat-icon {
    left: 19px;
    top: 20px;
  }

  .fig-kcat-icon--plane::before {
    content: "";
    position: absolute;
    inset: 2px 0 0 0;
    background: currentColor;
    clip-path: polygon(0 39%, 100% 0, 65% 100%, 45% 62%, 17% 77%);
  }

  .fig-kcat-icon--link::before,
  .fig-kcat-icon--link::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 10px;
    border: 4px solid #fff;
    border-radius: 999px;
  }

  .fig-kcat-icon--link::before {
    left: 0;
    top: 11px;
    transform: rotate(-43deg);
  }

  .fig-kcat-icon--link::after {
    right: 0;
    top: 7px;
    transform: rotate(-43deg);
  }

  .fig-kcat-icon--note::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 19px;
    height: 22px;
    background: currentColor;
    clip-path: polygon(0 18%, 100% 0, 100% 18%, 25% 34%, 25% 100%, 0 100%);
  }

  .fig-kcat-icon--note::after {
    content: "";
    position: absolute;
    left: -1px;
    bottom: 1px;
    width: 14px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
  }

  .fig-kcat-footer {
    top: 1143px;
    height: 150px;
  }

  [data-screen="karaoke-splash"] .fig-kcat-footer {
    background: url("assets/figma-exact/karaoke-splash-footer-mobile-exact.png") center / 100% 100% no-repeat !important;
    box-shadow: none !important;
  }

  [data-screen="karaoke-splash"] .fig-kcat-footer > * {
    opacity: 0;
  }

  [data-screen="karaoke-splash-90s"] .fig-kcat-footer {
    background: url("assets/figma-exact/karaoke-splash-90s-footer-mobile-exact.png") center / 100% 100% no-repeat !important;
    box-shadow: none !important;
  }

  [data-screen="karaoke-splash-90s"] .fig-kcat-footer > * {
    opacity: 0;
  }

  .fig-kcat-footer strong {
    top: 53px;
  }

  .fig-kcat-footer p {
    top: 52px;
  }

  .fig-kcat-footer a {
    top: 111px;
  }

  .fig-kcat-footer small {
    top: 128px;
  }

  .screen--karaoke-party-locked {
    padding: 0 !important;
    background: #f3f3f3 !important;
  }

  .screen--karaoke-party-locked.screen--fig-export > :not(.fig-page) {
    display: none !important;
  }

  .fig-page--karaoke-party-locked {
    position: relative;
    width: 100vw;
    max-width: 390px;
    min-height: 1293px;
    margin: 0 auto;
    overflow: hidden;
    background: #f3f3f3;
    color: #202124;
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif;
    letter-spacing: 0;
  }

  .fig-page--karaoke-party-locked *,
  .fig-page--karaoke-party-locked *::before,
  .fig-page--karaoke-party-locked *::after {
    box-sizing: border-box;
    letter-spacing: 0;
  }

  [data-screen="karaoke-party-locked"] .fig-kcat-topbar {
    left: 20px;
    top: 39px;
    width: 350px;
    height: 43px;
    min-height: 43px;
    padding: 0;
    border-radius: 0;
    background: url("assets/figma-exact/karaoke-party-locked-topbar-mobile-exact.png") center / 100% 100% no-repeat;
    box-shadow: none;
  }

  [data-screen="karaoke-party-locked"] .fig-kcat-topbar > * {
    opacity: 0;
  }

  .fig-kparty-title {
    position: absolute;
    left: 0;
    top: 112px;
    width: 390px;
    height: 58px;
    margin: 0;
    color: transparent;
    text-align: center;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 0;
    line-height: 0;
    text-transform: uppercase;
    background: url("assets/figma-exact/karaoke-party-locked-title-mobile-exact.png") center / 100% 100% no-repeat;
  }

  .fig-kparty-hero {
    position: absolute;
    left: 20px;
    top: 176px;
    width: 350px;
    height: 347px;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    background: url("assets/figma-exact/karaoke-party-locked-hero-section-mobile-exact.png") center / 100% 100% no-repeat;
  }

  .fig-kparty-hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
  }

  .fig-kparty-start {
    position: absolute;
    left: 20px;
    top: 530px;
    width: 350px;
    height: 58px;
    border: 0;
    border-radius: 0;
    background: url("assets/figma-exact/karaoke-party-locked-start-mobile-exact.png") center / 100% 100% no-repeat;
    color: transparent;
    text-align: left;
  }

  .fig-kparty-start > * {
    opacity: 0;
  }

  .fig-kparty-start strong {
    position: absolute;
    left: 23px;
    top: 21px;
    color: #999;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 27px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
  }

  .fig-kparty-start span {
    position: absolute;
    right: 17px;
    top: 16px;
    min-width: 76px;
    height: 35px;
    padding: 0 13px;
    border-radius: 999px;
    background: #999;
    color: #fff;
    text-align: center;
    font-size: 12px;
    line-height: 35px;
    font-weight: 900;
  }

  .fig-kparty-note {
    position: absolute;
    left: 0;
    top: 594px;
    width: 390px;
    height: 32px;
    margin: 0;
    color: transparent;
    text-align: center;
    font-size: 0;
    line-height: 0;
    font-weight: 700;
    background: url("assets/figma-exact/karaoke-party-locked-note-mobile-exact.png") center / 100% 100% no-repeat;
  }

  .fig-kparty-controls {
    top: 654px;
  }

  [data-screen="karaoke-party-locked"] .fig-kparty-controls {
    height: 206px;
    background: url("assets/figma-exact/karaoke-party-locked-controls-mobile-exact.png") center / 100% 100% no-repeat;
    overflow: visible;
  }

  [data-screen="karaoke-party-locked"] .fig-kparty-controls > * {
    opacity: 0;
  }

  [data-screen="karaoke-party-locked"] .fig-kparty-controls::before {
    content: "";
    position: absolute;
    left: -20px;
    top: -28px;
    width: 390px;
    height: 28px;
    background: url("assets/figma-exact/karaoke-party-locked-controls-heading-mobile-exact.png") center / 100% 100% no-repeat;
    pointer-events: none;
  }

  .fig-kparty-tips {
    top: 877px;
  }

  [data-screen="karaoke-party-locked"] .fig-kparty-tips {
    height: 247px;
    background: url("assets/figma-exact/karaoke-party-locked-tips-mobile-exact.png") center / 100% 100% no-repeat;
    overflow: visible;
  }

  [data-screen="karaoke-party-locked"] .fig-kparty-tips > * {
    opacity: 0;
  }

  [data-screen="karaoke-party-locked"] .fig-kparty-tips::before {
    content: "";
    position: absolute;
    left: -20px;
    top: -17px;
    width: 390px;
    height: 17px;
    background: url("assets/figma-exact/karaoke-party-locked-tips-heading-mobile-exact.png") center / 100% 100% no-repeat;
    pointer-events: none;
  }

  .fig-page--karaoke-party-locked .fig-kcat-footer {
    top: 1143px;
  }

  [data-screen="karaoke-party-locked"] .fig-kcat-footer {
    background: url("assets/figma-exact/karaoke-party-locked-footer-mobile-exact.png") center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    overflow: visible;
  }

  [data-screen="karaoke-party-locked"] .fig-kcat-footer > * {
    opacity: 0;
  }

  [data-screen="karaoke-party-locked"] .fig-kcat-footer::before {
    content: "";
    position: absolute;
    left: 0;
    top: -19px;
    width: 390px;
    height: 19px;
    background: url("assets/figma-exact/karaoke-party-locked-footer-top-mobile-exact.png") center / 100% 100% no-repeat;
    pointer-events: none;
  }

  .fig-kcat-icon--mic::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 0;
    width: 14px;
    height: 24px;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(-23deg);
  }

  .fig-kcat-icon--mic::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 17px;
    width: 16px;
    height: 12px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    border-radius: 0 12px 0 0;
    transform: rotate(12deg);
  }
}

@media (max-width: 899px) {
  .screen--category-payment {
    padding: 0 !important;
    background: #f3f3f3 !important;
  }

  .screen--category-payment.screen--fig-export > :not(.fig-page) {
    display: none !important;
  }

  .fig-page--category-payment {
    position: relative;
    width: 100vw;
    max-width: 390px;
    min-height: 968px;
    margin: 0 auto;
    overflow: hidden;
    background: #f3f3f3;
    color: #202124;
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif;
    letter-spacing: 0;
  }

  .fig-page--category-payment::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("assets/figma-exact/category-payment-backdrop-outside-card-exact.png") center top / 100% 100% no-repeat;
    z-index: 0;
    pointer-events: none;
  }

  .fig-page--category-payment *,
  .fig-page--category-payment *::before,
  .fig-page--category-payment *::after {
    box-sizing: border-box;
    letter-spacing: 0;
  }

  .fig-paycat-topbar {
    top: 38px;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 2;
  }

  .fig-paycat-topbar > *,
  .fig-paycat-footer > * {
    opacity: 0;
  }

  .fig-page--category-payment .fig-task-topbar h1 {
    margin-left: 15px;
    color: #202124;
    font-size: 20px;
    line-height: 1;
    font-weight: 850;
  }

  .fig-page--category-payment .fig-paycat-topbar > button:last-child {
    width: 64px;
    flex-basis: 64px;
    padding-right: 9px;
    padding-left: 31px;
  }

  .fig-paycat-card {
    position: absolute;
    left: 22px;
    top: 113px;
    width: 346px;
    height: 458px;
    border-radius: 13px;
    background: #121212;
    box-shadow: none;
    color: #fff;
    overflow: hidden;
  }

  .fig-paycat-card h2 {
    position: absolute;
    left: 42px;
    top: 27px;
    width: 400px;
    margin: 0;
    color: #fff;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 28px;
    line-height: .96;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
    transform: scaleX(.76);
    transform-origin: left top;
  }

  .fig-paycat-card h2 span {
    color: #fff;
  }

  .fig-paycat-card h2 em {
    color: #ff861c;
    font-style: normal;
  }

  .fig-paycat-product {
    position: absolute;
    left: 85px;
    top: 75px;
    width: 176px;
    height: 175px;
    margin: 0;
  }

  .fig-paycat-product img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .fig-paycat-summary {
    position: absolute;
    left: 20px;
    top: 273px;
    width: 304px;
    height: 76px;
    border-radius: 13px;
    background: #2d2d2d;
    color: #fff;
  }

  .fig-paycat-summary p {
    position: absolute;
    left: 18px;
    top: 16px;
    margin: 0;
    width: 184px;
    color: #eeeeee;
    font-size: 9.8px;
    line-height: 1;
    font-weight: 500;
  }

  .fig-paycat-summary strong {
    position: absolute;
    right: 15px;
    top: 16px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-size: 10.5px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
  }

  .fig-paycat-summary i,
  .fig-paycat-topup b::after,
  .fig-paycat-topbar > button:last-child::before {
    display: inline-block;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: url("assets/figma-exact/balance-coin-mobile.png") center / cover no-repeat;
    content: "";
  }

  .fig-paycat-summary small {
    position: absolute;
    left: 16px;
    top: 38px;
    color: #ff861c;
    font-size: 10px;
    line-height: 1.05;
    font-weight: 500;
    transform: scaleX(.96);
    transform-origin: left top;
  }

  .fig-paycat-summary small::before {
    content: "!";
    display: inline-grid;
    place-items: center;
    width: 13px;
    height: 13px;
    margin-right: 5px;
    border: 1.5px solid #ff861c;
    border-radius: 50%;
    font-size: 10px;
    line-height: 1;
    vertical-align: 1px;
  }

  .fig-paycat-topup {
    position: absolute;
    left: 24px;
    top: 359px;
    width: 300px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: #ff3426;
    color: #fff;
    text-align: left;
  }

  .fig-paycat-topup span {
    position: absolute;
    left: 12px;
    top: 11px;
    color: #fff;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 21px;
    line-height: .85;
    font-weight: 900;
    text-transform: uppercase;
    transform: scaleX(.88);
    transform-origin: left top;
  }

  .fig-paycat-topup b {
    position: absolute;
    right: 9px;
    top: 6px;
    width: 76px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #c82114;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
  }

  .fig-paycat-topup b::after {
    display: none;
  }

  .fig-paycat-note {
    position: absolute;
    left: 50px;
    top: 417px;
    width: 246px;
    margin: 0;
    color: #696969;
    text-align: center;
    font-size: 10px;
    line-height: 1.18;
    font-weight: 500;
  }

  .fig-paycat-footer {
    top: 796px;
    height: 172px;
    border-radius: 35px 35px 0 0;
    background: transparent !important;
    box-shadow: none !important;
  }

  .fig-page--category-payment .fig-paycat-footer strong {
    top: 58px;
  }

  .fig-page--category-payment .fig-paycat-footer p {
    top: 57px;
  }

  .fig-page--category-payment .fig-paycat-footer a {
    top: 121px;
    width: 168px;
    font-size: 9px;
    white-space: nowrap;
  }

  .fig-page--category-payment .fig-paycat-footer small {
    top: 138px;
    width: 168px;
    font-size: 9px;
    white-space: nowrap;
  }

  .screen--purchase-confirm {
    padding: 0 !important;
    background: #f2f2f0 !important;
  }

  .screen--purchase-confirm.screen--fig-export > :not(.fig-page) {
    display: none !important;
  }

  .fig-page--purchase-confirm {
    position: relative;
    width: 100vw;
    max-width: 390px;
    min-height: 968px;
    margin: 0 auto;
    overflow: hidden;
    background: #f6f4f1;
    color: #fff;
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif;
    letter-spacing: 0;
  }

  .fig-page--purchase-confirm *,
  .fig-page--purchase-confirm *::before,
  .fig-page--purchase-confirm *::after {
    box-sizing: border-box;
    letter-spacing: 0;
  }

  .fig-purchase-bg {
    position: absolute;
    inset: 0;
    background: url("assets/figma-exact/purchase-confirm-backdrop-outside-modal-exact.png") center top / 100% 100% no-repeat;
    filter: none;
    opacity: 1;
    transform: none;
    transform-origin: 50% 0;
  }

  .fig-purchase-bg::after {
    display: none;
  }

  .fig-purchase-modal {
    position: absolute;
    left: 22px;
    top: 236px;
    width: 346px;
    height: 429px;
    padding: 29px 22px 0;
    border-radius: 13px;
    background: #121212;
    box-shadow: none;
    overflow: hidden;
    z-index: 2;
  }

  .fig-purchase-modal h1 {
    position: absolute;
    left: 13px;
    top: 14px;
    z-index: 2;
    width: 285px;
    height: 46px;
    overflow: hidden;
    margin: 0;
    color: transparent;
    font-size: 0;
    line-height: 0;
    text-transform: uppercase;
    white-space: nowrap;
    background: url("assets/figma-exact/purchase-confirm-title-mobile-exact.png") center / 100% 100% no-repeat;
    transform: none;
  }

  .fig-purchase-modal h1 span {
    color: transparent;
    font-style: normal;
  }

  .fig-purchase-modal h1 em {
    color: transparent;
    font-style: normal;
  }

  .fig-purchase-close {
    position: absolute;
    left: 321px;
    top: 251px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: #333;
    z-index: 5;
  }

  .fig-purchase-close::before,
  .fig-purchase-close::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 13px;
    width: 12px;
    height: 2px;
    border-radius: 3px;
    background: #b9b9b9;
  }

  .fig-purchase-close::before { transform: rotate(45deg); }
  .fig-purchase-close::after { transform: rotate(-45deg); }

  .fig-purchase-product {
    position: absolute;
    left: 70px;
    top: 64px;
    width: 210px;
    height: 176px;
    margin: 0;
    background: url("assets/figma-exact/purchase-confirm-product-mobile-exact.png") center / 100% 100% no-repeat;
    z-index: 1;
  }

  .fig-purchase-product img {
    opacity: 0;
  }

  .fig-purchase-summary {
    position: absolute;
    left: 24px;
    top: 235px;
    width: 300px;
    height: 94px;
    padding: 14px 15px 0;
    border-radius: 10px;
    background: #2d2d2d;
    color: #f2f2f2;
    z-index: 3;
  }

  .fig-purchase-summary div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 20px;
    color: #ededed;
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
  }

  .fig-purchase-summary b {
    max-width: 150px;
    overflow: hidden;
    color: #f5f5f5;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .fig-purchase-summary__total {
    margin-top: 9px;
    padding-top: 13px;
    border-top: 1px solid #555;
    font-size: 11px !important;
    font-weight: 900 !important;
  }

  .fig-purchase-summary__total b {
    padding-right: 34px;
    font-size: 13px;
  }

  .fig-purchase-summary i,
  .fig-purchase-pay i {
    position: absolute;
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: url("assets/figma/fig-coin.webp") center / cover no-repeat;
  }

  .fig-purchase-summary i {
    right: 2px;
    top: 9px;
  }

  .fig-purchase-pay {
    position: absolute;
    left: 24px;
    top: 340px;
    width: 300px;
    height: 42px;
    padding: 0 10px 0 18px;
    border: 0;
    border-radius: 24px;
    background: #ff3426;
    color: #fff;
    z-index: 3;
  }

  .fig-purchase-pay > span {
    position: absolute;
    left: 16px;
    top: 8px;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 25px;
    line-height: 1;
    text-transform: uppercase;
  }

  .fig-purchase-pay b {
    position: absolute;
    right: 9px;
    top: 5px;
    width: 108px;
    height: 30px;
    padding: 0 31px 1px 0;
    border-radius: 999px;
    background: #bd1c10;
    color: #fff;
    text-align: center;
    font-size: 11px;
    line-height: 30px;
    font-weight: 900;
    white-space: nowrap;
  }

  .fig-purchase-pay i {
    right: 7px;
    top: 4px;
  }

  .fig-purchase-modal > p {
    position: absolute;
    left: 31px;
    top: 384px;
    width: 286px;
    margin: 0;
    color: #777;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 500;
    white-space: nowrap;
  }

  .fig-purchase-footer {
    position: absolute;
    left: 0;
    top: 794px;
    width: 100%;
    height: 174px;
    padding: 55px 20px 0;
    border-radius: 35px 35px 0 0;
    background: #111;
    color: #777;
    z-index: 1;
  }

  .screen--purchase-confirm .fig-purchase-footer {
    background: transparent !important;
    box-shadow: none !important;
  }

  .screen--purchase-confirm .fig-purchase-footer > * {
    opacity: 0;
  }

  .fig-purchase-footer strong {
    position: absolute;
    left: 22px;
    top: 55px;
    width: 149px;
    height: 56px;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    line-height: 0;
    background: url("assets/figma-exact/footer-logo-mobile-exact.png") left top / contain no-repeat;
    transform: none;
  }

  .fig-purchase-footer p,
  .fig-purchase-footer a,
  .fig-purchase-footer small {
    position: absolute;
    left: 222px;
    width: 145px;
    margin: 0;
    color: #777;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    line-height: 0;
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
  }

  .fig-purchase-footer p {
    top: 57px;
    height: 28px;
    background-image: url("assets/figma-exact/footer-legal-mobile-exact.png");
  }

  .fig-purchase-footer a {
    top: 112px;
    width: 139px;
    height: 11px;
    background-image: url("assets/figma-exact/footer-privacy-mobile-exact.png");
  }

  .fig-purchase-footer small {
    top: 136px;
    width: 130px;
    height: 9px;
    background-image: url("assets/figma-exact/footer-copy-mobile-exact.png");
  }

  .screen--purchase-success {
    padding: 0 !important;
    background: #f3f3f3 !important;
  }

  .screen--purchase-success.screen--fig-export > :not(.fig-page) {
    display: none !important;
  }

  .fig-page--purchase-success {
    position: relative;
    width: 100vw;
    max-width: 390px;
    min-height: 968px;
    margin: 0 auto;
    overflow: hidden;
    background: #f3f3f3;
    color: #151515;
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif;
    letter-spacing: 0;
  }

  .fig-page--purchase-success *,
  .fig-page--purchase-success *::before,
  .fig-page--purchase-success *::after {
    box-sizing: border-box;
    letter-spacing: 0;
  }

  .fig-success-confetti {
    position: absolute;
    inset: 0;
    height: auto;
    background: url("assets/figma-exact/purchase-success-backdrop-outside-card-exact.png") center top / 100% 100% no-repeat;
    overflow: hidden;
  }

  .fig-success-confetti i {
    display: none;
  }

  .fig-success-confetti i:nth-child(3n) { background: #7b5cf1; width: 9px; height: 28px; border-radius: 9px 3px 9px 3px; }
  .fig-success-confetti i:nth-child(4n) { background: #ffbe00; width: 5px; height: 16px; }
  .fig-success-confetti i:nth-child(5n) { background: #08b6c7; width: 7px; height: 11px; }
  .fig-success-confetti i:nth-child(1) { left: 10px; top: 10px; transform: rotate(-36deg); }
  .fig-success-confetti i:nth-child(2) { left: 58px; top: 6px; }
  .fig-success-confetti i:nth-child(3) { left: 117px; top: 36px; transform: rotate(48deg); }
  .fig-success-confetti i:nth-child(4) { left: 188px; top: 9px; transform: rotate(-18deg); }
  .fig-success-confetti i:nth-child(5) { left: 252px; top: 38px; transform: rotate(14deg); }
  .fig-success-confetti i:nth-child(6) { left: 329px; top: 0; transform: rotate(-42deg); }
  .fig-success-confetti i:nth-child(7) { left: 376px; top: 84px; }
  .fig-success-confetti i:nth-child(8) { left: 33px; top: 122px; transform: rotate(69deg); }
  .fig-success-confetti i:nth-child(9) { left: 88px; top: 95px; transform: rotate(-12deg); }
  .fig-success-confetti i:nth-child(10) { left: 141px; top: 133px; transform: rotate(25deg); }
  .fig-success-confetti i:nth-child(11) { left: 211px; top: 105px; transform: rotate(-26deg); }
  .fig-success-confetti i:nth-child(12) { left: 283px; top: 129px; transform: rotate(36deg); }
  .fig-success-confetti i:nth-child(13) { left: 345px; top: 151px; transform: rotate(-10deg); }
  .fig-success-confetti i:nth-child(14) { left: 3px; top: 188px; transform: rotate(43deg); }
  .fig-success-confetti i:nth-child(15) { left: 62px; top: 224px; transform: rotate(-31deg); }
  .fig-success-confetti i:nth-child(16) { left: 128px; top: 201px; transform: rotate(8deg); }
  .fig-success-confetti i:nth-child(17) { left: 194px; top: 240px; transform: rotate(41deg); }
  .fig-success-confetti i:nth-child(18) { left: 257px; top: 207px; transform: rotate(-48deg); }
  .fig-success-confetti i:nth-child(19) { left: 312px; top: 235px; transform: rotate(26deg); }
  .fig-success-confetti i:nth-child(20) { left: 372px; top: 264px; transform: rotate(-36deg); }
  .fig-success-confetti i:nth-child(21) { left: 42px; top: 277px; transform: rotate(18deg); }
  .fig-success-confetti i:nth-child(22) { left: 99px; top: 260px; transform: rotate(-54deg); }
  .fig-success-confetti i:nth-child(23) { left: 160px; top: 285px; transform: rotate(37deg); }
  .fig-success-confetti i:nth-child(24) { left: 224px; top: 270px; transform: rotate(-18deg); }
  .fig-success-confetti i:nth-child(25) { left: 300px; top: 291px; transform: rotate(52deg); }
  .fig-success-confetti i:nth-child(26) { left: 18px; top: 55px; transform: rotate(10deg); }
  .fig-success-confetti i:nth-child(27) { left: 152px; top: 64px; transform: rotate(-55deg); }
  .fig-success-confetti i:nth-child(28) { left: 241px; top: 73px; transform: rotate(63deg); }
  .fig-success-confetti i:nth-child(29) { left: 306px; top: 79px; transform: rotate(-8deg); }
  .fig-success-confetti i:nth-child(30) { left: 363px; top: 27px; transform: rotate(34deg); }

  .fig-success-topbar {
    position: absolute;
    left: 21px;
    top: 47px;
    width: 348px;
    height: 54px;
    display: flex;
    align-items: center;
    padding: 0 9px 0 13px;
    border-radius: 28px;
    background: transparent;
    box-shadow: none;
    z-index: 2;
  }

  .fig-success-topbar > *,
  .fig-success-yay,
  .fig-success-footer > * {
    opacity: 0;
  }

  .fig-success-topbar > button:first-child {
    position: relative;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 0;
    border-radius: 50%;
    background: #efefef;
  }

  .fig-success-topbar > button:first-child::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 12px;
    width: 11px;
    height: 11px;
    border-left: 3px solid #a5a5a5;
    border-bottom: 3px solid #a5a5a5;
    transform: rotate(45deg);
  }

  .fig-success-topbar h1 {
    flex: 1 1 auto;
    margin: 0 10px 0 14px;
    color: #191919;
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif;
    font-size: 20px;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
  }

  .fig-success-topbar > button:last-child {
    position: relative;
    width: 83px;
    height: 34px;
    flex: 0 0 83px;
    padding: 0 11px 1px 33px;
    border: 0;
    border-radius: 999px;
    background: #38383a;
    color: #e9e9e9;
    text-align: right;
    font-size: 17px;
    line-height: 34px;
    font-weight: 900;
  }

  .fig-success-topbar > button:last-child::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 4px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: url("assets/figma/fig-coin.webp") center / cover no-repeat;
  }

  .fig-success-yay {
    position: absolute;
    left: 0;
    top: 145px;
    width: 100%;
    color: #ff861c;
    text-align: center;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 30px;
    line-height: 1;
    text-transform: uppercase;
    z-index: 1;
  }

  .fig-success-card {
    position: absolute;
    left: 21px;
    top: 235px;
    width: 348px;
    height: 398px;
    padding: 0 22px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,.04);
    z-index: 1;
  }

  .fig-success-doc {
    position: absolute;
    left: 158px;
    top: 75px;
    width: 38px;
    height: 47px;
    border: 2px solid #ff861c;
    transform: rotate(14deg);
  }

  .fig-success-doc::before {
    content: "";
    position: absolute;
    left: -27px;
    top: 10px;
    width: 21px;
    height: 14px;
    border-top: 2px solid #ff861c;
    border-bottom: 2px solid #ff861c;
  }

  .fig-success-doc::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 15px;
    width: 18px;
    height: 22px;
    border-top: 2px solid #ff861c;
    border-bottom: 2px solid #ff861c;
    box-shadow: 0 8px 0 -5px #ff861c;
  }

  .fig-success-card h2 {
    position: absolute;
    left: 0;
    top: 150.5px;
    width: 100%;
    margin: 0;
    color: #101010;
    text-align: center;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 28px;
    line-height: .95;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateX(-1px) scaleX(.76);
    transform-origin: center top;
  }

  .fig-success-card p {
    position: absolute;
    left: 34px;
    top: 192px;
    width: 280px;
    margin: 0;
    color: #363636;
    text-align: center;
    font-size: 10.5px;
    line-height: 1.12;
    font-weight: 400;
    transform: scaleX(.98);
    transform-origin: center top;
  }

  .fig-success-profile,
  .fig-success-return {
    position: absolute;
    left: 23px;
    width: 302px;
    height: 43px;
    border-radius: 33px;
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .fig-success-profile {
    top: 288px;
    border: 0;
    background: #ff3426;
    color: #fff;
    box-shadow: 0 2px 12px rgba(255,52,38,.42);
  }

  .fig-success-return {
    top: 340px;
    border: 2px solid #202020;
    background: #fff;
    color: #202020;
  }

  .fig-success-footer {
    position: absolute;
    left: 0;
    top: 790px;
    width: 100%;
    height: 178px;
    padding: 55px 20px 0;
    border-radius: 35px 35px 0 0;
    background: transparent;
    color: #777;
    z-index: 1;
  }

  .fig-success-footer strong {
    position: absolute;
    left: 22px;
    top: 56px;
    color: #ff3426;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 32px;
    line-height: .9;
    transform: skewY(-5deg);
  }

  .fig-success-footer p,
  .fig-success-footer a,
  .fig-success-footer small {
    position: absolute;
    left: 222px;
    width: 145px;
    margin: 0;
    color: #777;
    font-size: 10.5px;
    line-height: 1.18;
    font-weight: 700;
  }

  .fig-success-footer p { top: 57px; }
  .fig-success-footer a { top: 112px; text-decoration: underline; }
  .fig-success-footer small { top: 136px; }
}

@media (max-width: 899px) {
  .screen--song-log .fig-page--song-log > .fig-live {
    position: absolute !important;
    inset: 0 !important;
    z-index: 12 !important;
    display: block !important;
    pointer-events: none !important;
  }

  .screen--song-log .fig-page--song-log > .fig-song-log-layer {
    z-index: 3 !important;
    pointer-events: none !important;
  }

  .screen--song-log .fig-page--song-log > .fig-page-hotspots {
    z-index: 20 !important;
  }

  .screen--song-log .fig-song-log-list {
    z-index: 13 !important;
  }
}

@media (max-width: 899px) {
  .screen--correct-answers {
    padding: 0 !important;
    background: #f3f3f3 !important;
  }

  .screen--correct-answers.screen--fig-export > :not(.fig-page) {
    display: none !important;
  }

  .fig-page--correct-answers {
    position: relative;
    width: 100vw;
    max-width: 390px;
    margin: 0 auto;
    aspect-ratio: 390 / 1293;
    min-height: 1293px;
    overflow: hidden;
    background: #f3f3f3;
    color: #202124;
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif;
    letter-spacing: 0;
  }

  .fig-page--correct-answers *,
  .fig-page--correct-answers *::before,
  .fig-page--correct-answers *::after {
    box-sizing: border-box;
    letter-spacing: 0;
  }

  .fig-answer-hotspots {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
  }

  .fig-answer-hit {
    position: absolute;
    border: 0;
    background: transparent;
    pointer-events: auto;
  }

  .fig-answer-hit--back {
    left: 5.1%;
    top: 2.86%;
    width: 13%;
    height: 3.9%;
    border-radius: 999px;
  }

  .fig-answer-hit--balance {
    right: 5.1%;
    top: 2.86%;
    width: 26%;
    height: 3.9%;
    border-radius: 999px;
  }

  .fig-answer-topbar {
    position: absolute;
    left: 22px;
    top: 39px;
    width: 346px;
    height: 43px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 0 12px;
    border-radius: 999px;
    background: url("assets/figma-exact/correct-answers-header-mobile-exact.png") center / 100% 100% no-repeat;
    box-shadow: none;
  }

  .fig-answer-topbar > * {
    opacity: 0;
  }

  .fig-answer-back {
    position: relative;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: #eceeef;
  }

  .fig-answer-back::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 8px;
    width: 10px;
    height: 10px;
    border-left: 3px solid #a6aaad;
    border-bottom: 3px solid #a6aaad;
    transform: rotate(45deg);
  }

  .fig-answer-topbar h1 {
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
    color: #1f2023;
    font-size: 18px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
  }

  .fig-answer-balance {
    position: relative;
    width: 91px;
    height: 32px;
    flex: 0 0 auto;
    padding: 0 10px 1px 34px;
    border: 0;
    border-radius: 999px;
    background: #3a3a3d;
    color: #f1f1f1;
    text-align: right;
    font-size: 17px;
    line-height: 32px;
    font-weight: 900;
  }

  .fig-answer-balance::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 5px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, #ffe9a8 0 18%, #ef9c22 42%, #b96713 100%);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.28);
  }

  .fig-answer-category {
    position: absolute;
    left: 0;
    top: 122px;
    width: 100%;
    height: 32px;
    color: transparent;
    font-size: 0;
    line-height: 0;
    background: url("assets/figma-exact/correct-answers-category-mobile-exact.png") center / 100% 100% no-repeat;
  }

  .fig-answer-list {
    position: absolute;
    left: 22px;
    top: 177px;
    width: 346px;
    height: 1090px;
  }

  .fig-answer-card {
    position: absolute;
    left: 0;
    width: 100%;
    height: 346px;
    padding: 31px 28px 26px;
    border-radius: 27px;
    background: radial-gradient(ellipse 190px 185px at 50% 51%, #331800 0%, #25170d 48%, #181716 82%, #161616 100%);
    color: #fff;
    overflow: hidden;
  }

  .fig-answer-card--one { top: 0; }
  .fig-answer-card--two { top: 361px; }
  .fig-answer-card--three { top: 722px; }

  .fig-answer-number {
    position: absolute;
    right: 19px;
    top: 34px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #ff8b1f;
    color: #fff;
    text-align: center;
    font-size: 15px;
    line-height: 25px;
    font-weight: 900;
    transform: translate(.5px, -.25px);
  }

  .fig-answer-card h2,
  .fig-answer-card h3 {
    margin: 0;
    font-family: "Alumni Sans", "Arial Narrow", Arial, sans-serif;
    line-height: .82;
    font-weight: 850;
    text-transform: none;
    width: 360px;
    max-width: none;
    white-space: nowrap;
    transform-origin: left top;
  }

  .fig-answer-card h2 {
    color: #f7831f;
    font-size: 40px;
    transform: translate(-1px, 0) scaleX(.62);
  }

  .fig-answer-card h3 {
    margin-top: 4px;
    color: #eeeeee;
    font-size: 36.5px;
    transform: translate(.5px, 0) scaleX(.75);
  }

  .fig-answer-lyrics {
    margin-top: 23.5px;
    color: #e6e6e6;
    font-size: 11px;
    line-height: 1.58;
    font-weight: 400;
    transform: scaleX(1.08);
    transform-origin: left top;
  }

  .fig-answer-lyrics p {
    margin: 0;
  }

  .fig-answer-lyrics p:nth-child(3) {
    margin-top: 17px;
  }

  .fig-answer-spacer {
    height: 17px;
  }

  .fig-answer-lyrics span {
    color: #f7831f;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }

  .fig-answer-footer {
    position: absolute;
    left: 0;
    top: 1101px;
    width: 100%;
    height: 192px;
    padding: 34px 28px 0;
    border-radius: 36px 36px 0 0;
    background: #111 url("assets/figma-exact/correct-answers-footer-mobile-exact.png") center / 100% 100% no-repeat;
    color: #777;
    z-index: 10;
  }

  .fig-answer-footer > * {
    opacity: 0;
  }

  .fig-answer-footer strong {
    position: absolute;
    left: 27px;
    top: 48px;
    color: #ff3427;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 36px;
    line-height: .8;
    text-transform: uppercase;
    transform: skewY(-5deg);
  }

  .fig-answer-footer p,
  .fig-answer-footer a,
  .fig-answer-footer small {
    position: absolute;
    left: 57.5%;
    margin: 0;
    color: #777;
    font-size: 11px;
    line-height: 1.18;
    font-weight: 600;
  }

  .fig-answer-footer p { top: 42px; }
  .fig-answer-footer a { top: 99px; text-decoration: underline; }
  .fig-answer-footer small { top: 121px; }
}

@media (max-width: 899px) {
  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-layer,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-layer {
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif !important;
  }

  .fig-play-state-topbar h1 {
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    text-transform: none !important;
  }

  .fig-play-state-category {
    font-family: Impact, "Arial Narrow", Arial, sans-serif !important;
    font-size: 30px !important;
  }

  .fig-play-state-card {
    top: 13.689095% !important;
  }

  .fig-play-state-card h2,
  .fig-play-state-card h3,
  .fig-play-state-answer,
  .fig-play-state-next,
  .fig-play-state-footer strong {
    font-family: Impact, "Arial Narrow", Arial, sans-serif !important;
  }

  .fig-play-state-card h2,
  .fig-play-state-card h3 {
    left: 7.7% !important;
  }

  .fig-play-state-card h2 {
    top: 13.2% !important;
    font-size: 27px !important;
  }

  .fig-play-state-card h3 {
    top: 24.2% !important;
    font-size: 29px !important;
  }

  .fig-play-state-lyrics {
    top: 39.0% !important;
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif !important;
    font-size: 11.6px !important;
    line-height: 1.32 !important;
  }

  .fig-play-state-answer {
    top: 41.067285% !important;
    font-size: 26px !important;
  }

  .fig-play-state-next {
    top: 46.403712% !important;
    font-size: 26px !important;
  }

  .fig-play-state-next small {
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif !important;
  }

  .fig-play-state-controls {
    top: 52.746945% !important;
  }

  .fig-play-state-controls h2,
  .fig-play-state-tips h2,
  .fig-play-state-control b,
  .fig-play-state-control small,
  .fig-play-state-tip,
  .fig-play-state-footer p,
  .fig-play-state-footer a,
  .fig-play-state-footer small {
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif !important;
    letter-spacing: 0 !important;
  }

  .fig-play-state-control b {
    color: #202124 !important;
  }

  .fig-play-state-control small {
    color: #9c9c9c !important;
  }

  .fig-play-state-tips {
    top: 70.224285% !important;
  }

  .fig-play-state-footer strong {
    font-size: 40px !important;
  }
}

@media (max-width: 899px) {
  .screen--play .fig-page--play-song[data-play-state="ended"] > .fig-play-layer,
  .screen--play .fig-page--play-song[data-play-state="correct"] > .fig-play-layer {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .screen--play .fig-page--play-song .fig-play-state-layer {
    display: none;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-layer,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-layer {
    position: absolute;
    inset: 0;
    z-index: 70;
    display: block !important;
    overflow: hidden;
    background: #f3f3f3;
    color: #202124;
    font-family: Arial, "Helvetica Neue", system-ui, sans-serif;
    letter-spacing: 0;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-layer *,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-layer * {
    box-sizing: border-box;
    letter-spacing: 0;
  }

  .fig-play-state-layer button {
    border: 0;
    font: inherit;
    cursor: pointer;
  }

  .fig-play-state-topbar {
    position: absolute;
    left: 5.128205%;
    top: 2.861562%;
    width: 89.74359%;
    height: 3.866976%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 0 12px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .13);
  }

  .fig-play-state-back {
    position: relative;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #eceeef;
  }

  .fig-play-state-back::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 8px;
    width: 10px;
    height: 10px;
    border-left: 3px solid #a6aaad;
    border-bottom: 3px solid #a6aaad;
    transform: rotate(45deg);
  }

  .fig-play-state-topbar h1 {
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
    color: #1f2023;
    font-size: 19px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
  }

  .fig-play-state-balance {
    position: relative;
    width: 91px;
    height: 32px;
    flex: 0 0 auto;
    padding: 0 10px 1px 34px;
    border-radius: 999px;
    background: #3a3a3d;
    color: #f1f1f1;
    text-align: right;
    font-size: 17px;
    line-height: 32px;
    font-weight: 900;
  }

  .fig-play-state-balance::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 5px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, #ffe9a8 0 18%, #ef9c22 42%, #b96713 100%);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.28);
  }

  .fig-play-state-category {
    position: absolute;
    left: 0;
    top: 9.280742%;
    width: 100%;
    height: 4.1%;
    color: #ff861c;
    text-align: center;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 30px;
    line-height: 1;
    text-transform: uppercase;
  }

  .fig-play-state-card {
    position: absolute;
    left: 5.128205%;
    top: 14.53983%;
    width: 89.74359%;
    height: 27.300851%;
    padding: 0;
    border-radius: 30px;
    background: #171717;
    color: #fff;
    overflow: hidden;
  }

  .fig-play-state-progress {
    position: absolute;
    left: 7.9%;
    top: 8.6%;
    width: 73.2%;
    height: 4px;
    border-radius: 8px;
    background: #474246;
  }

  .fig-play-state-score {
    position: absolute;
    right: 16px;
    top: 20px;
    min-width: 40px;
    height: 25px;
    padding: 0 14px;
    border: 2px solid #ff861c;
    border-radius: 999px;
    color: #ff861c;
    text-align: center;
    font-size: 18px;
    line-height: 21px;
    font-weight: 900;
  }

  .fig-play-state-card h2,
  .fig-play-state-card h3 {
    position: absolute;
    left: 8.1%;
    margin: 0;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    line-height: .95;
    font-weight: 900;
  }

  .fig-play-state-card h2 {
    top: 20.4%;
    color: #ff861c;
    font-size: 30px;
  }

  .fig-play-state-card h3 {
    top: 31.4%;
    color: #fff;
    font-size: 31px;
  }

  .fig-play-state-lyrics {
    position: absolute;
    left: 8.1%;
    right: 8.1%;
    top: 50.6%;
    color: #f5f2ef;
    font-size: 12.8px;
    line-height: 1.32;
    font-weight: 800;
  }

  .fig-play-state-lyrics p {
    margin: 0;
  }

  .fig-play-state-spacer {
    height: 13px;
  }

  .fig-play-gap {
    display: inline-flex;
    width: 73px;
    height: 17px;
    align-items: center;
    justify-content: center;
    vertical-align: -2px;
    border-radius: 4px;
    background: #ffe3c3;
    box-shadow: inset 0 -2px 0 #ff861c;
    color: transparent;
  }

  .fig-play-gap--short {
    width: 29px;
  }

  .fig-page--play-song[data-play-state="correct"] .fig-play-gap {
    width: auto;
    height: auto;
    min-width: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: inset 0 -2px 0 #ff861c;
    color: #ff861c;
    vertical-align: baseline;
  }

  .fig-play-state-answer,
  .fig-play-state-next {
    position: absolute;
    left: 5.128205%;
    width: 89.74359%;
    height: 4.87239%;
    border-radius: 999px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 26px;
    line-height: 1;
    pointer-events: auto;
  }

  .fig-play-state-answer {
    top: 42.536736%;
    background: #ff861c;
  }

  .fig-play-state-answer span {
    display: block;
    line-height: 63px;
  }

  .fig-page--play-song[data-play-state="ended"] .fig-play-state-answer__hide,
  .fig-page--play-song[data-play-state="correct"] .fig-play-state-answer__show {
    display: none;
  }

  .fig-play-state-next {
    top: 48.027842%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px 0 18px;
    background: #ff3427;
  }

  .fig-play-state-next small {
    min-width: 72px;
    height: 34px;
    border-radius: 999px;
    background: #bc2418;
    font-family: Arial, "Helvetica Neue", system-ui, sans-serif;
    font-size: 14px;
    line-height: 34px;
    font-weight: 900;
    text-transform: none;
  }

  .fig-play-state-controls {
    position: absolute;
    left: 5.128205%;
    top: 53.905646%;
    width: 89.74359%;
    height: 14.46249%;
  }

  .fig-play-state-controls h2,
  .fig-play-state-tips h2 {
    margin: 0;
    color: #202124;
    font-size: 24px;
    line-height: 1;
    font-weight: 800;
  }

  .fig-play-state-control {
    position: absolute;
    width: 48.25%;
    height: 45.5%;
    padding: 46px 12px 9px;
    border-radius: 8px;
    background: #fff;
    color: #222;
    text-align: left;
    pointer-events: auto;
  }

  .fig-play-state-control:nth-of-type(1) { left: 0; top: 26%; }
  .fig-play-state-control:nth-of-type(2) { right: 0; top: 26%; }
  .fig-play-state-control:nth-of-type(3) { left: 0; bottom: 0; }
  .fig-play-state-control:nth-of-type(4) { right: 0; bottom: 0; }

  .fig-play-state-control::before {
    position: absolute;
    left: 14px;
    top: 14px;
    color: #ff861c;
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
  }

  .fig-play-state-control--buy::before { content: "♪"; }
  .fig-play-state-control--log::before { content: "14"; }
  .fig-play-state-control--winner::before { content: "✦"; }
  .fig-play-state-control--new::before {
    content: "";
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: #ff861c;
  }

  .fig-play-state-control--new::after {
    content: "";
    position: absolute;
    left: 27px;
    top: 22px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid #fff;
  }

  .fig-play-state-control b,
  .fig-play-state-control small {
    display: block;
    line-height: 1.12;
  }

  .fig-play-state-control b {
    font-size: 13.5px;
    font-weight: 800;
  }

  .fig-play-state-control small {
    margin-top: 2px;
    color: #9c9c9c;
    font-size: 12px;
    font-weight: 500;
  }

  .fig-play-state-tips {
    position: absolute;
    left: 5.128205%;
    top: 71.461717%;
    width: 89.74359%;
  }

  .fig-play-state-tip {
    position: relative;
    min-height: 66px;
    margin: 18px 0 0;
    padding: 17px 20px 14px 76px;
    border-radius: 9px;
    background: #e2e2e2;
    color: #28292b;
    font-size: 14px;
    line-height: 1.15;
    font-weight: 700;
  }

  .fig-play-state-tip--link {
    background: #ff861c;
    color: #fff;
  }

  .fig-play-state-tip::before {
    position: absolute;
    left: 25px;
    top: 19px;
    color: #ff861c;
    font-size: 34px;
    line-height: 1;
  }

  .fig-play-state-tip--paper::before { content: "➤"; }
  .fig-play-state-tip--link::before { content: "↻"; color: #fff; }
  .fig-play-state-tip--music::before { content: "♪"; }

  .fig-play-state-footer {
    position: absolute;
    left: 0;
    top: 88.089714%;
    width: 100%;
    height: 11.910286%;
    padding: 34px 28px 0;
    border-radius: 36px 36px 0 0;
    background: #111;
    color: #777;
  }

  .fig-play-state-footer strong {
    position: absolute;
    left: 27px;
    top: 48px;
    color: #ff3427;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: 36px;
    line-height: .8;
    text-transform: uppercase;
    transform: skewY(-5deg);
  }

  .fig-play-state-footer p,
  .fig-play-state-footer a,
  .fig-play-state-footer small {
    position: absolute;
    left: 57.5%;
    margin: 0;
    color: #777;
    font-size: 11px;
    line-height: 1.18;
    font-weight: 600;
  }

  .fig-play-state-footer p { top: 42px; }
  .fig-play-state-footer a { top: 99px; text-decoration: underline; }
  .fig-play-state-footer small { top: 121px; }

  .fig-page--play-song:not([data-play-state="ended"]):not([data-play-state="correct"]) .fig-page-hit--play-correct {
    display: none !important;
  }

  .fig-page--play-song[data-play-state="ended"] .fig-page-hit--play-correct,
  .fig-page--play-song[data-play-state="correct"] .fig-page-hit--play-correct {
    left: 5.128205% !important;
    top: 42.536736% !important;
    width: 89.74359% !important;
    height: 4.87239% !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 899px) {
  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-topbar,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-topbar {
    left: 22px !important;
    top: 39px !important;
    width: 346px !important;
    height: 43px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: url("assets/figma-exact/play-state-topbar-mobile-exact.png") center / 100% 100% no-repeat !important;
    box-shadow: none !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-topbar > *,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-topbar > * {
    opacity: 0 !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-category,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-category {
    left: 0 !important;
    top: 120px !important;
    width: 390px !important;
    height: 34px !important;
    color: transparent !important;
    font-size: 0 !important;
    background: url("assets/figma-exact/play-state-category-mobile-exact.png") center / 100% 100% no-repeat !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-card,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-card {
    left: 22px !important;
    top: 176px !important;
    width: 346px !important;
    height: 347px !important;
    border-radius: 29px !important;
    background: radial-gradient(ellipse 175px 180px at 50% 50%, #2f1802 0%, #26180d 48%, #1a1715 82%, #161616 100%) !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-progress,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-progress {
    left: 28px !important;
    top: 20px !important;
    width: 256px !important;
    height: 4px !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-score,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-score {
    top: 12px !important;
    right: 15px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 20px !important;
    padding: 0 !important;
    line-height: 18px !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-answer,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-answer {
    left: 22px !important;
    top: 530px !important;
    width: 346px !important;
    height: 58px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: url("assets/figma-exact/play-state-answer-show-mobile-exact.png") center / 100% 100% no-repeat !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-answer {
    background-image: url("assets/figma-exact/play-state-answer-hide-mobile-exact.png") !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-answer > *,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-answer > * {
    opacity: 0 !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-next,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-next {
    left: 22px !important;
    top: 595px !important;
    width: 346px !important;
    height: 58px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: url("assets/figma-exact/play-state-next-mobile-exact.png") center / 100% 100% no-repeat !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-next > *,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-next > * {
    opacity: 0 !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-controls,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-controls,
  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-tips,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-tips {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-controls h2,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-controls h2,
  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-tips h2,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-tips h2,
  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-control,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-control,
  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-tip,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-tip {
    position: absolute !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-controls h2,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-controls h2 {
    left: 20px !important;
    top: 681px !important;
    width: 192px !important;
    height: 29px !important;
    background-image: url("assets/figma-exact/play-state-controls-title-mobile-exact.png") !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-control,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-control {
    width: 171px !important;
    height: 84px !important;
    pointer-events: auto !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-control > *,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-control > *,
  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-control::before,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-control::before,
  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-control::after,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-control::after {
    display: none !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-control--buy,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-control--buy {
    left: 21px !important;
    top: 706px !important;
    background-image: url("assets/figma-exact/play-state-control-buy-mobile-exact.png") !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-control--log,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-control--log {
    left: 198px !important;
    top: 706px !important;
    background-image: url("assets/figma-exact/play-state-control-log-mobile-exact.png") !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-control--winner,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-control--winner {
    left: 21px !important;
    top: 794px !important;
    height: 83px !important;
    background-image: url("assets/figma-exact/play-state-control-winner-mobile-exact.png") !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-control--new,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-control--new {
    left: 198px !important;
    top: 794px !important;
    height: 83px !important;
    background-image: url("assets/figma-exact/play-state-control-new-mobile-exact.png") !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-tips h2,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-tips h2 {
    left: 20px !important;
    top: 904px !important;
    width: 130px !important;
    height: 28px !important;
    background-image: url("assets/figma-exact/play-state-tips-title-mobile-exact.png") !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-tip,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-tip {
    left: 22px !important;
    width: 346px !important;
    min-height: 0 !important;
    pointer-events: none !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-tip::before,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-tip::before {
    display: none !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-tip--paper,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-tip--paper {
    top: 931px !important;
    height: 63px !important;
    background-image: url("assets/figma-exact/play-state-tip-random-mobile-exact.png") !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-tip--link,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-tip--link {
    top: 1002px !important;
    height: 63px !important;
    background-image: url("assets/figma-exact/play-state-tip-speaker-mobile-exact.png") !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-tip--music,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-tip--music {
    top: 1073px !important;
    height: 64px !important;
    background-image: url("assets/figma-exact/play-state-tip-music-mobile-exact.png") !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-footer,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-footer {
    left: 0 !important;
    top: 1142px !important;
    width: 390px !important;
    height: 151px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: url("assets/figma-exact/play-state-footer-mobile-exact.png") center / 100% 100% no-repeat !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-footer > *,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-footer > * {
    opacity: 0 !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-card h2,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-card h2,
  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-card h3,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-card h3 {
    font-family: "Alumni Sans", "Arial Narrow", Arial, sans-serif !important;
    line-height: .82 !important;
    font-weight: 900 !important;
    text-transform: none !important;
    transform-origin: left top !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-card h2,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-card h2 {
    left: 25px !important;
    top: 43px !important;
    color: #ff861c !important;
    font-size: 37px !important;
    transform: scaleX(.7) !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-card h3,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-card h3 {
    left: 29px !important;
    top: 80px !important;
    color: #f3f3f3 !important;
    font-size: 35px !important;
    transform: scaleX(.78) !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-lyrics,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-lyrics {
    left: 28px !important;
    right: 28px !important;
    top: 122px !important;
    color: #e8e8e8 !important;
    font-family: Inter, Arial, "Helvetica Neue", system-ui, sans-serif !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
    transform: scaleX(1.08) !important;
    transform-origin: left top !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-lyrics p,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-lyrics p {
    margin: 0 !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-lyrics p:nth-child(n+2):nth-child(-n+6),
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-lyrics p:nth-child(n+7):nth-child(-n+11) {
    display: none !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-spacer,
  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-spacer {
    height: 17px !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-lyrics {
    top: 121px !important;
    color: #e2e2e2 !important;
    font-size: 11.4px !important;
    line-height: 1.62 !important;
    transform: scaleX(1.04) !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-gap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 16px !important;
    border-radius: 2px !important;
    background: #ffe2c2 !important;
    box-shadow: inset 0 -2px 0 #ff861c !important;
    color: transparent !important;
    vertical-align: -2px !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-gap > * {
    opacity: 0 !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-gap {
    width: 62px !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-state-lyrics p:nth-child(7) .fig-play-gap {
    width: 56px !important;
  }

  .screen--play .fig-page--play-song[data-play-state="ended"] .fig-play-gap--short {
    width: 24px !important;
  }

  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-lyrics span {
    color: #ff861c !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
  }

  .screen--play .fig-page--play-song[data-play-state="correct"] .fig-play-state-lyrics {
    top: 122px !important;
    font-size: 10.8px !important;
    line-height: 1.6 !important;
    transform: scaleX(1.1) !important;
  }
}