/* Stage 2 only. Individual translate preserves the app's upright transform,
   selected-card scale, and stationary center. No rotating wrapper or raster. */
.tt-learning-app [data-ui="s2StageStyle"] [data-tt-ring-motion] [data-ui="c.style"] {
  translate: var(--tt-ring-orbit-x, 0px) var(--tt-ring-orbit-y, 0px);
}

/* Restore a compact circular stage-2 layout only. At a 320px viewport, the
   292px lesson - 26px activity padding/border - 2px board border yields 264px.
   Circular 44px hit regions do not overlap at the 109px minimum radius, even
   for the selected 1.04 scale. Stage 4 retains its original phone grid. */
@media (max-width: 619px) {
  .tt-learning-app [data-ui="activityScrollStyle"][data-tt-stage-two-ring] {
    padding: 12px !important;
  }
  .tt-learning-app [data-ui="s2StageStyle"] [data-ui="s2RingBoardStyle"] {
    width: 100% !important;
    padding: 12px 0 14px !important;
  }
  .tt-learning-app [data-ui="s2StageStyle"] [data-ui="s2RingHeadStyle"] {
    padding: 0 10px !important;
  }
  .tt-learning-app [data-ui="s2StageStyle"] [data-tt-ring-motion] {
    display: block !important;
    position: relative !important;
    width: min(290px, 100%) !important;
    min-width: 264px !important;
    height: auto !important;
    aspect-ratio: 1;
    padding: 0 !important;
    margin: 10px auto !important;
  }
  .tt-learning-app [data-ui="s2StageStyle"] [data-tt-ring-motion] [data-ui="c.style"] {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    clip-path: circle(50%);
    transform: var(--tt-ring-original-transform) !important;
    font-size: 24px !important;
    line-height: 1.3 !important;
  }
  .tt-learning-app [data-ui="s2StageStyle"] [data-tt-ring-motion] [data-ui="ringCenterStyle"] {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 108px !important;
    height: 108px !important;
  }
  .tt-learning-app [data-ui="s2StageStyle"] [data-tt-ring-motion] [data-ui="c.style"]:focus-visible {
    box-shadow: inset 0 0 0 3px #197c99 !important;
  }
  .tt-learning-app [data-ui="s2StageStyle"] [data-tt-ring-motion] [data-ui="ringGlyphStyle"] {
    font-size: 62px !important;
  }
}
/* A narrow desktop scrollbar may consume 10–15px of a 320px viewport. */
@media (max-width:360px){
 .tt-learning-app [data-ui="activityScrollStyle"][data-tt-stage-two-ring]{padding:6px!important}
}