/* Mobile-only layout stabilization.
   Loaded with media="(pointer: coarse)" so desktop keeps the existing presentation. */
:root {
  --mobile-text-outline:
    -1px -1px 0 #050306,
    1px -1px 0 #050306,
    -1px 1px 0 #050306,
    1px 1px 0 #050306,
    0 2px 0 #050306;
  --mobile-title-outline:
    -2px -2px 0 #050306,
    2px -2px 0 #050306,
    -2px 2px 0 #050306,
    2px 2px 0 #050306,
    0 3px 0 #050306;
}

html,
body,
button,
input {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
.icon-button,
.custom-speed-button,
.emoji-hud-button,
.emoji-choice,
.trail-buy,
.skin-buy,
.daily-card button {
  touch-action: manipulation;
}

input[type="range"] {
  touch-action: pan-x;
}

.leaderboard {
  display: none !important;
}

.hud-left,
.hud-right,
.emoji-menu {
  z-index: 24;
}

.hud-left {
  left: calc(env(safe-area-inset-left, 0px) + 8px);
}

.menu-grid {
  grid-template-columns: 46px !important;
  gap: 5px !important;
}

.icon-button {
  width: 46px !important;
  height: 46px !important;
  padding: 3px !important;
  border-width: 2px !important;
  border-radius: 9px !important;
}

.icon-button::before {
  inset: 5px !important;
  border-radius: 6px !important;
}

.icon-button span,
.icon-button .rebirth-icon-slot,
.icon-button .trail-icon-slot,
.icon-button .gift-icon-slot {
  width: 32px !important;
  height: 28px !important;
}

.rebirth-icon-image {
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  transform: translate(-4px, -3px) !important;
}

.trail-icon-image {
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  transform: translate(-3px, -2px) !important;
}

.icon-button.skin .skin-icon-slot {
  top: -2px !important;
  width: 46px !important;
  height: 29px !important;
}

.skin-icon-image {
  width: 54px !important;
  height: 38px !important;
  transform: translate(-5px, 0) !important;
}

.gift-icon-image {
  width: 36px !important;
  height: 36px !important;
  transform: translate(-1px, -3px) !important;
}

.icon-button strong,
.custom-speed-button strong,
.emoji-hud-button strong {
  font-size: 9px !important;
  -webkit-text-stroke: 0 !important;
  paint-order: normal !important;
  text-shadow: var(--mobile-text-outline) !important;
}

.hud-right {
  right: calc(env(safe-area-inset-right, 0px) + 8px) !important;
  display: grid !important;
  gap: 7px !important;
  justify-items: end;
  pointer-events: none;
}

.hud-right > * {
  pointer-events: auto;
}

.custom-speed-button,
.emoji-hud-button {
  width: 48px !important;
  height: 48px !important;
  padding: 3px !important;
  border-width: 2px !important;
  border-radius: 9px !important;
}

.hud-right .panel.panel-compact-stat {
  display: grid !important;
  width: 48px !important;
  min-height: 46px !important;
  align-content: center;
  justify-items: center;
  padding: 4px 3px !important;
  overflow: hidden !important;
  border-width: 2px !important;
  border-radius: 9px !important;
}

.hud-right .panel-compact-stat::before {
  inset: 4px !important;
  border-radius: 6px !important;
}

html body .hud-right .panel.panel-compact-stat > .multiplier-label {
  display: grid !important;
  width: 100%;
  min-height: 9px;
  place-items: center;
  overflow: visible !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

html body .hud-right .panel.panel-compact-stat > .multiplier-label::after {
  content: "Boost";
  position: static !important;
  color: #fff !important;
  font-size: 8px !important;
  line-height: 1 !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: var(--mobile-text-outline) !important;
}

html body .hud-right .panel.panel-compact-stat > #boost {
  width: 40px !important;
  margin-top: 2px !important;
  padding: 3px 1px 4px !important;
  overflow: hidden;
  border-width: 2px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap;
  -webkit-text-stroke: 0 !important;
  text-shadow: var(--mobile-text-outline) !important;
}

.emoji-menu {
  right: calc(env(safe-area-inset-right, 0px) + 62px) !important;
  max-width: calc(100vw - 78px);
  grid-template-columns: repeat(4, 43px) !important;
  gap: 6px !important;
  padding: 12px !important;
  border-width: 3px !important;
  border-radius: 13px !important;
  pointer-events: auto;
}

.emoji-choice {
  width: 43px !important;
  height: 43px !important;
  padding: 2px !important;
  border-width: 2px !important;
  border-radius: 11px !important;
}

.emoji-choice img {
  width: 34px !important;
  height: 34px !important;
}

.modal-overlay {
  z-index: 60;
  padding: max(8px, env(safe-area-inset-top, 0px))
    max(8px, env(safe-area-inset-right, 0px))
    max(8px, env(safe-area-inset-bottom, 0px))
    max(8px, env(safe-area-inset-left, 0px));
}

.trail-modal,
.skin-modal,
.daily-modal,
.rebirth-modal,
.custom-speed-modal {
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px) !important;
}

