.my-mts-screen {
  --my-mts-red: #ff0032;
  --my-mts-shadow: 0 0 8px #00000014, 0 4px 8px #00000014;
  width: min(100%, 440px);
  min-height: 100dvh;
  margin-inline: auto;
  padding: env(safe-area-inset-top, 0px) 0 calc(52px + env(safe-area-inset-bottom, 0px));
  background: var(--surface-soft);
  color: var(--text-primary);
  font: 400 14px/20px var(--font-ui);
  font-synthesis: none;
}

.my-mts-screen :is(p, h2, ul) { margin: 0; }
.my-mts-screen ul { padding: 0; list-style: none; }
.my-mts-screen img { display: block; flex: none; }

.my-mts-header { padding: 8px 20px; background: var(--surface-soft); }
.my-mts-profile-row, .my-mts-profile { display: flex; align-items: center; gap: 8px; }
.my-mts-profile { flex: 1; min-width: 0; }
.my-mts-profile > div { min-width: 0; }
.my-mts-profile p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-mts-profile p:first-child { font-size: 12px; line-height: 16px; }
.my-mts-profile p + p { font-weight: 500; }
.my-mts-profile img { border-radius: 12px; }
.my-mts-bell { position: relative; padding: 4px; border-radius: 12px; background: var(--surface); }
.my-mts-bell img + img { position: absolute; top: 1px; right: 1px; }
.my-mts-premium {
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(18.86deg, #9bd5ff 6.25%, #9b93ff 44.27%, #9a8dff 58.33%, #7c86fe 84.9%);
}

.my-mts-search {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  margin-top: 12px;
  padding: 6px 10px 6px 6px;
  border-radius: 12px;
  background: var(--surface);
  color: #969fa8;
  font-size: 17px;
  line-height: 24px;
}

.my-mts-search span { flex: 1; }
.my-mts-screen :is(.my-mts-stories, .my-mts-actions, .my-mts-extra-carousel) {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.my-mts-screen :is(.my-mts-stories, .my-mts-actions, .my-mts-extra-carousel)::-webkit-scrollbar { display: none; }
.my-mts-screen .my-mts-stories { gap: 4px; padding: 8px 20px 16px; }
.my-mts-story { flex: none; padding: 2px; border: 2px solid #ea1f49; border-radius: 20px; }
.my-mts-story > div { position: relative; overflow: hidden; border-radius: 16px; }
.my-mts-story img { object-fit: cover; }
.my-mts-story span {
  position: absolute;
  inset: auto 10px 10px;
  color: #fff;
  font: 500 12px/16px var(--font-ui);
}

.my-mts-family {
  display: flex;
  align-items: center;
  gap: 8px;
  aspect-ratio: 335 / 67;
  width: calc(100% - 40px);
  min-height: 64px;
  margin: 0 20px 20px;
  padding-inline: 16px;
  border-radius: 24px;
  background: var(--surface);
  font-weight: 500;
}

.my-mts-family span { flex: 1; }
.my-mts-account { padding: 26px 20px; border-radius: 32px 32px 24px 24px; background: var(--surface); }
.my-mts-balance-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.my-mts-balance { display: flex; align-items: center; gap: 4px; white-space: nowrap; font: 500 32px/36px var(--font-wide); }
.my-mts-refill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--my-mts-red);
  color: #fff;
  font: 700 10px/12px var(--font-wide);
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.my-mts-screen .my-mts-pay-balance { margin-top: 4px; }
.my-mts-pay-balance span, .my-mts-cost-card p span { color: var(--active); }
.my-mts-costs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(45%, 158px)); gap: 20px; margin-top: 20px; }
.my-mts-cost-card, .my-mts-plan-card { border-radius: 24px; background: var(--surface); box-shadow: var(--my-mts-shadow); }
.my-mts-cost-card { display: flex; flex-direction: column; gap: 8px; min-height: 104px; padding: 16px; font-weight: 500; }
.my-mts-cost-progress {
  height: 6px;
  margin-top: auto;
  border-radius: 8px;
  background: linear-gradient(to right, #014fce 63%, #00d9bc 63% 88.4%, #f55f7e 88.4%);
}

.my-mts-services, .my-mts-action-icon { display: grid; place-items: center; flex: none; align-self: flex-start; }
.my-mts-services img, .my-mts-action-icon img { grid-area: 1 / 1; }
.my-mts-plan { margin-top: 12px; padding: 26px 0; border-radius: 24px; background: var(--surface); }
.my-mts-plan-card { margin-inline: 20px; padding: 16px; }
.my-mts-plan-card h2 { font: 500 14px/20px var(--font-ui); text-transform: uppercase; }
.my-mts-screen .my-mts-allowances { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.my-mts-allowances li { display: grid; gap: 4px; min-width: 0; font-size: 12px; line-height: 16px; }
.my-mts-allowances p { height: 24px; white-space: nowrap; }
.my-mts-allowances strong { font: 500 17px/24px var(--font-ui); }
.my-mts-allowances li > span:last-child { color: var(--text-secondary); }
.my-mts-plan-progress { height: 4px; border-radius: 4px; background: #0097fd; }
.my-mts-screen .my-mts-actions { gap: 12px; margin-block: 2px -12px; padding: 18px 20px 12px; }
.my-mts-actions li {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 12px 16px 12px 12px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 0 16px #00000014, 0 4px 16px #00000014;
  font: 500 14px/16px var(--font-ui);
  white-space: nowrap;
}

.my-mts-action-icon--masked { mask: url('../assets/my-mts-quick-mask.svg') center / 32px 32px no-repeat; }

.my-mts-investment {
  position: relative;
  isolation: isolate;
  height: 128px;
  margin: 16px 20px 10px;
  overflow: hidden;
  border-radius: 20px;
  color: #fff;
}

.my-mts-investment > img { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.my-mts-investment-copy { position: absolute; inset: 14px 71px auto 16px; display: grid; gap: 2px; line-height: 17px; }
.my-mts-investment-copy h2 { font: 700 17px/20px var(--font-ui); }
.my-mts-investment-start {
  position: absolute;
  bottom: 16px;
  left: 16px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  color: var(--text-primary);
  font: 700 10px/12px var(--font-wide);
  letter-spacing: .5px;
  text-transform: uppercase;
}

.my-mts-investment-close { position: absolute; top: 8px; right: 8px; border-radius: 6px; background: #ffffff4d; }
.my-mts-extra { display: grid; gap: 20px; padding: 26px 20px 30px; border-radius: 24px 24px 0 0; background: var(--surface); }
.my-mts-extra-card { display: grid; min-width: 0; gap: 12px; padding: 16px; overflow: hidden; border-radius: 24px; background: var(--surface); box-shadow: 0 0 6px #00000014, 0 4px 16px #00000014; }
.my-mts-extra-header { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.my-mts-extra-header > div { flex: 1; min-width: 0; }
.my-mts-extra-header h2 { font: 500 14px/20px var(--font-ui); }
.my-mts-extra-header p, .my-mts-noise div p { color: var(--text-secondary); }
.my-mts-extra-icon { display: grid; flex: none; place-items: center; }
.my-mts-extra-icon img { grid-area: 1 / 1; }
.my-mts-protector { gap: 16px; padding: 16px 0 0; }
.my-mts-protector .my-mts-extra-header { padding-inline: 16px; }
.my-mts-protector-icon { flex: none; mask: url('../assets/my-mts-protector-mask.svg') center / 36px 36px no-repeat; }
.my-mts-screen .my-mts-protector-status { display: grid; gap: 12px; padding-inline: 16px; }
.my-mts-protector-status li { display: flex; align-items: center; gap: 12px; }
.my-mts-protector-action { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 12px 16px; background: #6384e033; font-weight: 500; }
.my-mts-extra-carousel { gap: 8px; }

.my-mts-game { position: relative; isolation: isolate; flex: 0 0 192px; height: 128px; overflow: hidden; border-radius: 12px; }
.my-mts-game::before { position: absolute; z-index: -2; inset: 12px 0 0; border-radius: inherit; background: var(--my-mts-game-background); content: ''; }
.my-mts-game-art { position: absolute; z-index: -1; top: var(--my-mts-art-top); right: var(--my-mts-art-right); width: var(--my-mts-art-width); height: var(--my-mts-art-height); overflow: hidden; }
.my-mts-game-art img { position: absolute; top: var(--my-mts-image-top, 0px); width: 100%; height: var(--my-mts-image-height, 100%); object-fit: cover; }
.my-mts-game-bonus { position: absolute; top: 21px; left: 12px; }
.my-mts-game strong { position: absolute; top: 65px; left: 12px; max-width: 120px; font: 500 15px/16px var(--font-wide); }
.my-mts-game-detail { position: absolute; bottom: 12px; left: 12px; color: var(--text-secondary); font-size: 14px; line-height: 17px; }
.my-mts-game--tree {
  --my-mts-game-background: linear-gradient(#e7febc, #ffe8d0);
  --my-mts-art-top: 2px;
  --my-mts-art-right: 0px;
  --my-mts-art-width: 112px;
  --my-mts-art-height: 103px;
  --my-mts-image-top: -6.13%;
  --my-mts-image-height: 109.43%;
}

.my-mts-game--card {
  --my-mts-game-background: linear-gradient(0deg, #ffeff6, #ffcacb);
  --my-mts-art-top: -4px;
  --my-mts-art-right: -7px;
  --my-mts-art-width: 95px;
  --my-mts-art-height: 102px;
  --my-mts-image-top: -12.59%;
  --my-mts-image-height: 119.24%;
}

.my-mts-game--mill {
  --my-mts-game-background: linear-gradient(#fff6e6, #ffd7a7);
  --my-mts-art-top: 2px;
  --my-mts-art-right: -21px;
  --my-mts-art-width: 110px;
  --my-mts-art-height: 105px;
  --my-mts-image-top: -3.57%;
  --my-mts-image-height: 105.22%;
}

.my-mts-game--race {
  --my-mts-game-background: linear-gradient(#f9ecf4, #f1daff);
  --my-mts-art-top: 12px;
  --my-mts-art-right: -114px;
  --my-mts-art-width: 186px;
  --my-mts-art-height: 70px;
}

.my-mts-game--race .my-mts-game-art img { object-position: bottom; }
.my-mts-game--letters {
  --my-mts-game-background: linear-gradient(#ffece6, #fed7ca);
  --my-mts-art-top: -12px;
  --my-mts-art-right: -11px;
  --my-mts-art-width: 113px;
  --my-mts-art-height: 113px;
}

.my-mts-game-letter { position: absolute; display: grid; place-items: center; background: linear-gradient(#ffffffe6, #ffffff73); backdrop-filter: blur(1.5px); color: #e6b7b7; font: 500 12px/1 var(--font-wide); }
.my-mts-game-letter--s { top: 23px; right: 19px; width: 14px; height: 14px; border-radius: 3px; font-size: 8px; transform: rotate(-15deg); }
.my-mts-game-letter--t { top: 50px; right: 8px; width: 23px; height: 23px; border-radius: 5px; transform: rotate(18.66deg); }
.my-mts-game-letter--m { top: 40px; right: 63px; width: 19px; height: 19px; border-radius: 4px; transform: rotate(-25.29deg); }
.my-mts-game-letter--m img { width: auto; height: auto; }
.my-mts-products li { flex: 0 0 96px; overflow: hidden; border-radius: 12px; }
.my-mts-products img { object-fit: cover; }
.my-mts-noise { position: relative; gap: 16px; }
.my-mts-noise > img { position: absolute; top: 0; right: 0; object-fit: cover; }
.my-mts-noise > div { position: relative; display: grid; gap: 4px; padding-right: 52px; }
.my-mts-noise h2 { font: 500 17px/20px var(--font-ui); }
.my-mts-screen .my-mts-noise-action { margin: 0 20px; padding: 14px 8px; border-radius: 16px; background: var(--my-mts-red); color: #fff; font: 700 12px/16px var(--font-wide); letter-spacing: .6px; text-align: center; text-transform: uppercase; }

.my-mts-navigation {
  position: fixed;
  z-index: 2;
  bottom: 0;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: min(100%, 440px);
  padding: 0 8px env(safe-area-inset-bottom, 0px);
  transform: translateX(-50%);
  background: var(--surface);
  box-shadow: 0 -1px var(--stroke);
  color: #6e7782;
  font: 400 12px/16px var(--font-ui);
}

.my-mts-navigation > span { display: grid; align-content: center; justify-items: center; gap: 4px; height: 52px; }
.my-mts-navigation [aria-current] { color: var(--my-mts-red); font-weight: 500; }