/* Result mobile viewport guard v77.
   Keeps result media, explanation, dials, and Share inside phone width. */
@media (max-width: 639.98px) {
  html[data-step="results"],
  html[data-step="results"] body,
  body[data-step="results"] {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  html[data-step="results"] .app-shell,
  html[data-step="results"] #app.goat-console,
  html[data-step="results"] [data-stage="results"].stage.is-active,
  body[data-step="results"] .app-shell,
  body[data-step="results"] #app.goat-console,
  body[data-step="results"] [data-stage="results"].stage.is-active {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  html[data-step="results"] [data-stage="results"].stage.is-active,
  body[data-step="results"] [data-stage="results"].stage.is-active {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  html[data-step="results"] #app.goat-console [data-stage="results"].stage.is-active .winner-spotlight.winner-spotlight:not(.is-profile-open),
  html[data-step="results"] #app.goat-console [data-stage="results"].stage.is-active .winner-spotlight.winner-spotlight:not(.is-profile-open):has(.result-tuner),
  html[data-step="results"] #app.goat-console [data-stage="results"].stage.is-active .winner-spotlight.winner-spotlight:not(.is-profile-open):has(.result-tuner.is-many),
  body[data-step="results"] #app.goat-console [data-stage="results"].stage.is-active .winner-spotlight.winner-spotlight:not(.is-profile-open),
  body[data-step="results"] #app.goat-console [data-stage="results"].stage.is-active .winner-spotlight.winner-spotlight:not(.is-profile-open):has(.result-tuner),
  body[data-step="results"] #app.goat-console [data-stage="results"].stage.is-active .winner-spotlight.winner-spotlight:not(.is-profile-open):has(.result-tuner.is-many) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "winner-media"
      "winner-copy"
      "winner-controls"
      "winner-share" !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  html[data-step="results"] .winner-media-panel.winner-media-panel,
  body[data-step="results"] .winner-media-panel.winner-media-panel {
    grid-area: winner-media !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    gap: 5px !important;
  }

  html[data-step="results"] .winner-media-panel .winner-medal,
  html[data-step="results"] .winner-media-panel .winner-medal.photo-token.has-photo,
  html[data-step="results"] .winner-media-panel .winner-medal:not(.has-photo),
  html[data-step="results"] .winner-media-panel .ai-model-hero-visual,
  body[data-step="results"] .winner-media-panel .winner-medal,
  body[data-step="results"] .winner-media-panel .winner-medal.photo-token.has-photo,
  body[data-step="results"] .winner-media-panel .winner-medal:not(.has-photo),
  body[data-step="results"] .winner-media-panel .ai-model-hero-visual {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
    box-sizing: border-box !important;
  }

  html[data-step="results"] .winner-copy.winner-copy,
  body[data-step="results"] .winner-copy.winner-copy {
    grid-area: winner-copy !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html[data-step="results"] .winner-copy.winner-copy .result-summary-panel.result-summary-panel,
  body[data-step="results"] .winner-copy.winner-copy .result-summary-panel.result-summary-panel {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-width: 0 !important;
    padding: 10px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html[data-step="results"] .result-summary-copy h3,
  body[data-step="results"] .result-summary-copy h3 {
    font-size: clamp(1.08rem, 5vw, 1.32rem) !important;
    line-height: 1.02 !important;
  }

  html[data-step="results"] .winner-description.winner-description,
  html[data-step="results"] .result-summary-copy .winner-description,
  body[data-step="results"] .winner-description.winner-description,
  body[data-step="results"] .result-summary-copy .winner-description {
    font-size: clamp(0.72rem, 3.2vw, 0.82rem) !important;
    line-height: 1.18 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html[data-step="results"] .winner-spotlight.winner-spotlight:not(.is-profile-open) > .result-tuner.result-tuner,
  body[data-step="results"] .winner-spotlight.winner-spotlight:not(.is-profile-open) > .result-tuner.result-tuner {
    grid-area: winner-controls !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html[data-step="results"] .result-tuner-grid,
  html[data-step="results"] .result-tuner.is-many .result-tuner-grid,
  html[data-step="results"] .result-tuner[data-factor-count] .result-tuner-grid,
  body[data-step="results"] .result-tuner-grid,
  body[data-step="results"] .result-tuner.is-many .result-tuner-grid,
  body[data-step="results"] .result-tuner[data-factor-count] .result-tuner-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html[data-step="results"] .result-tune-card,
  html[data-step="results"] .result-tuner[data-factor-count] .result-tune-card,
  body[data-step="results"] .result-tune-card,
  body[data-step="results"] .result-tuner[data-factor-count] .result-tune-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 72px !important;
    padding: 6px !important;
    gap: 5px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html[data-step="results"] .result-tune-copy,
  body[data-step="results"] .result-tune-copy {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  html[data-step="results"] .result-tune-copy strong,
  body[data-step="results"] .result-tune-copy strong {
    font-size: clamp(0.7rem, 3vw, 0.82rem) !important;
    line-height: 1.02 !important;
  }

  html[data-step="results"] .result-tune-copy em,
  body[data-step="results"] .result-tune-copy em {
    min-width: 42px !important;
    font-size: clamp(0.58rem, 2.3vw, 0.7rem) !important;
    line-height: 1.02 !important;
  }

  html[data-step="results"] .result-tune-control,
  html[data-step="results"] .result-tuner[data-factor-count] .result-tune-control,
  body[data-step="results"] .result-tune-control,
  body[data-step="results"] .result-tuner[data-factor-count] .result-tune-control {
    grid-template-columns: 25px minmax(0, 1fr) 25px !important;
    gap: 3px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html[data-step="results"] .result-tune-meter.result-tune-blocks,
  html[data-step="results"] .result-tuner[data-factor-count] .result-tune-meter.result-tune-blocks,
  body[data-step="results"] .result-tune-meter.result-tune-blocks,
  body[data-step="results"] .result-tuner[data-factor-count] .result-tune-meter.result-tune-blocks {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
  }

  html[data-step="results"] .result-tuner-actions,
  body[data-step="results"] .result-tuner-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 8px !important;
  }

  html[data-step="results"] .result-tuner-actions .result-share-button,
  html[data-step="results"] .result-tuner-actions .result-share-button.result-share-primary.result-share-inline,
  body[data-step="results"] .result-tuner-actions .result-share-button,
  body[data-step="results"] .result-tuner-actions .result-share-button.result-share-primary.result-share-inline {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;
  }
}