/* 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 {
  top: calc(env(safe-area-inset-top, 0px) + 92px) !important;
  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: -7px !important;
  width: 46px !important;
  height: 29px !important;
  overflow: visible !important;
}

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

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

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

.custom-speed-button strong,
.emoji-hud-button strong {
  font-size: 9px !important;
}

/* iOS browsers can drop WebKit text strokes from composited HUD layers. Use
   the same shadow-built outline as the mobile menu labels for the top HUD. */
html.has-touch-controls:not(.is-tablet-device) .speed-title-copy strong {
  -webkit-text-fill-color: #fff !important;
  -webkit-text-stroke: 0 !important;
  paint-order: normal !important;
  text-shadow: var(--mobile-title-outline) !important;
}

html.has-touch-controls:not(.is-tablet-device) #topSpeedValue::after,
html.has-touch-controls:not(.is-tablet-device) #topHeartsValue::after {
  content: none !important;
}

html.has-touch-controls:not(.is-tablet-device) .speed-title-copy span,
html.has-touch-controls:not(.is-tablet-device) .hearts-title .speed-title-copy span,
html.has-touch-controls:not(.is-tablet-device) .wins-badge strong {
  color: #fff !important;
  -webkit-text-fill-color: #fff !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: attr(data-mobile-label);
  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) + 72px) !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 {
    box-sizing: border-box;
    width: 178px !important;
    max-width: 100%;
    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 {
    gap: 2px !important;
    margin: 0 38px 4px !important;
    font-size: 32px !important;
  }

  .rebirth-title-icon {
    width: 48px !important;
    height: 48px !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-speed-icon {
    width: 52px !important;
  }

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

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

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

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

/* Keep the stage status readable without crowding the progress bar on touch devices. */
.stage-title-row {
  grid-template-columns: minmax(0, 1fr) !important;
  row-gap: 2px !important;
}

.stage-title-row > .stage-strip {
  grid-column: 1 !important;
  grid-row: 2 !important;
  justify-self: center !important;
}

.streak-multiplier-hud {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  gap: 1px !important;
  transform: none !important;
  font-size: clamp(9px, 1.7vmin, 12px) !important;
  -webkit-text-stroke-width: 1.5px !important;
}

.streak-multiplier-hud strong {
  font-size: clamp(10px, 1.8vmin, 13px) !important;
}

.streak-multiplier-hud img {
  width: clamp(15px, 2.4vmin, 19px) !important;
  height: clamp(15px, 2.4vmin, 19px) !important;
}

/* Settings owns the top-left corner; the trophy and menu form a lower stack. */
@media (orientation: portrait) {
  .sound-toggle.settings-toggle {
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    left: calc(env(safe-area-inset-left, 0px) + 8px) !important;
  }

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

/* iPad portrait polish. Keep these rules scoped to the iPad class so phones,
   Android tablets, Chromebooks and desktop keep their existing layouts. */
@media (orientation: portrait) and (min-width: 700px) {
  html.is-ipad #topSpeedValue,
  html.is-ipad #topHeartsValue {
    -webkit-text-fill-color: #fff !important;
    -webkit-text-stroke: 0 !important;
    paint-order: normal !important;
    text-shadow: var(--mobile-text-outline) !important;
  }

  html.is-ipad #topSpeedValue::after,
  html.is-ipad #topHeartsValue::after {
    content: none !important;
  }

  /* mobile.css normally hides the full leaderboard. On iPad, reveal the
     already-wired compact version with room joining and private servers. */
  html.is-ipad .leaderboard:not(.hidden) {
    display: block !important;
    top: calc(env(safe-area-inset-top, 0px) + 6px) !important;
    right: calc(env(safe-area-inset-right, 0px) + 7px) !important;
    z-index: 22 !important;
  }

  html.is-ipad .leaderboard-body {
    box-sizing: border-box !important;
    max-height: 50px !important;
    margin: 0 0 4px !important;
    padding: 0 2px 0 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
  }

  html.is-ipad .leaderboard-row:nth-child(n + 4) {
    display: grid !important;
  }

  html.is-ipad .leaderboard-body::-webkit-scrollbar {
    width: 4px !important;
  }

  html.is-ipad .room-code-form .private-server-button {
    padding-right: 1px !important;
    padding-left: 1px !important;
    font-size: 6px !important;
    letter-spacing: -0.1px !important;
  }

  /* Centre the artwork itself instead of relying on per-image offsets. */
  html.is-ipad .icon-button .rebirth-icon-slot,
  html.is-ipad .icon-button .trail-icon-slot,
  html.is-ipad .icon-button .skin-icon-slot,
  html.is-ipad .icon-button .gift-icon-slot,
  html.is-ipad .icon-button .sounds-icon-slot {
    position: absolute !important;
    top: 1px !important;
    left: 50% !important;
    display: grid !important;
    width: 40px !important;
    height: 33px !important;
    margin: 0 !important;
    place-items: center !important;
    transform: translateX(-50%) !important;
  }

  html.is-ipad .rebirth-icon-image,
  html.is-ipad .trail-icon-image,
  html.is-ipad .skin-icon-image,
  html.is-ipad .gift-icon-image,
  html.is-ipad .sounds-icon-image {
    margin: 0 !important;
    object-position: center !important;
    transform: none !important;
    transform-origin: center !important;
  }

  html.is-ipad .rebirth-icon-image,
  html.is-ipad .trail-icon-image {
    width: 40px !important;
    height: 40px !important;
  }

  html.is-ipad .icon-button .skin-icon-slot {
    top: -2px !important;
    width: 46px !important;
    height: 37px !important;
  }

  html.is-ipad .skin-icon-image {
    width: 52px !important;
    height: 37px !important;
  }

  html.is-ipad .gift-icon-image {
    width: 39px !important;
    height: 39px !important;
  }

  html.is-ipad .icon-button .sounds-icon-slot {
    top: -2px !important;
    width: 46px !important;
    height: 38px !important;
  }

  html.is-ipad .sounds-icon-image {
    width: 46px !important;
    height: 38px !important;
  }

  /* The iPad uses two reward columns. Compact every control so reward names
     wrap cleanly and cards no longer collide with duration/day badges. */
  html.is-ipad .daily-modal {
    box-sizing: border-box !important;
    width: min(390px, calc(100vw - 32px)) !important;
    padding: 40px 7px 8px !important;
    overflow: visible !important;
  }

  html.is-ipad .daily-rewards-browser {
    grid-template-columns: 30px minmax(0, 1fr) 30px !important;
    column-gap: 3px !important;
  }

  html.is-ipad .daily-page-arrow {
    width: 30px !important;
    height: 42px !important;
    padding: 0 !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    font-size: 30px !important;
  }

  html.is-ipad .daily-page-arrow > span::before {
    width: 17px !important;
    height: 24px !important;
  }

  html.is-ipad .daily-reward-list {
    gap: 20px 6px !important;
    max-height: calc(100dvh - 108px) !important;
    padding: 19px 1px 7px !important;
  }

  html.is-ipad .daily-card {
    grid-template-rows: 43px minmax(27px, auto) 28px !important;
    row-gap: 3px !important;
    min-height: 124px !important;
    padding: 18px 4px 5px !important;
    border-width: 3px !important;
    border-radius: 9px !important;
  }

  html.is-ipad .daily-day {
    top: -18px !important;
    min-width: 52px !important;
    padding: 3px 5px 5px !important;
    border-width: 2px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
  }

  html.is-ipad .daily-duration {
    top: 4px !important;
    right: -2px !important;
    gap: 2px !important;
    padding: 2px 4px 3px !important;
    border-width: 2px !important;
    font-size: 8px !important;
  }

  html.is-ipad .daily-clock {
    width: 10px !important;
    height: 10px !important;
  }

  html.is-ipad .daily-icon {
    width: 62px !important;
    height: 43px !important;
  }

  html.is-ipad .daily-icon img {
    height: 40px !important;
    max-width: 62px !important;
  }

  html.is-ipad .daily-icon-trail img {
    height: 48px !important;
    max-width: 70px !important;
  }

  html.is-ipad .daily-icon-treadmill img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }

  html.is-ipad .daily-icon-skin img {
    top: -18px !important;
    width: 78px !important;
    height: 88px !important;
  }

  html.is-ipad .daily-card strong,
  html.is-ipad .daily-card-day-2 strong,
  html.is-ipad .daily-card-day-4 strong,
  html.is-ipad .daily-card strong.daily-reward-copy-wins,
  html.is-ipad .daily-card strong.daily-reward-copy-trophyMultiplier,
  html.is-ipad .daily-card strong.daily-reward-copy-treadmill,
  html.is-ipad .daily-card strong.daily-reward-copy-shopDiscount {
    min-height: 27px !important;
    overflow-wrap: anywhere !important;
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: normal !important;
  }

  html.is-ipad .daily-card button {
    min-height: 28px !important;
    padding: 2px 3px 4px !important;
    border-width: 2px !important;
    border-radius: 7px !important;
    font-size: 10px !important;
  }

  html.is-ipad .daily-countdown-text {
    font-size: 11px !important;
  }

  /* A symmetric header keeps Trails centred even with the trophy balance on
     the left, while strict min-widths stop cards growing beyond the modal. */
  html.is-ipad .trail-modal {
    box-sizing: border-box !important;
    width: min(390px, calc(100vw - 32px)) !important;
    padding: 9px 8px 8px !important;
    overflow: hidden !important;
  }

  html.is-ipad .trail-shop-header {
    display: grid !important;
    grid-template-columns: minmax(76px, 1fr) auto minmax(76px, 1fr) !important;
    gap: 4px !important;
    min-height: 40px !important;
    margin: 0 0 6px !important;
  }

  html.is-ipad .trail-balance {
    position: static !important;
    grid-column: 1 !important;
    justify-self: start !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: 68px !important;
    min-height: 25px !important;
    margin: 0 0 0 10px !important;
    padding: 1px 4px 2px !important;
    overflow: hidden !important;
    font-size: 10px !important;
    transform: none !important;
  }

  html.is-ipad .trail-balance strong {
    min-width: 0 !important;
    max-width: 38px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html.is-ipad .trail-balance .trophy-inline-icon {
    width: 17px !important;
    height: 17px !important;
  }

  html.is-ipad .trail-modal h2 {
    grid-column: 2 !important;
    justify-self: center !important;
    margin: 0 !important;
    font-size: 29px !important;
    text-align: center !important;
  }

  html.is-ipad .trail-scroll-wrap,
  html.is-ipad .trail-list {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html.is-ipad .trail-scroll-wrap {
    grid-template-columns: minmax(0, 1fr) 10px !important;
    gap: 3px !important;
  }

  html.is-ipad .trail-list {
    gap: 5px !important;
    padding: 2px 1px 4px !important;
  }

  html.is-ipad .trail-card {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 40px minmax(0, 1fr) 78px !important;
    gap: 5px !important;
    min-height: 56px !important;
    padding: 4px 5px !important;
  }

  html.is-ipad .trail-preview {
    width: 40px !important;
    height: 36px !important;
  }

  html.is-ipad .trail-copy,
  html.is-ipad .trail-copy strong,
  html.is-ipad .trail-copy span {
    min-width: 0 !important;
  }

  html.is-ipad .trail-copy strong {
    font-size: 15px !important;
  }

  html.is-ipad .trail-copy span {
    font-size: 10px !important;
  }

html.is-ipad .trail-buy {
    min-width: 0 !important;
    min-height: 31px !important;
    padding: 2px 3px !important;
    font-size: 10px !important;
  }
}

/* Phone-only HUD cleanup. Tablets and iPads keep the full player card. */
html.has-touch-controls:not(.is-tablet-device) .loading-player-card {
  box-sizing: border-box !important;
  display: grid !important;
  z-index: 32 !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  isolation: auto !important;
}

html.has-touch-controls:not(.is-tablet-device) .loading-player-card::before,
html.has-touch-controls:not(.is-tablet-device) .loading-player-card::after,
html.has-touch-controls:not(.is-tablet-device) .loading-player-avatar,
html.has-touch-controls:not(.is-tablet-device) .loading-player-identity {
  display: none !important;
}

html.has-touch-controls:not(.is-tablet-device) .loading-player-edit {
  position: relative !important;
  inset: auto !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  justify-self: center !important;
  transform: none !important;
}

html.has-touch-controls:not(.is-tablet-device) .loading-player-edit img {
  width: 23px !important;
  height: 23px !important;
}

/* Compact login stays inside its anchor instead of inheriting desktop offsets. */
html.has-touch-controls .account-login-button {
  top: 0;
  left: 0;
  width: 112px !important;
  height: 36px;
}

html.has-touch-controls .account-login-logo {
  flex-basis: 24px;
  width: 24px;
  height: 24px;
}

html.has-touch-controls .account-login-label {
  flex: 1;
  min-width: 0;
}

/* The text buttons need their full width on phones; retain only Generate's icon. */
html.has-touch-controls:not(.is-tablet-device) .player-name-cancel > img,
html.has-touch-controls:not(.is-tablet-device) .player-name-save > img {
  display: none !important;
}

html.has-touch-controls:not(.is-tablet-device) .player-name-cancel,
html.has-touch-controls:not(.is-tablet-device) .player-name-save {
  justify-content: center !important;
  margin-left: 0 !important;
  padding-right: 8px !important;
  padding-left: 8px !important;
  text-indent: 0 !important;
}

@media (orientation: portrait) and (max-width: 699px) {
  html.has-touch-controls:not(.is-tablet-device) .loading-player-card {
    top: calc(env(safe-area-inset-top, 0px) + 68px) !important;
    right: auto !important;
    left: calc(env(safe-area-inset-left, 0px) + 8px) !important;
    translate: none !important;
    transform: none !important;
  }

  html.has-touch-controls:not(.is-tablet-device) .account-session {
    top: calc(env(safe-area-inset-top, 0px) + 124px) !important;
    left: calc(env(safe-area-inset-left, 0px) + 8px) !important;
  }

  html.is-account-login-visible.has-touch-controls:not(.is-tablet-device) .hud-left {
    top: calc(env(safe-area-inset-top, 0px) + 174px) !important;
  }
}

@media (orientation: landscape) {
  html.has-touch-controls:not(.is-tablet-device) .loading-player-card {
    top: 4px !important;
    right: auto !important;
    left: 148px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    translate: none !important;
    transform: none !important;
  }

  html.has-touch-controls:not(.is-tablet-device) .loading-player-edit {
    width: 40px !important;
    height: 40px !important;
  }

  html.has-touch-controls:not(.is-tablet-device) .loading-player-edit img {
    width: 22px !important;
    height: 22px !important;
  }

  html.has-touch-controls:not(.is-tablet-device) .hud-right {
    --phone-landscape-ui-size: clamp(34px, 5.2vw, 40px);
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 4px) !important;
    right: calc(env(safe-area-inset-right, 0px) + 6px) !important;
    left: auto !important;
    display: flex !important;
    width: auto !important;
    height: var(--phone-landscape-ui-size) !important;
    flex-flow: row nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    translate: none !important;
    transform: none !important;
  }

  html.has-touch-controls:not(.is-tablet-device) .hud-right > * {
    flex: 0 0 var(--phone-landscape-ui-size) !important;
    margin: 0 !important;
  }

  html.has-touch-controls:not(.is-tablet-device) .custom-speed-button,
  html.has-touch-controls:not(.is-tablet-device) .emoji-hud-button,
  html.has-touch-controls:not(.is-tablet-device) .hud-right .panel.panel-compact-stat {
    box-sizing: border-box !important;
    width: var(--phone-landscape-ui-size) !important;
    min-width: var(--phone-landscape-ui-size) !important;
    height: var(--phone-landscape-ui-size) !important;
    min-height: var(--phone-landscape-ui-size) !important;
    padding: 2px !important;
    overflow: hidden !important;
    border-width: 2px !important;
    border-radius: 8px !important;
  }

  html.has-touch-controls:not(.is-tablet-device) .custom-speed-button::before,
  html.has-touch-controls:not(.is-tablet-device) .emoji-hud-button::before,
  html.has-touch-controls:not(.is-tablet-device) .hud-right .panel.panel-compact-stat::before {
    inset: 3px !important;
    border-radius: 5px !important;
  }

  html.has-touch-controls:not(.is-tablet-device) .custom-speed-icon,
  html.has-touch-controls:not(.is-tablet-device) .emoji-hud-icon {
    top: -1px !important;
    width: calc(var(--phone-landscape-ui-size) - 4px) !important;
    height: calc(var(--phone-landscape-ui-size) - 13px) !important;
  }

  html.has-touch-controls:not(.is-tablet-device) .custom-speed-icon img,
  html.has-touch-controls:not(.is-tablet-device) .emoji-hud-icon img {
    width: calc(var(--phone-landscape-ui-size) - 5px) !important;
    height: calc(var(--phone-landscape-ui-size) - 9px) !important;
  }

  html.has-touch-controls:not(.is-tablet-device) .emoji-hud-icon.character-hud-icon img {
    width: calc(var(--phone-landscape-ui-size) - 10px) !important;
    height: calc(var(--phone-landscape-ui-size) - 12px) !important;
  }

  html.has-touch-controls:not(.is-tablet-device) .custom-speed-button strong,
  html.has-touch-controls:not(.is-tablet-device) .emoji-hud-button strong,
  html.has-touch-controls:not(.is-tablet-device) .emoji-hud-button.character-hud-button strong {
    margin-bottom: 0 !important;
    font-size: 7px !important;
    line-height: 1 !important;
  }

  html.has-touch-controls:not(.is-tablet-device) body .hud-right .panel.panel-compact-stat > .multiplier-label {
    min-height: 6px !important;
  }

  html.has-touch-controls:not(.is-tablet-device) body .hud-right .panel.panel-compact-stat > .multiplier-label::after {
    font-size: 6px !important;
  }

  html.has-touch-controls:not(.is-tablet-device) body .hud-right .panel.panel-compact-stat > #boost {
    box-sizing: border-box !important;
    width: calc(var(--phone-landscape-ui-size) - 7px) !important;
    margin-top: 1px !important;
    padding: 2px 1px !important;
    border-width: 1px !important;
    border-radius: 5px !important;
    font-size: 9px !important;
  }

  html.has-touch-controls:not(.is-tablet-device) .emoji-menu {
    top: calc(env(safe-area-inset-top, 0px) + 50px) !important;
    right: calc(env(safe-area-inset-right, 0px) + 6px) !important;
  }

  html.has-touch-controls:not(.is-tablet-device) .mobile-stick {
    left: calc(env(safe-area-inset-left, 0px) + 44px) !important;
    inset-inline-start: calc(env(safe-area-inset-left, 0px) + 44px) !important;
  }
}

