/* Web uses the approved mobile panels and their existing presentation adapter.
 * Load after /game/web/panels.css and /game/web/discovery.css. These final
 * refinements mirror the native-only block in panels-refinement.css; the
 * original native stylesheet and shared panel markup remain untouched. */
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .pp-home .pp-start {
  font-size: 27px; line-height: 1.1; letter-spacing: .025em;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .pp-home .pp-home-links .pp-link-button {
  font-size: 18px; letter-spacing: .025em;
}
html[data-pati-web-design=mobile] .app-viewport[data-category] .pp-category-panel .pp-panel-kicker {
  margin-left: 56px;
}
html[data-pati-web-design=mobile] .app-viewport[data-category] .pp-category-panel .pp-category-card .pp-category-picture {
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
  aspect-ratio: 5 / 2;
}
html[data-pati-web-design=mobile] .app-viewport[data-category] .pp-category-panel .pp-category-picture img.pp-category-art-wide {
  object-fit: contain;
}
html[data-pati-web-design=mobile] .app-viewport[data-category] .pp-category-panel .pp-category-text {
  gap: 5px;
  padding: 12px 12px 10px;
}
html[data-pati-web-design=mobile] .app-viewport[data-category] .pp-category-panel .pp-category-text > span {
  min-height: 0;
  font-size: 18px;
  line-height: 1.25;
}
html[data-pati-web-design=mobile] .app-viewport[data-category] .pp-category-panel .pp-category-card-foot {
  min-height: 44px;
  margin: auto 12px 0;
  padding: 8px 0;
}
html[data-pati-web-design=mobile] .app-viewport[data-category] .pp-summary-panel .pp-panel-head {
  margin-bottom: 12px;
}
html[data-pati-web-design=mobile] .app-viewport[data-category] .pp-summary-panel .pp-panel-head h1 {
  font-size: 28px;
}
html[data-pati-web-design=mobile] .app-viewport[data-category] .pp-summary-panel .pp-score-hero {
  margin: 4px 0 0;
  padding: 0;
}
html[data-pati-web-design=mobile] .app-viewport[data-category] .pp-summary-panel .pp-score-hero strong {
  font-size: 68px;
  line-height: .95;
}
html[data-pati-web-design=mobile] .app-viewport[data-category] .pp-summary-panel .pp-summary-score {
  padding: 10px 12px;
}
html[data-pati-web-design=mobile] .app-viewport[data-category] .pp-summary-panel .pp-summary-actions .pp-primary {
  min-height: 50px;
}
html[data-pati-web-design=mobile] .app-viewport[data-category] .pp-summary-panel .pp-summary-actions .pp-secondary {
  min-height: 46px;
}
html[data-pati-web-design=mobile] .app-viewport[data-category] .pp-summary-panel .pp-summary-stats {
  padding: 10px 0 0;
}
html[data-pati-web-design=mobile] .app-viewport[data-category] .pp-summary-panel .pp-summary-stats strong {
  font-size: 26px;
}
html[data-pati-web-design=mobile] .app-viewport[data-category] .pp-summary-panel .pp-summary-stats span {
  font-size: 15px;
}
html[data-pati-web-design=mobile] .app-viewport[data-category] .pp-summary-panel .prc-results {
  margin-top: 16px;
  gap: 10px;
}

/* Results follow the preview frame rather than the browser width. Pack grids
 * use their own sheet container in the shared native/web presentation source.
 * World cards retain the native two-column layout. */
@container (max-width: 599px) {
  html[data-pati-web-design=mobile] .app-viewport[data-category] .pp-summary-panel .prc-results {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container (min-width: 600px) {
  html[data-pati-web-design=mobile] .app-viewport[data-category] .pp-summary-panel .prc-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}