.trail-modal h2,
.skin-modal h2,
.daily-title-box,
.rebirth-modal h2,
.custom-speed-modal h2 {
  -webkit-text-stroke: 0 !important;
  paint-order: normal !important;
  text-shadow: var(--mobile-title-outline) !important;
}

.trail-copy strong,
.trail-copy span,
.trail-buy,
.skin-copy strong,
.skin-copy span,
.skin-buy,
.daily-card strong,
.daily-card button,
.daily-day,
.daily-duration,
.rebirth-level,
.rebirth-multiplier-card,
.rebirth-progress,
.rebirth-button,
.rebirth-modal p {
  font-synthesis: none;
  -webkit-text-stroke: 0 !important;
  paint-order: normal !important;
  text-shadow: var(--mobile-text-outline) !important;
}

.trail-list,
.skin-list,
.daily-reward-list {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.custom-speed-modal {
  width: min(340px, calc(100vw - 24px)) !important;
  padding: 18px 16px 16px !important;
}

@media (orientation: portrait) {
  .hud-right {
    top: calc(env(safe-area-inset-top, 0px) + 156px) !important;
  }

  .emoji-menu {
    top: calc(env(safe-area-inset-top, 0px) + 144px) !important;
  }

  .trail-modal,
  .skin-modal,
  .daily-modal {
    width: min(390px, calc(100vw - 24px)) !important;
    border-width: 3px !important;
    border-radius: 14px !important;
  }

  .trail-modal {
    padding: 9px 8px 8px !important;
  }

  .trail-modal::before,
  .skin-modal::before,
  .daily-modal::before {
    inset: 6px !important;
    border-width: 2px !important;
    border-radius: 10px !important;
  }

  .trail-close,
  .skin-close,
  .daily-close {
    top: 7px !important;
    right: 8px !important;
    width: 36px !important;
    height: 36px !important;
    border-width: 3px !important;
    border-radius: 9px !important;
    font-size: 23px !important;
  }

  .trail-shop-header {
    display: grid !important;
    grid-template-columns: minmax(78px, max-content) minmax(0, 1fr) !important;
    gap: 5px !important;
    min-height: 40px !important;
    margin: 0 40px 6px 0 !important;
  }

  .trail-balance {
    position: static !important;
    max-width: 104px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 2px 5px 3px !important;
    font-size: 13px !important;
    transform: none !important;
  }

  .trail-balance .trophy-inline-icon {
    width: 22px !important;
    height: 22px !important;
  }

  .trail-modal h2 {
    min-width: 0 !important;
    overflow: visible !important;
    font-size: clamp(24px, 8vw, 32px) !important;
    text-overflow: clip !important;
  }

  .trail-scroll-wrap {
    grid-template-columns: minmax(0, 1fr) 12px !important;
    gap: 4px !important;
  }

  .trail-list {
    max-height: calc(100dvh - 120px) !important;
    gap: 5px !important;
    padding: 2px 1px 4px 0 !important;
  }

  .trail-card {
    grid-template-columns: 44px minmax(0, 1fr) minmax(70px, 86px) !important;
    grid-template-areas: "preview copy buy";
    gap: 5px !important;
    min-height: 60px !important;
    padding: 5px !important;
    overflow: hidden !important;
    border-width: 3px !important;
    border-radius: 10px !important;
  }

  .trail-preview {
    grid-area: preview;
    height: 38px !important;
  }

  .trail-copy {
    grid-area: copy;
    min-width: 0;
    gap: 3px !important;
    overflow: hidden !important;
  }

  .trail-copy strong {
    overflow: hidden !important;
    font-size: clamp(14px, 4.2vw, 18px) !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .trail-copy span {
    overflow: hidden !important;
    font-size: clamp(9px, 2.7vw, 12px) !important;
    line-height: 1 !important;
    text-overflow: ellipsis;
    white-space: nowrap !important;
  }

  .trail-buy {
    grid-area: buy;
    width: 100%;
    min-height: 34px !important;
    padding: 3px !important;
    overflow: hidden !important;
    font-size: clamp(9px, 2.8vw, 12px) !important;
    white-space: nowrap;
  }

  .skin-modal {
    padding: 7px 8px 8px !important;
  }

  .skin-shop-header {
    display: grid !important;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
    grid-template-areas:
      "title title"
      "balance reset";
    gap: 5px !important;
    min-height: 0 !important;
    margin: 0 0 5px !important;
  }

  .skin-modal h2 {
    grid-area: title;
    justify-self: center;
    width: calc(100% - 84px);
    font-size: clamp(27px, 9vw, 38px) !important;
  }

  .skin-balance,
  .skin-reset-timer {
    position: static !important;
    transform: none !important;
  }

  .skin-balance {
    grid-area: balance;
    justify-self: start;
    padding: 2px 6px 3px !important;
    font-size: 13px !important;
  }

  .skin-reset-timer {
    grid-area: reset;
    justify-self: end;
    grid-template-columns: 24px minmax(0, auto) !important;
    padding: 2px 4px 3px 1px !important;
  }

  .skin-reset-timer > span {
    width: 24px !important;
    height: 24px !important;
  }

  .skin-reset-timer em {
    max-width: 78px;
    overflow: hidden;
    font-size: 9px !important;
    text-overflow: ellipsis;
  }

  .skin-reset-timer strong {
    font-size: 10px !important;
  }

  .skin-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: 168px !important;
    gap: 6px !important;
    height: auto !important;
    max-height: calc(100dvh - 116px) !important;
    padding: 5px !important;
    overflow-y: auto !important;
  }

  .skin-card-shell,
  .skin-card-shell.is-wide,
  .skin-card-shell.is-tall {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  .skin-card,
  .skin-card.has-skin-image {
    grid-template-rows: 94px minmax(20px, auto) 34px !important;
    gap: 3px !important;
    height: 100%;
    padding: 5px !important;
  }

  .skin-preview-image {
    height: 112px !important;
    max-width: 96% !important;
  }

  .skin-card[data-skin-card="default"] .skin-preview-image,
  .skin-card[data-skin-card="skater_cap"] .skin-preview-image,
  .skin-card[data-skin-card="pirate"] .skin-preview-image {
    height: 142px !important;
    bottom: -48px !important;
  }

  .skin-card[data-skin-card="street_runner"] .skin-preview-image {
    height: 92px !important;
    bottom: 0 !important;
  }

  .skin-card[data-skin-card="winter_hero"] .skin-preview-image {
    width: 94% !important;
    height: auto !important;
  }

  .skin-copy strong {
    overflow: hidden;
    font-size: clamp(14px, 4.3vw, 18px) !important;
    line-height: 1 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .skin-buy {
    min-height: 32px !important;
    margin-top: 0 !important;
    padding: 2px 4px !important;
    overflow: hidden;
    font-size: 12px !important;
    white-space: nowrap;
  }

  .daily-modal {
    overflow: visible !important;
    padding: 42px 8px 8px !important;
  }

  .daily-modal .daily-title-box {
    top: -34px !important;
    margin: 0 auto !important;
    font-size: clamp(22px, 7.8vw, 32px) !important;
  }

  .daily-reward-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 25px 8px !important;
    max-height: calc(100dvh - 112px) !important;
    padding: 25px 2px 8px !important;
    overflow-y: auto !important;
  }

  .daily-card {
    grid-template-rows: 52px minmax(30px, auto) 32px !important;
    row-gap: 4px !important;
    min-height: 142px !important;
    padding: 22px 5px 6px !important;
  }

  .daily-day {
    top: -22px !important;
    font-size: 15px !important;
  }
}

@media (orientation: landscape) {
  .sound-toggle {
    top: calc(env(safe-area-inset-top, 0px) + 5px) !important;
    left: calc(env(safe-area-inset-left, 0px) + 7px) !important;
    width: 44px !important;
    height: 44px !important;
  }

  .hud-left {
    top: calc(env(safe-area-inset-top, 0px) + 60px) !important;
    left: calc(env(safe-area-inset-left, 0px) + 8px) !important;
    gap: 4px !important;
    transform: none !important;
  }

  .wins-badge {
    gap: 0 !important;
    font-size: 22px !important;
  }

  .wins-badge span {
    width: 29px !important;
    height: 29px !important;
  }

  .hud-right {
    top: calc(env(safe-area-inset-top, 0px) + 68px) !important;
  }

  .emoji-menu {
    top: calc(env(safe-area-inset-top, 0px) + 112px) !important;
  }

  .hud-bottom {
    right: 116px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
    left: 116px !important;
  }

  .stage-strip {
    width: min(178px, 100%) !important;
    margin-bottom: 3px !important;
    padding: 2px 8px 3px !important;
    font-size: 12px !important;
  }

  .progress-track {
    height: 36px !important;
  }

  .progress-label {
    padding: 2px 8px !important;
    font-size: clamp(10px, 1.8vw, 14px) !important;
  }

  .mobile-stick {
    left: calc(env(safe-area-inset-left, 0px) + 52px) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 7px) !important;
    width: 96px !important;
    height: 96px !important;
  }

  .mobile-jump {
    right: calc(env(safe-area-inset-right, 0px) + 12px) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
    width: 78px !important;
    height: 78px !important;
  }

  .modal-overlay {
    padding: 8px max(66px, env(safe-area-inset-right, 0px)) 8px max(66px, env(safe-area-inset-left, 0px));
  }

  .trail-modal {
    width: min(650px, calc(100vw - 164px)) !important;
    padding: 8px !important;
    overflow: hidden !important;
    border-width: 3px !important;
    border-radius: 14px !important;
  }

  .trail-modal::before {
    inset: 5px !important;
    border-width: 2px !important;
    border-radius: 10px !important;
  }

  .trail-close,
  .skin-close,
  .daily-close,
  .rebirth-close {
    top: 6px !important;
    right: 8px !important;
    width: 34px !important;
    height: 34px !important;
    border-width: 3px !important;
    border-radius: 9px !important;
    font-size: 22px !important;
  }

  .trail-shop-header {
    display: grid !important;
    grid-template-columns: minmax(84px, max-content) minmax(0, 1fr) !important;
    gap: 6px !important;
    min-height: 38px !important;
    margin: 0 38px 4px 0 !important;
  }

  .trail-balance {
    position: static !important;
    max-width: 110px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 2px 6px 3px !important;
    font-size: 14px !important;
    transform: none !important;
  }

  .trail-modal h2 {
    min-width: 0 !important;
    overflow: visible !important;
    font-size: 27px !important;
    text-overflow: clip !important;
  }

  .trail-scroll-wrap {
    grid-template-columns: minmax(0, 1fr) 12px !important;
    gap: 4px !important;
  }

  .trail-list {
    max-height: calc(100dvh - 70px) !important;
    gap: 4px !important;
    padding: 1px !important;
  }

  .trail-card {
    grid-template-columns: 44px minmax(0, 1fr) 94px !important;
    grid-template-areas: "preview copy buy";
    gap: 6px !important;
    min-height: 56px !important;
    padding: 4px 5px !important;
    overflow: hidden !important;
    border-width: 3px !important;
    border-radius: 9px !important;
  }

  .trail-preview {
    grid-area: preview;
    height: 36px !important;
  }

  .trail-copy {
    grid-area: copy;
    min-width: 0;
    gap: 2px !important;
    overflow: hidden !important;
  }

  .trail-copy strong {
    overflow: hidden !important;
    font-size: 17px !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .trail-copy span {
    overflow: hidden !important;
    font-size: 11px !important;
    line-height: 1 !important;
    text-overflow: ellipsis;
    white-space: nowrap !important;
  }

  .trail-buy {
    grid-area: buy;
    width: 100%;
    min-height: 32px !important;
    padding: 2px 4px !important;
    overflow: hidden !important;
    font-size: 11px !important;
    white-space: nowrap;
  }

  .skin-modal {
    width: min(760px, calc(100vw - 140px)) !important;
    padding: 6px 8px 8px !important;
    overflow: hidden !important;
    border-width: 3px !important;
    border-radius: 14px !important;
  }

  .skin-modal::before {
    inset: 5px !important;
    border-width: 2px !important;
    border-radius: 10px !important;
  }

  .skin-shop-header {
    min-height: 38px !important;
    margin: 0 38px 4px 4px !important;
  }

  .skin-modal h2 {
    font-size: 30px !important;
  }

  .skin-balance {
    padding: 2px 6px 3px !important;
    font-size: 13px !important;
  }

  .skin-reset-timer {
    grid-template-columns: 25px auto !important;
    padding: 2px 4px 3px 2px !important;
  }

  .skin-reset-timer > span {
    width: 25px !important;
    height: 25px !important;
  }

  .skin-reset-timer em {
    font-size: 9px !important;
  }

  .skin-reset-timer strong {
    font-size: 10px !important;
  }

  .skin-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: 136px !important;
    gap: 6px !important;
    height: 278px !important;
    max-height: calc(100dvh - 72px) !important;
    padding: 5px !important;
    overflow-y: auto !important;
  }

  .skin-card-shell,
  .skin-card-shell.is-wide,
  .skin-card-shell.is-tall {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  .skin-card,
  .skin-card.has-skin-image {
    grid-template-rows: 75px minmax(18px, auto) 28px !important;
    gap: 2px !important;
    height: 100%;
    min-height: 0 !important;
    padding: 4px !important;
  }

  .skin-preview-image {
    height: 100px !important;
    max-width: 96% !important;
  }

  .skin-card[data-skin-card="default"] .skin-preview-image,
  .skin-card[data-skin-card="skater_cap"] .skin-preview-image,
  .skin-card[data-skin-card="pirate"] .skin-preview-image {
    height: 122px !important;
    bottom: -40px !important;
  }

  .skin-card[data-skin-card="street_runner"] .skin-preview-image {
    height: 82px !important;
    bottom: 0 !important;
  }

  .skin-card[data-skin-card="winter_hero"] .skin-preview-image {
    width: 94% !important;
    height: auto !important;
  }

  .skin-copy strong {
    overflow: hidden;
    font-size: clamp(13px, 2vw, 17px) !important;
    line-height: 1 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .skin-buy {
    min-height: 28px !important;
    margin-top: 0 !important;
    padding: 2px 4px !important;
    overflow: hidden;
    border-width: 2px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }

  .daily-modal {
    width: min(820px, calc(100vw - 104px)) !important;
    padding: 46px 8px 8px !important;
    overflow: visible !important;
    border-width: 3px !important;
    border-radius: 14px !important;
  }

  .daily-modal::before {
    inset: 5px !important;
    border-width: 2px !important;
    border-radius: 10px !important;
  }

  .daily-modal .daily-title-box {
    top: -39px !important;
    margin: 0 auto !important;
    padding: 1px 9px 3px 4px !important;
    font-size: 23px !important;
  }

  .daily-reward-list {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 14px 5px !important;
    max-height: calc(100dvh - 76px) !important;
    padding: 14px 2px 4px !important;
    overflow-y: auto !important;
  }

  .daily-card {
    grid-template-rows: 38px minmax(24px, auto) 28px !important;
    row-gap: 3px !important;
    min-height: 116px !important;
    padding: 15px 4px 5px !important;
    border-width: 3px !important;
    border-radius: 9px !important;
  }

  .daily-day {
    top: -15px !important;
    min-width: 48px !important;
    padding: 3px 5px 4px !important;
    font-size: 11px !important;
  }

  .daily-duration {
    top: 5px !important;
    right: -3px !important;
    padding: 2px 4px 3px !important;
    font-size: 9px !important;
  }

  .daily-icon {
    width: 58px !important;
    height: 38px !important;
  }

  .daily-icon img {
    height: 36px !important;
    max-width: 58px !important;
  }

  .daily-icon-skin img {
    top: -16px !important;
    width: 82px !important;
    height: 94px !important;
  }

  .daily-card strong,
  .daily-card-day-4 strong {
    min-height: 24px !important;
    font-size: 11px !important;
  }

  .daily-card button {
    min-height: 27px !important;
    padding: 2px 3px 3px !important;
    font-size: 11px !important;
  }

  .rebirth-modal {
    width: min(620px, calc(100vw - 136px)) !important;
    padding: 9px 12px 10px !important;
    overflow-y: auto !important;
    border-width: 3px !important;
    border-radius: 14px !important;
  }

  .rebirth-modal::before {
    inset: 5px !important;
    border-width: 2px !important;
    border-radius: 10px !important;
  }

  .rebirth-modal h2 {
    margin: 0 38px 4px !important;
    font-size: 32px !important;
  }

  .rebirth-title-icon {
    width: 38px !important;
    height: 38px !important;
  }

  .rebirth-level {
    width: min(240px, 72%) !important;
    margin-bottom: 5px !important;
    padding: 5px 8px !important;
    font-size: 27px !important;
  }

  .rebirth-multiplier-row {
    gap: 4px !important;
    margin-bottom: 4px !important;
  }

  .rebirth-multiplier-card {
    min-height: 50px !important;
    padding: 4px 2px !important;
    font-size: 15px !important;
  }

  .rebirth-modal p {
    margin: 3px 0 4px !important;
    font-size: 14px !important;
  }

  .rebirth-progress {
    padding: 5px 8px !important;
    font-size: 18px !important;
  }

  .rebirth-actions {
    margin-top: 6px !important;
  }

  .rebirth-button {
    min-height: 40px !important;
    font-size: 22px !important;
  }
}