.pause {
  padding: calc(var(--safe-top, 0px) + 12px) 0 calc(var(--safe-bottom, 0px) + 32px);
}
.pause-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
}
.pause-back {
  flex: none;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pause-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
}
.pause-body {
  margin-top: 8px;
}
.pause-loading {
  text-align: center;
  padding: 48px 0;
}
.pause-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.pause-card {
  padding: 16px 18px;
  border-radius: 20px;
  width: 100%;
  box-sizing: border-box;
}
.pause-notice {
  color: var(--muted);
  text-align: center;
}
.pause-circle {
  position: relative;
  width: min(72vw, 260px);
  height: min(72vw, 260px);
  margin: 8px auto 0;
}
.pause-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.pause-track {
  fill: none;
  stroke: rgba(247, 238, 215, .08);
  stroke-width: 8;
}
.pause-ring {
  fill: none;
  stroke: var(--gold, #D7B56D);
  stroke-width: 8;
  stroke-linecap: round;
}
.pause-num,
.pause-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pause-num {
  font-family: var(--serif);
  font-size: 64px;
  color: var(--cream, #F7EED7);
  font-variant-numeric: tabular-nums;
}
.pause-check {
  color: var(--gold, #D7B56D);
}
.pause-check[hidden],
.pause-num[hidden],
.pause-finish[hidden] {
  display: none;
}
.pause-check svg {
  width: 40%;
  height: 40%;
}
.pause-done .pause-check {
  animation: pause-pop 1.2s ease-out both;
}
.pause-caption {
  margin: 0;
  text-align: center;
  font-size: 17px;
  line-height: 1.45;
  max-width: 440px;
}
.pause-finish {
  width: 100%;
}
.pause-finish .btn {
  width: 100%;
  box-sizing: border-box;
}
.pause-note {
  width: 100%;
  box-sizing: border-box;
  min-height: 84px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--cream, #F7EED7);
  font: inherit;
  font-size: 17px;
  line-height: 1.4;
  resize: vertical;
}
.pause-note::placeholder {
  color: var(--faint, #8F93A3);
}
.pause-content {
  margin-top: 24px;
}
.pause-ref {
  margin: 0 0 12px;
  text-align: center;
  color: var(--muted, #B8B2A2);
  font-size: 17px;
}
.pause-scripture,
.pause-prayer {
  font-family: var(--serif);
  color: var(--cream, #F7EED7);
}
.pause-scripture p {
  margin: 0;
  font-size: 19.5px;
  line-height: 1.5;
}
.pause-prayer p {
  margin: 0;
  text-align: center;
  font-size: 22px;
  line-height: 1.5;
}
.pause-vnum {
  color: var(--gold, #D7B56D);
  font-family: var(--sans);
  font-size: .62em;
  line-height: 0;
  vertical-align: super;
}
.pause-thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 32px;
  animation: pause-pop .5s ease-out both;
}
.pause-done-circle {
  width: 136px;
  height: 136px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--gold, #D7B56D);
  color: var(--ink, #1C1710);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pause-done-circle svg {
  width: 56%;
  height: 56%;
  stroke-width: 2.5;
}
.pause-thanks-title {
  margin: 24px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.25;
  color: var(--cream, #F7EED7);
}
.pause-streak {
  margin: 8px 0 0;
  font-size: 18px;
}
.pause-actions {
  margin-top: 32px;
}
.pause-actions .btn {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
@keyframes pause-pop {
  from { opacity: 0; transform: scale(.85); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pause-done .pause-check,
  .pause-thanks {
    animation: none;
  }
}

/* Широкие экраны */
@media (min-width: 700px) {
  .pause-circle { width: 340px; height: 340px; }
  .pause-num { font-size: 84px; }
  .pause-title { font-size: 26px; }
  .pause-caption { font-size: 19px; max-width: 520px; }
  .pause-prayer p { font-size: 24px; }
  .pause-scripture p { font-size: 22px; line-height: 1.6; }
  .pause-ref { font-size: 19px; }
  .pause-note { font-size: 19px; }
}
@media (min-width: 900px), (orientation: landscape) and (min-width: 640px) {
  .pause-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 36px;
    align-items: start;
  }
  .pause-layout .pause-circle { width: 300px; height: 300px; }
  .pause-layout .pause-num { font-size: 72px; }
  .pause-layout .pause-caption { max-width: 300px; }
  .pause-layout > .pause-content {
    margin-top: 0;
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}
@media (min-width: 640px) and (max-width: 899px) and (orientation: landscape) {
  .pause-circle { width: min(260px, 52vh); height: min(260px, 52vh); }
  .pause-circle { width: min(260px, 52dvh); height: min(260px, 52dvh); }
  .pause-num { font-size: 52px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .pause { padding-top: calc(var(--safe-top, 0px) + 6px); padding-bottom: calc(var(--safe-bottom, 0px) + 16px); }
  .pause-layout > .pause-content {
    max-height: calc(100vh - 72px - var(--safe-bottom, 0px));
    max-height: calc(100dvh - 72px - var(--safe-bottom, 0px));
  }
  .pause-layout .pause-circle { width: min(300px, 62vh); height: min(300px, 62vh); }
  .pause-layout .pause-num { font-size: 56px; }
}