/* iPad portrait uses the same compact identity control, while landscape keeps the full card. */
@media (orientation: portrait) and (min-width: 700px) {
  html.is-ipad .loading-player-card {
    box-sizing: border-box !important;
    top: calc(env(safe-area-inset-top, 0px) + 68px) !important;
    right: auto !important;
    left: calc(env(safe-area-inset-left, 0px) + 8px) !important;
    display: grid !important;
    z-index: 32 !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    isolation: auto !important;
    translate: none !important;
    transform: none !important;
  }

  html.is-ipad .loading-player-card::before,
  html.is-ipad .loading-player-card::after,
  html.is-ipad .loading-player-card > :not(.loading-player-edit) {
    display: none !important;
  }

  html.is-ipad .loading-player-edit {
    position: relative !important;
    inset: auto !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    justify-self: center !important;
    transform: none !important;
  }

  html.is-ipad .account-session {
    top: calc(env(safe-area-inset-top, 0px) + 124px) !important;
    left: calc(env(safe-area-inset-left, 0px) + 8px) !important;
  }

  html.is-ipad.is-account-login-visible .hud-left {
    top: calc(env(safe-area-inset-top, 0px) + 198px) !important;
  }

  html.is-ipad .icon-button .skin-icon-slot {
    left: 46% !important;
  }

  html.is-ipad .gift-icon-image {
    width: 25px !important;
    height: 25px !important;
  }
}

/* Keep the iPad left stack at the same height through rotation. */
html.is-ipad .account-session {
  top: calc(env(safe-area-inset-top, 0px) + 124px) !important;
  left: calc(env(safe-area-inset-left, 0px) + 8px) !important;
}

html.is-ipad .hud-left {
  top: calc(env(safe-area-inset-top, 0px) + 124px) !important;
  translate: none !important;
  transform: none !important;
}

html.is-ipad.is-account-login-visible .hud-left {
  top: calc(env(safe-area-inset-top, 0px) + 198px) !important;
}