/* Simos Camp — private time v2 (owner: privateTime, prefix `pt-`).
 * Gentle pastel stage over the live camp: a soft vignette, an always-visible Stop pill and one card per moment
 * (agreements → consent → everyone's answer → protection → the tent → "… later" → aftercare check-in).
 * Mobile-first; 44 px+ touch targets; safe-area aware; dark-mode aware; reduced-motion aware.
 */
.pt-root {
  --pt-card: linear-gradient(180deg, #fff8fb 0%, #fdf2ff 100%);
  --pt-border: #f4c3d8;
  --pt-ink: #6b3a55;
  --pt-soft: #94667f;
  --pt-rose: #ff8fb1;
  --pt-rose-deep: #e0558a;
  --pt-mint: #d9f7ea; --pt-mint-edge: #9fe3c6; --pt-mint-ink: #22674d;
  --pt-lilac: #efe5ff; --pt-lilac-edge: #d4c2ff;
  --pt-sky: #e3f4ff; --pt-sky-edge: #b7def7; --pt-sky-ink: #2d5877;
  --pt-chip: #fff; --pt-note: rgba(255, 255, 255, .86);
  --pt-shadow: 0 5px 0 rgba(214, 139, 176, .38), 0 16px 34px rgba(90, 40, 70, .26);
  position: absolute; inset: 0; pointer-events: none; font-family: var(--font); color: var(--pt-ink);
  transition: opacity .32s ease;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pt-root {
    --pt-card: linear-gradient(180deg, #4a3042 0%, #3b2c47 100%);
    --pt-border: #9a5f80; --pt-ink: #ffeaf4; --pt-soft: #e9c6d8;
    --pt-mint: #1f4d3f; --pt-mint-edge: #3f8a6f; --pt-mint-ink: #cbf6e3;
    --pt-lilac: #43375e; --pt-lilac-edge: #7a64b0;
    --pt-sky: #243e55; --pt-sky-edge: #4d7aa0; --pt-sky-ink: #d6ecff;
    --pt-chip: #5a3d52; --pt-note: rgba(60, 40, 58, .88);
    --pt-shadow: 0 5px 0 rgba(20, 8, 18, .45), 0 16px 34px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] .pt-root {
  --pt-card: linear-gradient(180deg, #4a3042 0%, #3b2c47 100%);
  --pt-border: #9a5f80; --pt-ink: #ffeaf4; --pt-soft: #e9c6d8;
  --pt-mint: #1f4d3f; --pt-mint-edge: #3f8a6f; --pt-mint-ink: #cbf6e3;
  --pt-lilac: #43375e; --pt-lilac-edge: #7a64b0;
  --pt-sky: #243e55; --pt-sky-edge: #4d7aa0; --pt-sky-ink: #d6ecff;
  --pt-chip: #5a3d52; --pt-note: rgba(60, 40, 58, .88);
  --pt-shadow: 0 5px 0 rgba(20, 8, 18, .45), 0 16px 34px rgba(0, 0, 0, .45);
}
.pt-root.pt-out { opacity: 0; }
.pt-root.pt-out * { pointer-events: none !important; }

/* soft pastel vignette — also keeps world taps from wandering off mid-moment (Stop is the way out) */
.pt-scrim {
  position: absolute; inset: 0; pointer-events: auto;
  background:
    radial-gradient(ellipse 85% 70% at 50% 34%, rgba(255, 214, 232, 0) 52%, rgba(255, 184, 214, .20) 78%, rgba(146, 72, 124, .30) 100%);
  animation: pt-in .7s ease both;
}
.pt-root[data-step="tent"] .pt-scrim, .pt-root[data-step="hearts"] .pt-scrim {
  background:
    radial-gradient(ellipse 80% 64% at 50% 34%, rgba(255, 200, 150, 0) 46%, rgba(255, 170, 150, .22) 74%, rgba(120, 50, 90, .42) 100%);
}

/* ---------- dock: Stop row + card, bottom-centered ---------- */
.pt-dock {
  position: absolute; left: 10px; right: 10px; bottom: calc(var(--safe-bottom) + 12px);
  display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none;
}
.pt-stoprow { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; pointer-events: none; animation: pt-in .5s .1s ease both; }
.sc-btn.pt-stop {
  pointer-events: auto; min-height: 46px; padding: 6px 22px 6px 16px; gap: 8px;
  border-color: #e0708f; color: #fff; font: 700 17px/1 var(--font); letter-spacing: .3px;
  background: linear-gradient(180deg, #ffb0c4 0%, #ff8aa6 100%); box-shadow: 0 4px 0 #c65577, 0 8px 18px rgba(198, 85, 119, .3);
  text-shadow: 0 2px 0 rgba(198, 85, 119, .55);
}
.sc-btn.pt-stop .pt-stop-ico { font-size: 20px; text-shadow: none; }
.sc-btn.pt-stop.pt-stopping { filter: saturate(.6) brightness(1.05); }
.pt-stopnote {
  font-size: 13px; font-weight: 600; color: var(--pt-soft); background: var(--pt-note);
  padding: 4px 12px; border-radius: 999px; box-shadow: 0 2px 0 rgba(214, 139, 176, .25);
}

.pt-card {
  position: relative; pointer-events: auto; width: 100%; max-width: 440px;
  background: var(--pt-card); color: var(--pt-ink);
  border: 3px solid var(--pt-border); border-radius: 26px; box-shadow: var(--pt-shadow);
  padding: 16px 16px 16px; text-align: center;
  max-height: calc(100vh - var(--safe-top, 0px) - var(--safe-bottom, 0px) - 96px); overflow-y: auto; overscroll-behavior: contain;
  animation: pt-pop .42s var(--ease-spring) both;
}
.pt-card::before { /* a faint heart watermark */
  content: '♥'; position: absolute; right: 14px; top: 6px; font-size: 44px; line-height: 1; color: var(--pt-rose); opacity: .12; pointer-events: none;
}

.pt-faces { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 auto 6px; }
.pt-faces .sc-face { border: 3px solid #fff; background: var(--pt-lilac); box-shadow: 0 3px 0 rgba(214, 139, 176, .45); }
.pt-face-fb { display: inline-block; text-align: center; font-weight: 700; color: var(--pt-ink); }
.pt-heart { font-size: 22px; display: inline-block; animation: pt-beat 1.5s ease-in-out infinite; }
.pt-shield { font-size: 26px; margin-left: -18px; margin-top: 34px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .12)); animation: pt-bob 2.2s ease-in-out infinite; }

.pt-turn {
  display: inline-flex; align-items: center; gap: 4px; margin: 0 0 4px; padding: 3px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--pt-ink); background: var(--pt-lilac); border: 2px solid var(--pt-lilac-edge);
}
.pt-title { font-weight: 700; font-size: 20px; line-height: 1.22; margin: 2px 8px 6px; }
.pt-text { font-size: 15px; line-height: 1.42; color: var(--pt-soft); margin: 0 4px; }

.pt-tip {
  display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 16px; text-align: left;
  font-size: 14px; line-height: 1.4; border: 2px solid transparent;
}
.pt-tip-ico { font-size: 18px; line-height: 1.1; flex: none; }
.pt-tip-body b { font-weight: 700; }
.pt-tip.pt-green { background: var(--pt-mint); border-color: var(--pt-mint-edge); color: var(--pt-mint-ink); }
.pt-tip.pt-lilac { background: var(--pt-lilac); border-color: var(--pt-lilac-edge); color: var(--pt-ink); }
.pt-tip.pt-info { background: var(--pt-sky); border-color: var(--pt-sky-edge); color: var(--pt-sky-ink); }

.pt-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.pt-btns .sc-btn { flex: 1 1 130px; max-width: 230px; }
.pt-btns.pt-stack { flex-direction: column; align-items: stretch; gap: 9px; }
.pt-btns.pt-stack .sc-btn { max-width: none; flex: none; }
.pt-bico { font-size: 18px; text-shadow: none; }
.sc-btn.pt-mint {
  border-color: #3fae85; color: #fff; background: linear-gradient(180deg, #7fe0bb 0%, #4cc596 100%);
  box-shadow: 0 4px 0 #2f8a68; text-shadow: 0 2px 0 rgba(47, 138, 104, .6);
}
.pt-card .sc-btn.white { color: #6b3a55; }

.pt-feedback {
  margin-top: 14px; padding: 10px 12px; border-radius: 16px; font-weight: 700; font-size: 15.5px; line-height: 1.35;
  animation: pt-pop .38s var(--ease-spring) both;
}
.pt-feedback.pt-good { background: var(--pt-mint); color: var(--pt-mint-ink); border: 2px solid var(--pt-mint-edge); }
.pt-feedback.pt-care { background: var(--pt-lilac); color: var(--pt-ink); border: 2px solid var(--pt-lilac-edge); }

/* compact cards for the in-between moments (walking, waiting, inside the tent) */
.pt-card.pt-mini { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; }
.pt-card.pt-mini::before { top: 50%; transform: translateY(-50%); }
.pt-mini .pt-faces { margin: 0; flex: none; gap: 2px; }
.pt-mini .pt-faces .pt-heart { font-size: 16px; }
.pt-col { flex: 1 1 auto; min-width: 0; }
.pt-mini .pt-title { font-size: 16.5px; margin: 0 0 2px; }
.pt-mini .pt-text { font-size: 13.5px; margin: 0; }
.pt-dots { display: flex; gap: 4px; flex: none; }
.pt-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--pt-rose); opacity: .35; animation: pt-dot 1.2s ease-in-out infinite; }
.pt-dots i:nth-child(2) { animation-delay: .18s; } .pt-dots i:nth-child(3) { animation-delay: .36s; }

.pt-card.pt-glow { background: linear-gradient(180deg, #fff3ea 0%, #ffe9f2 100%); border-color: #ffc2a8; padding-right: 58px; }
.pt-card.pt-glow::before { display: none; }
:root[data-theme="dark"] .pt-card.pt-glow { background: linear-gradient(180deg, #5a3a36 0%, #4a2f45 100%); border-color: #b37866; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pt-card.pt-glow { background: linear-gradient(180deg, #5a3a36 0%, #4a2f45 100%); border-color: #b37866; } }
.pt-floaties { position: absolute; right: 18px; top: 0; bottom: 0; width: 40px; pointer-events: none; overflow: visible; }
.pt-floaties i { position: absolute; bottom: 10px; left: 50%; font-style: normal; font-size: 15px; opacity: 0; animation: pt-float 2.6s ease-in infinite; }
.pt-floaties i:nth-child(2) { animation-delay: .65s; margin-left: -12px; font-size: 13px; }
.pt-floaties i:nth-child(3) { animation-delay: 1.3s; margin-left: 8px; }
.pt-floaties i:nth-child(4) { animation-delay: 1.95s; margin-left: -4px; font-size: 12px; }

.pt-card.pt-mini { overflow: visible; max-height: none; }

/* ---------- groups: up to 4 faces ---------- */
.pt-faces.pt-many { gap: 3px; flex-wrap: nowrap; }
.pt-faces.pt-many .pt-heart { font-size: 15px; }
.pt-mini .pt-faces.pt-many .pt-heart { font-size: 11px; }
.pt-mini .pt-faces.pt-many .sc-face { border-width: 2px; }
.pt-fwrap { position: relative; display: inline-flex; }
.pt-badge {
  position: absolute; right: -7px; bottom: -6px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1;
  background: var(--pt-chip); border: 2px solid var(--pt-border); box-shadow: 0 2px 0 rgba(214, 139, 176, .35);
  animation: pt-pop .4s .15s var(--ease-spring) both;
}

/* while the moment is over (fade, "… later", aftercare) the Stop pill steps aside */
.pt-root[data-step="fade"] .pt-stoprow, .pt-root[data-step="later"] .pt-stoprow,
.pt-root[data-step="aftercare"] .pt-stoprow, .pt-root[data-step="aftercare2"] .pt-stoprow,
.pt-root[data-step="checkin"] .pt-stoprow, .pt-root[data-step="outside"] .pt-stoprow { display: none; }
.pt-root[data-step="aftercare"] .pt-scrim, .pt-root[data-step="aftercare2"] .pt-scrim, .pt-root[data-step="checkin"] .pt-scrim {
  background:
    radial-gradient(ellipse 84% 66% at 50% 32%, rgba(255, 214, 190, 0) 50%, rgba(255, 190, 170, .20) 76%, rgba(130, 70, 110, .34) 100%);
}

/* ---------- agreements (rel.checkAgreements) ---------- */
.pt-card.pt-warn { border-color: #f0a2a2; background: linear-gradient(180deg, #fff7f5 0%, #fff0f4 100%); }
.pt-card.pt-warn::before { content: '💔'; opacity: .1; }
:root[data-theme="dark"] .pt-card.pt-warn { background: linear-gradient(180deg, #56313a 0%, #45293f 100%); border-color: #c07a86; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pt-card.pt-warn { background: linear-gradient(180deg, #56313a 0%, #45293f 100%); border-color: #c07a86; } }
.pt-lines { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.pt-line {
  font-size: 14.5px; font-weight: 700; line-height: 1.35; padding: 7px 12px; border-radius: 14px;
  background: var(--pt-chip); border: 2px dashed var(--pt-border); color: var(--pt-ink);
}

/* ---------- aftercare check-in ---------- */
.pt-kicker {
  display: inline-block; margin: 2px 0 2px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; color: var(--pt-mint-ink); background: var(--pt-mint); border: 2px solid var(--pt-mint-edge);
}
.pt-feels { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.sc-btn.pt-feel {
  flex-direction: column; justify-content: center; gap: 3px; min-height: 70px; padding: 8px 8px 9px; border-radius: 18px;
  font: 700 15px/1.2 var(--font); color: var(--pt-ink); white-space: normal; text-shadow: none;
  background: var(--pt-chip); border: 3px solid var(--pt-border); box-shadow: 0 4px 0 rgba(214, 139, 176, .45);
}
.pt-feel-ico { font-size: 26px; line-height: 1; }
.pt-feel-label { display: block; }
.sc-btn.pt-feel.pt-f-lovely { background: linear-gradient(180deg, #ffe3ee 0%, #ffd0e2 100%); border-color: #f59ab9; box-shadow: 0 4px 0 #e57ba1; color: #7a2e52; }
.sc-btn.pt-feel.pt-f-okay { background: linear-gradient(180deg, #e8f6ff 0%, #d5ecfb 100%); border-color: #9fcdf0; box-shadow: 0 4px 0 #7fb5dc; color: #2d5877; }
.sc-btn.pt-feel.pt-f-notGreat { background: linear-gradient(180deg, #f3edff 0%, #e6dcff 100%); border-color: #c3b0f2; box-shadow: 0 4px 0 #a893dc; color: #4a3a78; }
.sc-btn.pt-feel.pt-f-uncomfortable { background: linear-gradient(180deg, #fff6e6 0%, #ffecc9 100%); border-color: #efc27a; box-shadow: 0 4px 0 #d8a557; color: #6d4a17; }
.sc-btn.pt-feel:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
.pt-pass {
  pointer-events: auto; margin: 12px auto 0; padding: 8px 14px; min-height: 40px; border: 0; background: none; cursor: pointer;
  font: 700 14px/1.2 var(--font); color: var(--pt-soft); text-decoration: underline; text-underline-offset: 3px;
}
.pt-pass:disabled { opacity: .5; }
.sc-btn.pt-lilacbtn {
  border-color: #9c85e0; color: #fff; background: linear-gradient(180deg, #b9a4ff 0%, #9a82f0 100%);
  box-shadow: 0 4px 0 #7760c4; text-shadow: 0 2px 0 rgba(119, 96, 196, .6);
}
.pt-card.pt-after::before { content: '💬'; }
.pt-checkin .pt-faces { margin-bottom: 12px; }

/* ---------- "… later" — a presentation-only time skip over the black (the camp clock never jumps) ---------- */
.ui-overlay.pt-later-root { pointer-events: auto; }
.pt-later {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  padding: 24px; text-align: center; color: #fff; font-family: var(--font); overflow: hidden;
  background: radial-gradient(ellipse 90% 70% at 50% 42%, #4a2848 0%, #2a1530 55%, #120a14 100%);
  opacity: 0; transition: opacity .5s ease;
}
.pt-later.pt-night { background: radial-gradient(ellipse 90% 70% at 50% 42%, #2b2f66 0%, #1a1b40 55%, #0b0c1e 100%); }
.pt-later.pt-in { opacity: 1; }
.pt-later-stars { position: absolute; inset: 0; pointer-events: none; }
.pt-later-stars i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #ffe9c7; opacity: .15;
  box-shadow: 0 0 6px 1px rgba(255, 220, 180, .55); animation: pt-twinkle 2.4s ease-in-out infinite;
}
.pt-clock {
  position: relative; width: 108px; height: 108px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 40% 34%, #fffaf1 0%, #f7e6d2 100%);
  border: 4px solid #f4c3d8; box-shadow: 0 0 0 7px rgba(255, 143, 177, .16), 0 0 44px rgba(255, 190, 150, .38);
  animation: pt-pop .6s .1s var(--ease-spring) both;
}
.pt-clock::before {
  content: ''; position: absolute; inset: 7px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(150, 90, 120, .6) 0 1.8deg, transparent 1.8deg 30deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 80%, #000 82%); mask: radial-gradient(circle closest-side, transparent 80%, #000 82%);
}
.pt-clock i { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; border-radius: 4px; background: #6b3a55; }
.pt-clock-min {
  width: 4px; height: 40px; margin-left: -2px; background: #e0558a !important;
  transform: rotate(var(--pt-m0, 0deg)); animation: pt-min var(--pt-dur, 3s) cubic-bezier(.45, .05, .3, 1) .35s forwards;
}
.pt-clock-hour {
  width: 6px; height: 26px; margin-left: -3px;
  transform: rotate(var(--pt-h0, 300deg)); animation: pt-hour var(--pt-dur, 3s) cubic-bezier(.45, .05, .3, 1) .35s forwards;
}
.pt-clock b { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #6b3a55; border: 2px solid #fffaf1; }
.pt-later-text {
  font-weight: 700; font-size: clamp(27px, 7.4vw, 44px); line-height: 1.15; letter-spacing: .4px;
  text-shadow: 0 3px 0 rgba(20, 5, 20, .45), 0 0 28px rgba(255, 150, 200, .55);
  animation: pt-later-text .9s .25s ease both;
}
.pt-later-sub { font-size: 22px; letter-spacing: 8px; opacity: .9; animation: pt-in .8s .7s ease both; }

/* ---------- motion ---------- */
@keyframes pt-min { from { transform: rotate(var(--pt-m0, 0deg)); } to { transform: rotate(calc(var(--pt-m0, 0deg) + var(--pt-turns, 1) * 360deg)); } }
@keyframes pt-hour { from { transform: rotate(var(--pt-h0, 300deg)); } to { transform: rotate(calc(var(--pt-h0, 300deg) + var(--pt-turns, 1) * 30deg)); } }
@keyframes pt-twinkle { 0%, 100% { opacity: .12; transform: scale(.8); } 50% { opacity: .9; transform: scale(1.15); } }
@keyframes pt-later-text { from { opacity: 0; transform: translateY(14px); letter-spacing: 3px; } to { opacity: 1; transform: none; } }
@keyframes pt-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pt-pop { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pt-beat { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.2); } 60% { transform: scale(1.05); } }
@keyframes pt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes pt-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes pt-float {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.7); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -54px) scale(1.1); }
}

/* ---------- wider screens ---------- */
@media (min-width: 700px) {
  .pt-dock { bottom: calc(var(--safe-bottom) + 26px); }
  .pt-card { max-width: 460px; padding: 18px 20px; }
  .pt-card.pt-mini { max-width: 440px; }
  .pt-title { font-size: 21px; }
}
@media (max-width: 380px) {
  .pt-title { font-size: 18.5px; }
  .pt-text { font-size: 14.5px; }
  .pt-tip { font-size: 13.5px; }
  .pt-stopnote { font-size: 12px; }
}
@media (max-width: 380px) {
  .sc-btn.pt-feel { min-height: 64px; font-size: 14px; }
  .pt-feel-ico { font-size: 23px; }
  .pt-clock { width: 92px; height: 92px; }
  .pt-clock-min { height: 34px; } .pt-clock-hour { height: 22px; }
}
@media (max-height: 640px) {
  .pt-faces .sc-face { transform: scale(.86); }
  .pt-tip { margin-top: 8px; padding: 8px 10px; }
  .pt-feels { margin-top: 10px; gap: 7px; }
  .sc-btn.pt-feel { min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-heart, .pt-shield, .pt-dots i, .pt-floaties i, .pt-later-stars i, .pt-later-sub { animation: none !important; }
  .pt-floaties { display: none; }
  .pt-clock-min, .pt-clock-hour { animation-duration: .01s !important; animation-delay: 0s !important; }
}