/* Browser viewport placement for the approved mobile presentation.
 * Colors, borders and states come from /game/web/*.css; desktop dimensions
 * and control placement adapt here to the authored panoramic scenes. */
html[data-pati-web-design=mobile] #review-main {
  top: var(--pati-visible-top,0px);
  bottom: auto;
  height: var(--pati-visible-height,100svh);
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] {
  --ios-row-gap: 6px;
  --web-edge: 12px;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .game-ui {
  --card-left: var(--web-edge);
  --card-width: calc(100% - var(--web-edge) * 2);
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .round-continue {
  max-width: 268px;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .game-controls .icon-button .pp-icon {
  width: 22px;
  height: 24px;
}
/* Touch scrolling in a panel never changes the fixed game viewport. */
html[data-pati-web-design=mobile] #review-main .page-ui :is(.pp-panel,.pc-catalog) {
  overscroll-behavior: contain;
}
@container (min-width:720px) {
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] :is(.game-ui,.pp-home) {
    --web-edge: clamp(24px,3.6cqw,52px);
    --web-control-width: min(440px,max(320px,calc(var(--scene-x) - var(--web-edge) - 24px)),calc(100cqw - var(--web-edge) * 2));
  }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .game-ui {
    --card-left: var(--web-edge);
    --card-width: var(--web-control-width);
    grid-template-columns: minmax(0,var(--web-control-width)) minmax(0,1fr);
    column-gap: 24px;
    padding: calc(var(--pati-safe-top) + 16px) max(var(--web-edge),var(--pati-safe-right)) calc(var(--pati-safe-bottom) + 24px) max(var(--web-edge),var(--pati-safe-left));
  }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .game-hud {
    grid-column: 1 / -1;
  }
  /* A tablet's software keyboard clips the same panoramic painting. It does
     not ask the original renderer to fit a smaller canvas. */
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-keyboard=true] .scene-canvas {
    height: var(--pati-layout-height,100%);
  }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .game-controls {
    left: max(var(--web-edge),var(--pati-safe-left));
    right: max(var(--web-edge),var(--pati-safe-right));
    top: calc(var(--pati-safe-top) + 16px);
  }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] :is(.question-panel,.answer-dock,.round-continue,.ios-round-error) {
    grid-column: 1;
  }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english]:not([data-ios-keyboard=true]) .question-panel,
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english][data-ios-paper=true] .question-panel {
    grid-column: auto;
  }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category]:not([data-category=english]) .question-panel {
    max-height: min(240px,max(48px,calc(var(--pati-visible-height) - var(--pati-safe-top) - var(--pati-safe-bottom) - 230px)));
  }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-dock {
    width: 100%;
  }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .round-continue {
    grid-column: 1 / -1;
  }
  /* English controls belong below the typewriter, including on the wide
     panorama. The shared component converts its frame position to this grid's
     content origin; the row and keyboard behavior remain unchanged. */
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english][data-ios-playing=true] .game-ui {
    --ios-typewriter-controls-inset: max(var(--web-edge),var(--pati-safe-left));
  }
  /* The original home art stays panoramic; its controls use the same mobile
     sizes and contrast, with menu and sound at opposite upper corners. */
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .pp-home .pp-home-tools {
    left: max(var(--web-edge),var(--pati-safe-left));
    right: max(var(--web-edge),var(--pati-safe-right));
    top: calc(var(--pati-safe-top) + 16px);
    width: auto;
    justify-content: space-between;
  }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .pp-home .pp-home-identity {
    left: max(var(--web-edge),var(--pati-safe-left));
  }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .pp-home .pp-home-actions {
    left: max(var(--web-edge),var(--pati-safe-left));
    width: min(360px,var(--web-control-width));
    bottom: max(24px,calc(var(--pati-safe-bottom) + 4cqh));
    gap: 12px;
  }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .pp-home .pp-home-actions .pp-start {
    min-height: 58px;
  }
}
@container (min-width:720px) and (max-height:520px) {
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .game-ui {
    padding-top: calc(var(--pati-safe-top) + 8px);
    padding-bottom: calc(var(--pati-safe-bottom) + 8px);
    row-gap: 4px;
  }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .game-controls {
    top: calc(var(--pati-safe-top) + 8px);
  }
}
/* Keep keyboard access visible on desktop without altering the mobile skin. */
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] :is(button,a,select,summary):focus-visible {
  outline: 2px solid var(--v11-accent-text,var(--v11-accent));
  outline-offset: 3px;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .pp-pack-dialog .pp-pack-slot:focus-visible {
  outline-color: var(--pack-accent);
  outline-offset: -4px;
}