/* ==========================================================================
   SESSIONS - 3D Digital Sex Tablets, filters, detail page and the
   full-screen couple mode. Uses the Velvet tokens (velvet.css).
   ========================================================================== */

/* ---------- 1. The 3D device ---------- */
.fp-3d { position: relative; }
.fp-3d__stage {
  --dz: 16px; --bx: 9deg; --by: -17deg; --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%;
  display: block; position: relative; perspective: 1300px; padding: 10px 14px 34px; color: inherit;
  animation: fp-3d-float 7s ease-in-out infinite;
}
.fp-3d:nth-child(2n) .fp-3d__stage { animation-delay: -2.4s; }
.fp-3d:nth-child(3n) .fp-3d__stage { animation-delay: -4.1s; }
@keyframes fp-3d-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* The capsule: white body + theme-colour cap, glossy like a real pill */
.fp-pill-box { position: relative; padding: 18px 6px 30px; }
.fp-pill {
  --tilt: -11deg; --cap: var(--t1);
  position: relative; aspect-ratio: 2.3 / 1; transform-style: preserve-3d;
  transform: rotateZ(var(--tilt)) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .7s var(--ease-out);
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.45));
}
[data-theme="noir"] .fp-pill { --cap: #221a26; }
[data-theme="gold"] .fp-pill { --cap: #f0993a; }
.fp-3d__stage.is-live .fp-pill { transition: transform .12s linear; }
a.fp-3d__stage:hover .fp-pill, a.fp-3d__stage:focus-visible .fp-pill { --tilt: -5deg; }

.fp-pill__face { position: absolute; inset: 0; display: flex; align-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fp-pill__face--back { transform: rotateY(180deg); flex-direction: row-reverse; }

/* body (white half) sits slightly thinner, the cap slides over it */
.fp-pill__body {
  position: relative; z-index: 1; width: 61%; height: 90%; overflow: hidden;
  display: flex; align-items: center; padding: 0 7% 0 13%;
  border-radius: 999px 0 0 999px;
  background:
    radial-gradient(130% 150% at 80% 22%, transparent 52%, rgba(40,30,40,.28) 100%),
    linear-gradient(180deg, #ffffff 0%, #f4f1f3 26%, #d9d4d8 62%, #a7a1a6 100%);
}
.fp-pill__face--back .fp-pill__body { border-radius: 0 999px 999px 0; padding: 0 13% 0 7%; justify-content: flex-end; text-align: right;
  background: radial-gradient(130% 150% at 20% 22%, transparent 52%, rgba(40,30,40,.28) 100%), linear-gradient(180deg, #ffffff 0%, #f4f1f3 26%, #d9d4d8 62%, #a7a1a6 100%); }
.fp-pill__cap {
  position: relative; z-index: 2; width: 43%; height: 100%; margin-left: -4%;
  display: flex; align-items: center; justify-content: center; gap: 6px; padding-left: 4%;
  border-radius: 10px 999px 999px 10px / 50% 999px 999px 50%;
  background:
    radial-gradient(130% 150% at 22% 20%, transparent 50%, rgba(0,0,0,.3) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--cap) 62%, #fff) 0%, var(--cap) 34%, color-mix(in srgb, var(--cap) 72%, #000) 100%);
  box-shadow: -4px 0 7px -2px rgba(0,0,0,.35), inset 2px 0 0 rgba(255,255,255,.18);
}
.fp-pill__face--back .fp-pill__cap { margin: 0 -4% 0 0; padding: 0 4% 0 0; border-radius: 999px 10px 10px 999px / 999px 50% 50% 999px; box-shadow: 4px 0 7px -2px rgba(0,0,0,.35), inset -2px 0 0 rgba(255,255,255,.18); }

/* specular gloss running along the top of both halves */
.fp-pill__body::before, .fp-pill__cap::before {
  content: ""; position: absolute; top: 13%; height: 15%; border-radius: 999px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95) 40%, rgba(255,255,255,0));
  filter: blur(1.5px);
}
.fp-pill__body::before { left: 16%; right: 0; }
.fp-pill__cap::before { left: 4%; right: 16%; opacity: .55; }
/* soft reflection of the theme colour at the bottom of the white half */
.fp-pill__body::after { content: ""; position: absolute; left: 20%; right: 0; bottom: 6%; height: 18%; border-radius: 999px; background: color-mix(in srgb, var(--cap) 40%, transparent); filter: blur(8px); opacity: .45; }

/* imprints */
.fp-pill__print {
  position: relative; z-index: 1; font-family: var(--f-display); font-style: italic; font-weight: 600;
  font-size: clamp(.95rem, .75rem + .7vw, 1.2rem); line-height: 1.02; color: #5a1b35; text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255,255,255,.75);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fp-pill__print--md { font-size: clamp(.82rem, .68rem + .5vw, 1rem); }
.fp-pill__print--xs { font-size: clamp(.7rem, .6rem + .4vw, .84rem); line-height: 1.08; }
.fp-pill__print--sm { font-family: var(--f-body); font-style: normal; font-size: .58rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: rgba(90,27,53,.7); }
.fp-pill__mark { display: flex; align-items: center; width: 58%; opacity: .96; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.fp-pill__mark img { display: block; width: 100%; height: auto; }
.fp-pill-info__phases { display: inline-flex; align-items: center; gap: .45rem; }
.fp-pill-info__state { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.3); border: 1px solid var(--line-strong); color: var(--text-2); }
.fp-pill-info__state .ic { width: 12px; height: 12px; }
.fp-pill-info__state.is-open { color: var(--ok); }

/* info under the capsule */
.fp-pill-info { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; border-radius: 20px; background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); border: 1px solid var(--line); transition: border-color var(--t-med); }
a.fp-3d__stage:hover .fp-pill-info { border-color: color-mix(in srgb, var(--t1) 45%, transparent); }
.fp-pill-info__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--text-3); }
.fp-pill-info__cat { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--t2); }
.fp-pill-info__cat .ic { width: 14px; height: 14px; flex: none; }
.fp-pill-info__phases { flex: none; }
.fp-pill-info__name { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem, 1rem + .8vw, 1.55rem); line-height: 1.05; color: #fff; margin: 0; text-wrap: balance; }
.fp-pill-info__tag { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--text-2); }
.fp-pill-info__spec { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-pill-info__spec span { display: inline-flex; align-items: center; gap: .3rem; padding: 4px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; color: var(--text-2); background: rgba(0,0,0,.25); border: 1px solid var(--line); }
.fp-pill-info__spec .ic { width: 13px; height: 13px; color: var(--t2); }
.fp-pill-info__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 2px; }
.fp-pill-info__price { display: inline-flex; align-items: baseline; gap: .4rem; font-weight: 800; color: #fff; font-size: 1.15rem; }
.fp-pill-info__price s { font-weight: 500; font-size: .75rem; color: var(--text-3); }
.fp-pill-info__price--ok { color: var(--gold); font-size: .8rem; letter-spacing: .12em; align-items: center; }
.fp-pill-info__price--ok .ic { width: 15px; height: 15px; }
.fp-pill-info__go { display: inline-flex; align-items: center; gap: .3rem; padding: 7px 13px; border-radius: 999px; background: #fff; color: var(--ink-900); font-weight: 800; font-size: .78rem; box-shadow: 0 0 30px -6px var(--t1); }
.fp-pill-info__go .ic { width: 14px; height: 14px; }

.fp-3d__shadow { position: absolute; left: 14%; right: 10%; bottom: 0; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.75), transparent); filter: blur(6px); z-index: -1; transition: transform .6s var(--ease-out), opacity .6s; }
a.fp-3d__stage:hover .fp-3d__shadow { transform: scaleX(.9); opacity: .8; }
.fp-3d__stage::after { /* theme glow behind the capsule */ content: ""; position: absolute; inset: 4% 8% 55%; z-index: -2; border-radius: 40%; background: var(--t1); filter: blur(60px); opacity: .28; }
.fp-3d__meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-inline: 14px; }
.fp-3d__meta p { margin: 0; font-size: var(--fs-sm); }

/* hero device on the detail page: bigger, drag to turn it around */
.fp-3d--hero .fp-3d__stage { padding: 10px 18px 20px; }
.fp-3d--hero .fp-pill-info__name { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.3rem); }
.fp-3d--hero .fp-pill__print { font-size: clamp(1.2rem, .9rem + 1.2vw, 1.7rem); }
.fp-3d--hero .fp-pill__print--md { font-size: clamp(1rem, .8rem + .9vw, 1.4rem); }
.fp-3d--hero .fp-pill__print--xs { font-size: clamp(.85rem, .7rem + .6vw, 1.1rem); }
.fp-3d--hero .fp-pill-info__spec span { font-size: .82rem; }
.fp-spin-hint { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: -18px; font-size: var(--fs-xs); color: var(--text-3); }
.fp-spin-hint .ic { width: 14px; height: 14px; }

/* save button */
.fp-fav { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--text-2); background: rgba(255,255,255,.04); border: 1px solid var(--line-strong); transition: transform var(--t-fast), color var(--t-fast), background var(--t-fast); }
.fp-fav .ic { width: 20px; height: 20px; }
.fp-fav:hover { transform: scale(1.06); color: #fff; }
.fp-fav.is-on { color: #fff; background: var(--rose); border-color: transparent; box-shadow: var(--glow-rose); }
.fp-fav.is-on .ic { fill: currentColor; }
.fp-fav.is-pop { animation: fp-pop .45s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)); }
@keyframes fp-pop { 40% { transform: scale(1.3); } }

/* ---------- 2. Listing: filters + surprise ---------- */
.fp-filters { display: grid; gap: 10px; margin-top: 22px; }
.fp-filters__row { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.fp-filters__row::-webkit-scrollbar { display: none; }
.fp-filters__row > b { flex: none; min-width: 74px; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.fp-filters__row .v-chip { flex: none; }
.fp-surprise { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; padding: 16px 20px; border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: linear-gradient(120deg, rgba(255,46,99,.16), rgba(123,63,228,.12)); }
.fp-surprise strong { font-family: var(--f-display); font-size: var(--fs-xl); font-weight: 600; }
.fp-surprise p { margin: 2px 0 0; font-size: var(--fs-sm); }
.fp-count { font-size: var(--fs-sm); color: var(--text-3); margin-top: 18px; }
.fp-shelf { --min: 280px; --gap: 30px 24px; }

/* ---------- 3. Home: categories ---------- */
.fp-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.fp-cat {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 6px; min-height: 190px; padding: 22px;
  border-radius: var(--r-lg); border: 1px solid var(--line); color: var(--text);
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c) 45%, transparent), transparent 60%), linear-gradient(165deg, var(--ink-800), var(--ink-900));
  transition: transform var(--t-med) var(--ease-out), border-color var(--t-med), box-shadow var(--t-med);
}
.fp-cat:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 24px 50px -24px var(--c); }
.fp-cat__ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 40%, #000)); box-shadow: 0 10px 30px -10px var(--c); }
.fp-cat__ic .ic { width: 24px; height: 24px; }
.fp-cat h3 { margin: 12px 0 0; font-size: 1.25rem; }
.fp-cat p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.fp-cat__n { margin-top: auto; display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--text-3); }
.fp-cat__n .ic { width: 14px; height: 14px; transition: transform var(--t-fast); }
.fp-cat:hover .fp-cat__n .ic { transform: translateX(4px); }
.fp-cat::after { /* mini tablet outline in the corner */ content: ""; position: absolute; right: -18px; bottom: -26px; width: 92px; height: 120px; border-radius: 18px; border: 2px solid color-mix(in srgb, var(--c) 50%, transparent); transform: rotate(-14deg); opacity: .5; z-index: -1; }
.fp-hero-note { max-width: 58ch; font-size: var(--fs-lg); color: var(--text-2); }
.fp-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; counter-reset: flow; }
.fp-flow li { list-style: none; counter-increment: flow; padding: 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--g-glass); }
.fp-flow li::before { content: counter(flow, decimal-leading-zero); display: block; font-family: var(--f-display); font-size: 1.6rem; color: var(--rose-2); line-height: 1; margin-bottom: 8px; }
.fp-flow strong { display: block; }
.fp-flow span { font-size: var(--fs-sm); color: var(--text-2); }

/* ---------- 4. Detail page ---------- */
.fp-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.fp-quick div { padding: 12px 14px; border-radius: var(--r-md); background: var(--g-glass); border: 1px solid var(--line-strong); min-width: 0; }
.fp-quick dt { display: flex; align-items: center; gap: .35rem; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.fp-quick dt .ic { width: 14px; height: 14px; color: var(--rose-2); }
.fp-quick dd { margin: 4px 0 0; font-weight: 800; font-size: 1rem; line-height: 1.25; }
@media (max-width: 560px) { .fp-quick { grid-template-columns: 1fr 1fr; } }
.fp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.fp-tags a { font-size: var(--fs-xs); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-2); }
.fp-tags a:hover { color: #fff; border-color: var(--rose-2); }
.fp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.fp-prep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 820px) { .fp-prep { grid-template-columns: 1fr; } }
.fp-prep > .v-panel { padding: clamp(20px, 3vw, 30px); }
.fp-prep h2 { font-size: var(--fs-xl); display: flex; align-items: center; gap: .6rem; }
.fp-prep h2 .ic { width: 26px; height: 26px; color: var(--rose-2); }
.fp-check { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; }
.fp-check li { list-style: none; }
.fp-check label { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.02); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
.fp-check input { position: absolute; opacity: 0; pointer-events: none; }
.fp-check__box { width: 24px; height: 24px; flex: none; border-radius: 8px; border: 2px solid var(--line-strong); display: grid; place-items: center; color: transparent; transition: all var(--t-fast); }
.fp-check__box .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.fp-check input:checked + .fp-check__box { background: var(--ok); border-color: var(--ok); color: var(--ink-900); }
.fp-check input:checked ~ .fp-check__txt { color: var(--text-3); text-decoration: line-through; }
.fp-check input:focus-visible + .fp-check__box { outline: 2px solid var(--rose-2); outline-offset: 2px; }
.fp-check__txt { flex: 1; font-weight: 600; }
.fp-check__opt { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.fp-check__meter { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: var(--fs-sm); color: var(--text-2); }
.fp-check__meter i { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.fp-check__meter i b { display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, var(--rose), var(--ok)); transition: width .4s var(--ease-out); }
.fp-how { margin: 16px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: how; }
.fp-how li { list-style: none; counter-increment: how; display: flex; gap: 12px; align-items: flex-start; }
.fp-how li::before { content: counter(how); flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: rgba(255,46,99,.14); color: var(--rose-2); border: 1px solid rgba(255,46,99,.35); }
/* Not bought yet: the first couple of steps read, the rest stay sealed. */
.fp-how--peek li.is-sealed { flex-wrap: wrap; align-items: center; }
.fp-how--peek li.is-sealed::before { background: rgba(255,255,255,.06); color: var(--text-3); border-color: rgba(255,255,255,.14); }

/* phase timeline */
.fp-timebar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 3px; margin: 18px 0 6px; }
.fp-timebar i { flex: var(--w) 1 0; background: linear-gradient(90deg, var(--rose), var(--ember)); opacity: calc(1 - var(--n) * .18); }
.fp-timebar-labels { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.fp-phases { position: relative; display: grid; gap: 16px; margin-top: 24px; }
.fp-phase { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; }
.fp-phase::before { content: ""; position: absolute; left: 31px; top: 64px; bottom: -16px; width: 2px; background: linear-gradient(var(--rose-2), transparent); opacity: .35; }
.fp-phase:last-child::before { display: none; }
.fp-phase__n { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-family: var(--f-display); font-size: 1.7rem; font-weight: 600; color: #fff; background: linear-gradient(145deg, var(--rose), #6d1239); box-shadow: 0 12px 30px -12px var(--rose); }
.fp-phase__body { padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--g-glass); }
.fp-phase__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.fp-phase__head h3 { margin: 0; font-size: 1.35rem; }
.fp-phase__time { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-sm); font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.fp-phase__time .ic { width: 15px; height: 15px; }
.fp-phase__goal { margin: 6px 0 0; color: var(--text-2); }
.fp-phase__steps { margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.fp-phase__steps li { list-style: none; display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.5; }
.fp-phase__steps li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .55em; border-radius: 50%; background: var(--rose-2); }
.fp-phase__steps em { font-style: normal; font-size: .72rem; font-weight: 800; color: var(--gold); white-space: nowrap; margin-left: 4px; }
.fp-phase__sealed { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: var(--fs-sm); color: var(--text-3); }
.fp-phase__sealed .ic { width: 16px; height: 16px; }
@media (max-width: 560px) {
  .fp-phase { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .fp-phase__n { width: 44px; height: 44px; border-radius: 14px; font-size: 1.2rem; }
  .fp-phase::before { left: 21px; top: 44px; }
}
.fp-startband { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: clamp(22px, 4vw, 40px); border-radius: var(--r-xl); border: 1px solid rgba(255,46,99,.35); background: radial-gradient(90% 120% at 0% 0%, rgba(255,46,99,.28), transparent 60%), radial-gradient(90% 120% at 100% 100%, rgba(123,63,228,.25), transparent 60%), var(--ink-850); }
@media (max-width: 700px) { .fp-startband { grid-template-columns: 1fr; } }
.fp-startband h2 { margin: 0; }
.fp-startband p { margin: 6px 0 0; }

/* ---------- 5. Full-screen couple mode ---------- */
.is-session { overflow: hidden; }
.fp-sess {
  --fs-step: clamp(1.55rem, 1.1rem + 2.4vw, 2.9rem);
  --fs-talk: clamp(1.05rem, .85rem + 1.15vw, 1.9rem);
  --fs-scale: 1; /* set by the A- / A+ buttons (sessions.js) */
  --fit: 1;      /* set by Auto: shrinks a long screen until it fits without scrolling */
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; color: #fff; overflow: hidden;
  background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--t1) 22%, transparent), transparent 70%), #050204;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
/* Two small drawings in the bottom corners of the running session, either side of the controls (markup in tablets/play.php). z-index -1 keeps them under all the text but above the session background. */
.fp-sess__art { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fp-sess__art .fp-la { top: auto; bottom: 2%; left: 3%; width: min(34%, 340px); transform: rotate(-4deg); filter: none; }
.fp-sess__art .fp-la svg { stroke-width: 4.5; }
.fp-sess__art .fp-la path { opacity: .2; }
/* The pussy drawing from the home page (the one under the hero) is the session background: large, faint, mirrored, on the right, behind all the text. */
.fp-sess__art .fp-va { top: 50%; bottom: auto; left: auto; right: -2%; width: min(62%, 860px); transform: translateY(-50%) scaleX(-1); }
.fp-sess__art .fp-va__img { opacity: .2; }
.fp-sess__art .fp-va::after { display: none; }
@media (max-width: 899px) {
  /* Phone: level with the round buttons, out at the two edges, clear of the hint line. */
  .fp-sess__art .fp-la { bottom: 8%; left: 1.5%; width: 34%; }
  .fp-sess__art .fp-la svg { stroke-width: 7; }
  .fp-sess__art .fp-va { top: 40%; bottom: auto; left: 50%; right: auto; width: 120%; transform: translate(-50%, -50%) scaleX(-1); }
  .fp-sess__art .fp-va__img { opacity: .16; }
}
.fp-sess__top { display: flex; align-items: center; gap: 10px; }
.fp-sess__title { flex: 1; min-width: 0; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-sess__clock { font-variant-numeric: tabular-nums; font-weight: 800; font-size: .95rem; color: rgba(255,255,255,.85); }
.fp-sess__clock small { color: rgba(255,255,255,.45); font-weight: 600; }
.fp-sess__btn { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: #fff; cursor: pointer; font-weight: 800; font-size: .8rem; }
.fp-sess__btn .ic { width: 20px; height: 20px; }
/* Text size: A- / Auto / A+. Auto shrinks a long screen until it fits without scrolling; A- and A+ set a size by hand. */
.fp-sess__size { display: flex; flex: none; align-items: stretch; height: 42px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); overflow: hidden; }
.fp-sess__sz { min-width: 40px; padding: 0 10px; border: 0; background: transparent; color: #fff; cursor: pointer; font: inherit; font-weight: 800; line-height: 1; display: grid; place-items: center; }
.fp-sess__sz + .fp-sess__sz { border-left: 1px solid rgba(255,255,255,.12); }
.fp-sess__sz--dn { font-size: .78rem; }
.fp-sess__sz--up { font-size: 1.02rem; }
.fp-sess__sz--auto { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; min-width: 50px; color: rgba(255,255,255,.75); }
.fp-sess__sz.is-on { background: color-mix(in srgb, var(--t1) 34%, transparent); color: #fff; }
.fp-sess__sz:disabled { opacity: .3; cursor: default; }
.fp-sess__sz:focus-visible { outline: 2px solid var(--t2); outline-offset: -3px; }
@media (max-width: 480px) {
  .fp-sess__size { height: 38px; }
  .fp-sess__sz { min-width: 34px; padding: 0 7px; }
  .fp-sess__sz--auto { min-width: 44px; }
}
.fp-sess__rail { display: flex; gap: 6px; margin-top: 14px; }
.fp-sess__rail button { flex: var(--w) 1 0; min-width: 0; height: 6px; border: 0; padding: 0; border-radius: 3px; background: rgba(255,255,255,.14); position: relative; overflow: hidden; cursor: pointer; }
.fp-sess__rail button b { position: absolute; inset: 0; width: var(--p, 0%); background: linear-gradient(90deg, var(--t1), var(--t2)); }
.fp-sess__rail button.is-done b { width: 100%; }
.fp-sess__main { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 18px; width: min(860px, 100%); margin-inline: auto; padding: 20px 0; overflow-y: auto; }
/* A long talking screen must scroll, not get squashed into the dots and timer under it. Short screens stay centred (the auto margins), long ones start at the top. */
.fp-sess__main { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
.fp-sess__main > * { flex-shrink: 0; }
.fp-sess__main > :first-child { margin-top: auto; }
.fp-sess__main > :last-child { margin-bottom: auto; }
.fp-sess__phase { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.fp-sess__pn { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: var(--t2); }
.fp-sess__pt { font-family: var(--f-display); font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); font-weight: 600; }
.fp-sess__win { font-size: .8rem; color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; }
.fp-sess__goal { margin: 0; color: rgba(255,255,255,.6); font-size: clamp(.95rem, .9rem + .3vw, 1.1rem); }
.fp-sess__step { margin: 0; font-size: calc(var(--fs-step) * var(--fs-scale) * var(--fit)); line-height: 1.28; font-weight: 600; letter-spacing: -.01em; text-wrap: pretty; min-height: 3.9em; }
.fp-sess__step.is-in { animation: fp-step-in .5s var(--ease-out) both; }
/* Talking tablets: each person's name sits in front of their own line, and a
   screen can carry several lines instead of one tap per line. */
.fp-say { margin-right: 0; color: var(--t2); font-weight: 900; letter-spacing: .01em; }
.fp-line { display: block; }
.fp-line + .fp-line { margin-top: .5em; }
/* In the player the name keeps the text colour (only a little heavier), the dialogue is a touch bolder, and a normal word space follows the name. */
.fp-sess__step.has-say { font-weight: 600; }
.fp-sess__step .fp-say { color: inherit; font-weight: 800; }
/* Several lines on one screen: smaller type so 3-4 still fit without scrolling. */
.fp-sess__step.is-talk { font-size: calc(var(--fs-talk) * var(--fs-scale) * var(--fit)); line-height: 1.38; min-height: 0; }
.fp-sess__step.is-talk .fp-line + .fp-line { margin-top: .62em; }
.fp-phase__steps .fp-say { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; margin-right: .2em; }
.fp-phase__steps .fp-line + .fp-line { margin-top: .4em; }
@keyframes fp-step-in { from { opacity: 0; transform: translateY(14px); } }
.fp-sess__dots { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: rgba(255,255,255,.5); }
.fp-sess__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); }
.fp-sess__dots i.done { background: var(--t2); } .fp-sess__dots i.cur { background: #fff; width: 22px; border-radius: 4px; }
.fp-sess__dots span { margin-left: 8px; }
.fp-sess__timers { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.fp-ring { position: relative; width: 92px; height: 92px; flex: none; border: 0; padding: 0; background: none; color: #fff; cursor: pointer; }
.fp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fp-ring circle { fill: none; stroke-width: 5; }
.fp-ring .trk { stroke: rgba(255,255,255,.12); }
.fp-ring .bar { stroke: var(--t2); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.fp-ring b { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-size: 1.1rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.fp-ring b small { display: block; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 700; }
.fp-ring--step .bar { stroke: #fff; }
.fp-ring.is-over .bar { stroke: var(--gold); }
.fp-ring.is-paused b { opacity: .5; }
.fp-sess__nudge { display: none; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: rgba(247,201,139,.12); border: 1px solid rgba(247,201,139,.35); color: var(--gold); font-size: .9rem; font-weight: 600; }
.fp-sess__nudge.is-on { display: inline-flex; animation: fp-step-in .4s both; }
.fp-sess__nudge .ic { width: 18px; height: 18px; }
.fp-sess__ctrl { display: flex; align-items: center; justify-content: center; gap: 14px; }
.fp-sess__ctrl .fp-round { width: 60px; height: 60px; }
.fp-sess__ctrl .fp-round--main { width: 76px; height: 76px; }
.fp-sess__ctrl .fp-round .ic { width: 24px; height: 24px; }
.fp-sess__hint { text-align: center; font-size: .72rem; color: rgba(255,255,255,.35); margin: 10px 0 0; }
/* Arrow keys and Space mean nothing on a phone, so touch screens get the swipe hint instead. */
.fp-hint-touch { display: none; }
@media (hover: none), (pointer: coarse) { .fp-hint-key { display: none; } .fp-hint-touch { display: inline; } }

/* ready + finish screens */
.fp-sess__screen { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; overflow-y: auto; padding: 28px max(18px, env(safe-area-inset-right)) 28px max(18px, env(safe-area-inset-left)); background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--t1) 30%, transparent), transparent 70%), #050204; }
.fp-sess__screen[hidden] { display: none; }
.fp-sess__card { width: min(560px, 100%); text-align: center; }
.fp-sess__card h1, .fp-sess__card h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); margin: 10px 0; }
.fp-sess__card .fp-check { text-align: left; }
.fp-sess__card > .hl .ic { width: 60px; height: 60px; }
.fp-sess__big { width: 100%; min-height: 64px; font-size: 1.15rem; margin-top: 22px; }
.fp-stars { display: flex; justify-content: center; gap: 8px; margin: 18px 0 6px; }
.fp-stars button { width: 52px; height: 52px; border: 0; background: none; padding: 0; cursor: pointer; color: rgba(255,255,255,.25); transition: transform var(--t-fast), color var(--t-fast); }
.fp-stars button .ic { width: 100%; height: 100%; stroke-width: 1.2; }
.fp-stars button.is-on { color: var(--gold); }
.fp-stars button.is-on .ic { fill: currentColor; }
.fp-stars button:hover { transform: scale(1.12); }
.fp-sess__phaseflash { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; text-align: center; background: radial-gradient(60% 50% at 50% 42%, rgba(255,46,99,.14), transparent 70%), rgba(5,2,4,.94); pointer-events: none; opacity: 0; transition: opacity .35s; }
.fp-sess__phaseflash.is-on { opacity: 1; }
.fp-flash__kick { font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; color: var(--t2); font-weight: 800; }
.fp-flash__title { font-family: var(--f-display); font-size: clamp(2rem, 1.3rem + 3.4vw, 3.8rem); font-weight: 600; line-height: 1.08; }

/* Phase change: her and him walk in from the sides, lean together, then the
   couple's names and the phase title come up under them. */
.fp-duoart { display: flex; align-items: flex-end; justify-content: center; gap: clamp(4px, 1.6vw, 18px); margin-bottom: clamp(10px, 2vw, 20px); }
.fp-fig { width: clamp(52px, 8vw, 84px); height: auto; overflow: visible; }
.fp-fig circle, .fp-fig path { fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fp-fig--her * { stroke: var(--t2); }
.fp-fig--him * { stroke: var(--t1); }
.fp-fig__hair { fill: var(--t2); stroke: none; }
.fp-duoart__heart { align-self: center; margin-bottom: 8%; }
.fp-duoart__heart svg { width: clamp(22px, 3.4vw, 38px); height: auto; fill: var(--t1); stroke: none; filter: drop-shadow(0 0 14px rgba(255,46,99,.75)); }
.fp-duoart__names { margin: 0 0 6px; display: flex; align-items: center; justify-content: center; gap: .55em; flex-wrap: wrap; font-size: clamp(1rem, .9rem + .7vw, 1.55rem); }
.fp-duoart__names i { font-style: normal; font-weight: 700; color: #fff; }
.fp-duoart__names b { color: var(--t1); font-weight: 400; }

.fp-sess__phaseflash.is-on .fp-fig--her { animation: fp-fig-l .5s var(--ease-out) both, fp-lean-r 1.5s .5s ease-in-out both; }
.fp-sess__phaseflash.is-on .fp-fig--him { animation: fp-fig-r .5s var(--ease-out) both, fp-lean-l 1.5s .5s ease-in-out both; }
.fp-sess__phaseflash.is-on .fp-duoart__heart { animation: fp-heart-pop .5s .42s var(--ease-out) both, fp-heart-beat 1.1s 1s ease-in-out infinite; }
.fp-sess__phaseflash.is-on .fp-duoart__names { animation: fp-flash-up .45s .58s var(--ease-out) both; }
.fp-sess__phaseflash.is-on .fp-flash__kick { animation: fp-flash-up .45s .7s var(--ease-out) both; }
.fp-sess__phaseflash.is-on .fp-flash__title { animation: fp-flash-up .5s .8s var(--ease-out) both; }

@keyframes fp-fig-l { from { opacity: 0; transform: translateX(-50px) rotate(-10deg); } to { opacity: 1; transform: none; } }
@keyframes fp-fig-r { from { opacity: 0; transform: translateX(50px) rotate(10deg); } to { opacity: 1; transform: none; } }
@keyframes fp-lean-r { to { transform: rotate(7deg) translateX(7px); } }
@keyframes fp-lean-l { to { transform: rotate(-7deg) translateX(-7px); } }
@keyframes fp-heart-pop { 0% { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.3); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fp-heart-beat { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.16); } }
@keyframes fp-flash-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.is-session .fp-safe { z-index: 110; }

/* ---------- 6. Library ---------- */
.fp-lib-tabs { display: flex; gap: 8px; margin-top: 24px; overflow-x: auto; scrollbar-width: none; }
.fp-lib-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; }
.fp-lib-status .small .ic { width: 14px; height: 14px; vertical-align: -2px; }

@media (prefers-reduced-motion: reduce) {
  .fp-3d__stage { animation: none; }
  .fp-pill, .fp-sess__step.is-in { transition: none; animation: none; }
  /* The phase-change couple is asked for on purpose, so it still plays here.
     Only the endless heartbeat is dropped. */
  .fp-sess__phaseflash.is-on .fp-duoart__heart { animation: fp-heart-pop .5s .42s var(--ease-out) both; }
}

/* ---------- Tablet detail hero (capsule stage + buy bar) ---------- */
.fp-dhero { position: relative; overflow: hidden; padding: 26px 0 clamp(48px, 7vw, 90px); }
.fp-dhero .fp-crumbs { margin-bottom: 18px; }
.fp-dhero__grid { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (min-width: 960px) { .fp-dhero__grid { grid-template-columns: 1.08fr .92fr; } }
.fp-dhero__visual { order: -1; }
@media (min-width: 960px) { .fp-dhero__visual { order: 0; position: sticky; top: 90px; } }

.fp-dhero__title { font-size: clamp(2.5rem, 1.5rem + 4.4vw, 4.8rem); line-height: .98; margin: 16px 0 12px; text-wrap: balance; background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--t2) 60%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fp-dhero__tag { font-size: clamp(1.1rem, .95rem + .5vw, 1.35rem); color: var(--text); max-width: 42ch; margin-bottom: 14px; }
.fp-dhero__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); }
.fp-dhero__meta span { display: inline-flex; align-items: center; gap: .4rem; }
.fp-dhero__meta .ic { width: 16px; height: 16px; color: var(--t2); }
/* start / buy area: one big two-line button, feature points under it */
.fp-cta { margin-top: 26px; }
.fp-cta__btn { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 10px 12px 10px 10px; border-radius: 999px; overflow: hidden; isolation: isolate;
  background: var(--g-heat); color: #fff; text-shadow: 0 1px 10px rgba(120,0,40,.35);
  box-shadow: 0 18px 44px -16px rgba(255,46,99,.95), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 0 rgba(120,0,40,.25);
  animation: fp-cta-beat 2.4s ease-in-out infinite; transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast); }
.fp-cta__btn::before { /* light sweep */ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); animation: v-sheen 3.4s var(--ease-out) infinite; }
.fp-cta__btn:hover { transform: translateY(-2px); filter: saturate(1.1) brightness(1.04); }
.fp-cta__btn:active { transform: scale(.985); }
.fp-cta__btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.fp-cta__ic { width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--rose); box-shadow: 0 8px 18px -8px rgba(0,0,0,.55); }
.fp-cta__ic .ic { width: 26px; height: 26px; }
.fp-cta__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.1; }
.fp-cta__txt b { font-size: clamp(1.1rem, .95rem + .55vw, 1.35rem); font-weight: 800; letter-spacing: .005em; }
.fp-cta__txt small { font-size: .8rem; font-weight: 700; opacity: .92; }
.fp-cta__txt small s { opacity: .75; }
.fp-cta__arrow { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); transition: transform var(--t-med) var(--ease-out), background var(--t-med); }
.fp-cta__btn:hover .fp-cta__arrow { transform: translateX(4px); background: rgba(255,255,255,.32); }
/* keep the button alive even with Reduce Motion on */
.fp-cta__btn { animation-duration: 2.4s !important; animation-iteration-count: infinite !important; }
.fp-cta__btn::before { animation-duration: 3.4s !important; animation-iteration-count: infinite !important; }
@keyframes fp-cta-beat { 0%, 100% { box-shadow: 0 18px 44px -16px rgba(255,46,99,.95), 0 0 0 0 rgba(255,46,99,.5), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 0 rgba(120,0,40,.25); } 50% { box-shadow: 0 18px 44px -16px rgba(255,46,99,.95), 0 0 0 12px rgba(255,46,99,0), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 0 rgba(120,0,40,.25); } }

.fp-cta__trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 16px 0 0; padding: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); }
.fp-cta__trust li { display: inline-flex; align-items: center; gap: .4rem; }
.fp-cta__trust .ic { width: 15px; height: 15px; color: var(--t2); }
@media (max-width: 420px) { .fp-cta__btn { gap: 10px; min-height: 68px; } .fp-cta__ic { width: 48px; height: 48px; } .fp-cta__arrow { width: 38px; height: 38px; } }

.fp-dhero__actions { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 22px; }
.fp-dhero__link { display: inline-flex; align-items: center; gap: .4rem; color: var(--text-2); font-weight: 700; }
.fp-dhero__link:hover { color: #fff; }
.fp-dhero__link .ic { width: 16px; height: 16px; }


.fp-dhero__actions { margin-top: 16px; }
.fp-dhero__gift { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }

/* capsule stage */
.fp-dhero__stage { position: relative; display: grid; place-items: center; aspect-ratio: 1 / .95; max-width: 560px; margin-inline: auto; }
.fp-dhero__stage::before { content: ""; position: absolute; inset: 12% 8%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--t1) 55%, transparent), transparent 72%); filter: blur(20px); animation: fp-dhero-pulse 5s ease-in-out infinite; }
.fp-dhero__stage::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 6%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--t1) 35%, rgba(255,255,255,.08)), transparent); }
.fp-dhero__ring { position: absolute; inset: 4% 6%; border-radius: 50%; border: 1px dashed rgba(255,214,230,.16); animation: v-rotate 60s linear infinite; }
.fp-dhero__ring--2 { inset: 16% 18%; border-style: solid; border-color: color-mix(in srgb, var(--t1) 30%, transparent); animation-duration: 40s; animation-direction: reverse; }
.fp-dhero__visual { container-type: inline-size; } /* orbit radius uses cqw */
/* Small capsules on a true orbit: an arm spins at constant speed inside a plane squashed
   into an oval; the pill counter-rotates and un-squashes so it keeps its shape. One 16s lap,
   all layers share the same linear timing so nothing speeds up or jerks. */
.fp-orb, .fp-orb__plane, .fp-orb__arm { position: absolute; inset: 0; pointer-events: none; }
.fp-orb { --T: 16s; animation: fp-orb-z var(--T) linear infinite; animation-delay: var(--d); }
.fp-orb__plane { transform: scaleY(.5); }
.fp-orb__arm { animation: fp-orb-spin var(--T) linear infinite; animation-delay: var(--d); will-change: transform; }
.fp-orb__hold { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translateX(47cqw); }
.fp-orb__counter { position: absolute; animation: fp-orb-spin var(--T) linear infinite reverse; animation-delay: var(--d); }
.fp-orb__unsquash { position: absolute; transform: scaleY(2); }
.fp-orb__pill {
  position: absolute; left: -37px; top: -16px; display: block; width: 74px; height: 32px; border-radius: 999px;
  background: linear-gradient(90deg, #f6f2f4 0 52%, var(--c) 52%);
  box-shadow: inset 0 -6px 8px rgba(0,0,0,.28), inset 0 5px 5px rgba(255,255,255,.65), 0 12px 22px -8px rgba(0,0,0,.75);
  rotate: -18deg; animation: fp-orb-depth var(--T) linear infinite; animation-delay: var(--d); will-change: scale, opacity;
}
/* keep the orbit running even with Reduce Motion on (the owner asked for it): beats the global reset */
.fp-orb, .fp-orb__arm, .fp-orb__counter, .fp-orb__pill { animation-duration: var(--T) !important; animation-iteration-count: infinite !important; }
@keyframes fp-orb-spin { to { transform: rotate(360deg); } }
/* 0% = right side, 25% = front (bottom), 50% = left, 75% = back (top) */
@keyframes fp-orb-depth {
  0%    { scale: .8;   opacity: .85; }
  12.5% { scale: .97;  opacity: .95; }
  25%   { scale: 1.05; opacity: 1; }
  37.5% { scale: .97;  opacity: .95; }
  50%   { scale: .8;   opacity: .85; }
  62.5% { scale: .64;  opacity: .72; }
  75%   { scale: .56;  opacity: .62; }
  87.5% { scale: .64;  opacity: .72; }
  100%  { scale: .8;   opacity: .85; }
}
/* in front of the big capsule on the front half of the lap, behind it on the back half */
@keyframes fp-orb-z { 0%, 49.9% { z-index: 3; } 50%, 100% { z-index: 0; } }
.fp-dhero__stage .fp-3d { position: relative; z-index: 2; width: 100%; }
.fp-dhero__stage .fp-3d__stage::after { display: none; }
.fp-dhero__stage .fp-pill-box { padding: 10px 4% 40px; }
.fp-dhero__visual .fp-spin-hint { margin-top: -6px; }
@keyframes fp-dhero-pulse { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .fp-dhero__ring, .fp-dhero__stage::before { animation: none; }
}

/* ---------- Locked tablet: peek list + what's inside ---------- */
.fp-peek { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.fp-peek li { display: flex; align-items: center; gap: .6rem; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid var(--line); font-weight: 600; }
.fp-peek li .ic { width: 16px; height: 16px; flex: none; color: var(--ok); }
.fp-peek li.is-sealed { background: repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 8px, transparent 8px 16px); }
.fp-peek li.is-sealed .ic { color: var(--t2); }
.fp-peek__more { margin: 12px 0 0; font-size: var(--fs-sm); font-weight: 700; color: var(--t2); }
.fp-inside { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 22px 0 6px; padding: 0; }
@media (min-width: 720px) { .fp-inside { grid-template-columns: repeat(4, 1fr); } }
.fp-inside li { position: relative; overflow: hidden; padding: 16px 18px; border-radius: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--t1) 18%, var(--ink-850)), var(--ink-900)); border: 1px solid color-mix(in srgb, var(--t1) 30%, transparent); }
.fp-inside li::after { content: ""; position: absolute; right: -14px; top: -14px; width: 60px; height: 60px; border-radius: 50%; background: var(--t1); filter: blur(24px); opacity: .45; }
.fp-inside b { display: block; font-family: var(--f-display); font-size: 2.2rem; line-height: 1; color: #fff; }
.fp-inside span { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }

/* ---------- Names before the tablet opens ---------- */
.fp-names { position: relative; min-height: calc(100vh - 70px); display: grid; place-items: center; padding: 30px var(--gutter) 60px; overflow: hidden; }
.fp-names__card { position: relative; width: min(560px, 100%); text-align: center; padding: clamp(26px, 5vw, 44px); border-radius: 32px;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--t1) 26%, transparent), transparent 60%), linear-gradient(170deg, var(--ink-800), var(--ink-900));
  border: 1px solid color-mix(in srgb, var(--t1) 40%, transparent); box-shadow: 0 40px 90px -40px var(--t1), inset 0 1px 0 rgba(255,255,255,.08); }
.fp-names__back { position: absolute; top: 16px; left: 16px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--text-2); }
.fp-names__back:hover { color: #fff; }
.fp-names__pill { display: block; width: 92px; height: 38px; margin: 0 auto 16px; border-radius: 999px; transform: rotate(-12deg);
  background: linear-gradient(90deg, #f6f2f4 0 52%, var(--t1) 52%); box-shadow: inset 0 -7px 9px rgba(0,0,0,.28), inset 0 6px 6px rgba(255,255,255,.65), 0 14px 26px -10px var(--t1);
  animation: fp-names-bob 3s ease-in-out infinite; }
@keyframes fp-names-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.fp-names__title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); margin: 12px 0 8px; }
.fp-names__sub { margin: 0 auto 22px; max-width: 38ch; }
.fp-names__pair { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: end; text-align: left; margin-bottom: 22px; }
@media (min-width: 560px) { .fp-names__pair { grid-template-columns: 1fr auto 1fr; } }
.fp-names__field { display: flex; flex-direction: column; gap: 6px; }
.fp-names__field span { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.fp-names__field .v-input { font-size: 1.1rem; font-weight: 700; text-align: center; min-height: 56px; border-radius: 18px; }
.fp-names__heart { justify-self: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 50%; display: grid; place-items: center; background: var(--g-heat); color: #fff; box-shadow: var(--glow-rose); animation: fp-names-beat 1.4s ease-in-out infinite; }
.fp-names__heart .ic { width: 20px; height: 20px; }
@keyframes fp-names-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.15); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } }
.fp-names__go { cursor: pointer; border: 0; font: inherit; text-align: left; }
.fp-names__note { margin: 14px 0 0; font-size: var(--fs-xs); color: var(--text-3); }
.fp-names__pill { animation-duration: 3s !important; animation-iteration-count: infinite !important; }
.fp-names__heart { animation-duration: 1.4s !important; animation-iteration-count: infinite !important; }

/* names inside the player */
.fp-sess__names { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 4px 0 0; font-family: var(--f-display); font-style: italic; font-size: 1.3rem; color: #fff; }
.fp-sess__names .ic { width: 18px; height: 18px; vertical-align: -3px; }
.fp-sess__names a { margin-left: .4rem; font-family: var(--f-body); font-style: normal; font-size: .72rem; font-weight: 700; color: var(--text-3); text-decoration: underline; }
.fp-intro__names { opacity: 0; animation: fp-in-say .6s ease-out .4s forwards; margin: 0 0 6px; font-family: var(--f-display); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); color: #fff; text-align: center; }

/* ---------- Get your partner in (checkout, owned tablet, Our Space) ---------- */
.fp-invite h3 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.fp-invite h3 .ic { width: 18px; height: 18px; color: var(--t2); }
.fp-invite__row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.fp-invite__row .v-btn { flex: 1 1 180px; justify-content: center; }
.fp-invite .fp-invite__wa { background: linear-gradient(120deg, #1faa53, #25d366); border-color: transparent; color: #04210f; }
.fp-invite__code { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--text-3); }
.fp-invite__code strong { margin-left: .4em; letter-spacing: .22em; color: var(--text); font-weight: 800; }
.fp-invite--done h3 .ic { color: #35d07f; }

/* ---------- Our Space shortcuts: cards that read as links ---------- */
.fp-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.fp-shortcut {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; min-height: 76px;
  border-radius: var(--r-lg); border: 1px solid var(--line-strong);
  background: linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  color: var(--text); text-decoration: none;
  transition: transform .18s var(--ease-out), border-color .18s, background .18s, box-shadow .18s;
}
.fp-shortcut:hover, .fp-shortcut:focus-visible {
  transform: translateY(-3px); border-color: rgba(255,46,99,.55);
  background: linear-gradient(150deg, rgba(255,46,99,.14), rgba(255,255,255,.02));
  box-shadow: 0 14px 30px -18px rgba(255,46,99,.8);
}
.fp-shortcut:focus-visible { outline: 2px solid var(--rose-2); outline-offset: 3px; }
.fp-shortcut:active { transform: translateY(-1px); }
.fp-shortcut__ic {
  flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(255,46,99,.14); border: 1px solid rgba(255,46,99,.32);
}
.fp-shortcut__ic .ic { width: 21px; height: 21px; color: var(--rose-2); }
.fp-shortcut__txt { display: grid; gap: 2px; min-width: 0; }
.fp-shortcut__txt b { font-size: 1.02rem; font-weight: 800; }
.fp-shortcut__txt small { font-size: .8rem; line-height: 1.35; color: var(--text-3); }
.fp-shortcut__go { flex: none; margin-left: auto; color: var(--text-3); transition: transform .18s var(--ease-out), color .18s; }
.fp-shortcut__go .ic { width: 18px; height: 18px; }
.fp-shortcut:hover .fp-shortcut__go { transform: translateX(4px); color: var(--rose-2); }
@media (prefers-reduced-motion: reduce) {
  .fp-shortcut, .fp-shortcut__go { transition: none; }
  .fp-shortcut:hover, .fp-shortcut:focus-visible { transform: none; }
}

/* ==========================================================================
   THE RULES - the eight rules a couple has to follow. Same list on /rules,
   the tablet page, the gate before a session, the player and the PDF.
   ========================================================================== */
.fp-rules { list-style: none; display: grid; grid-template-columns: 1fr; gap: 12px; margin: 22px 0 0; padding: 0; counter-reset: none; }
@media (min-width: 820px) { .fp-rules { grid-template-columns: 1fr 1fr; } }
.fp-rule {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px;
  border-radius: var(--r-lg); border: 1px solid var(--line-strong);
  background: linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}
.fp-rule__n {
  flex: none; min-width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 12px; font-family: var(--f-display); font-size: 1.05rem; font-weight: 700;
  color: var(--rose-2); background: rgba(255,46,99,.14); border: 1px solid rgba(255,46,99,.32);
}
.fp-rule__txt { min-width: 0; }
.fp-rule__txt strong { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; font-weight: 800; }
.fp-rule__txt p { margin: 5px 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }
.fp-rule__ic { width: 18px; height: 18px; flex: none; color: var(--gold); }

/* Titles only, for the player's ready screen. No cards, no counter: it is a
   reminder of what you already know, not a numbered set. (The home band is
   .fp-ruleslim and is not affected by these.) */
.fp-rules--tight { gap: 9px 22px; margin-top: 12px; }
.fp-rules--tight .fp-rule { gap: 9px; padding: 0; align-items: center; border: 0; background: none; }
.fp-rules--tight .fp-rule__txt strong { font-size: .86rem; font-weight: 600; line-height: 1.35; color: var(--text-2); }
.fp-rules--tight .fp-rule__ic { width: 15px; height: 15px; }

/* the user's line: why the rules are the whole thing */
.fp-mainline {
  margin: 20px 0 0; padding: 16px 20px; border: 0; border-left: 3px solid var(--rose-2);
  border-radius: 0 var(--r-lg) var(--r-lg) 0; background: rgba(255,46,99,.08);
}
.fp-mainline__kick { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--rose-2); }
.fp-mainline__kick .ic { width: 15px; height: 15px; }
.fp-mainline p { margin: 8px 0 0; font-family: var(--f-display); font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); font-style: italic; line-height: 1.45; color: #fff; }

/* /rules page */
.fp-rulehero { position: relative; overflow: hidden; padding-top: 48px; }
.fp-rulehero > * { position: relative; z-index: 1; }
.fp-rulehero__hard { margin: 14px 0 0; font-size: 1.1rem; font-weight: 800; color: #fff; }
.fp-rulehero__sub { margin: 20px 0 0; color: var(--text-2); }
.fp-ruleband { padding: clamp(24px, 4vw, 40px); }

/* the gate: no tick, no tablet */
.fp-gate { position: relative; min-height: calc(100vh - 70px); display: grid; place-items: start center; padding: 30px var(--gutter) 60px; overflow: hidden; }
.fp-gate__card {
  position: relative; width: min(760px, 100%); padding: clamp(26px, 5vw, 44px); border-radius: 32px;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--t1) 22%, transparent), transparent 60%), linear-gradient(170deg, var(--ink-800), var(--ink-900));
  border: 1px solid color-mix(in srgb, var(--t1) 40%, transparent);
  box-shadow: 0 40px 90px -40px var(--t1), inset 0 1px 0 rgba(255,255,255,.08);
}
.fp-gate__title { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.6rem); margin: 12px 0 8px; }
.fp-gate__hard { margin: 0 0 4px; font-weight: 800; color: #fff; }
.fp-gate__sub { margin: 18px 0 0; color: var(--text-2); }
.fp-gate__agree {
  display: flex; gap: 14px; align-items: flex-start; margin: 22px 0 18px; padding: 16px 18px; cursor: pointer;
  border-radius: var(--r-lg); border: 1px dashed rgba(255,46,99,.5); background: rgba(255,46,99,.06);
  font-weight: 700; line-height: 1.45;
}
.fp-gate__agree input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--rose-2); cursor: pointer; }
.fp-gate__agree:has(input:checked) { border-style: solid; border-color: #35d07f; background: rgba(53,208,127,.1); }
.fp-gate__agree:focus-within { outline: 2px solid var(--rose-2); outline-offset: 3px; }
.fp-gate__go { width: 100%; cursor: pointer; border: 0; font: inherit; text-align: left; }
.fp-gate__out { display: block; margin: 16px 0 0; text-align: center; font-size: var(--fs-sm); color: var(--text-3); text-decoration: underline; }

/* the rules again on the player's ready screen */
.fp-sess__rules { text-align: left; padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: rgba(255,255,255,.03); }
/* Two across whenever there is room for it, one when there is not. */
.fp-sess__rules .fp-rules { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fp-sess__rules p { margin-top: 12px; font-style: italic; }

/* home page: one quiet line about the rules, nothing heavy */
.fp-ruleslim {
  display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: center; justify-content: space-between;
  padding: 22px 24px; border-radius: var(--r-lg); border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.02);
}
.fp-ruleslim h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
.fp-ruleslim p { max-width: 62ch; color: var(--text-2); font-size: var(--fs-sm); }
.fp-ruleslim .v-btn { flex: none; }

/* last band on a tablet page: the rules line, then the button */
.fp-endcta { position: relative; overflow: hidden; padding: clamp(26px, 4.5vw, 46px); text-align: center; }
.fp-endcta > * { position: relative; z-index: 1; }
.fp-endcta__line { margin: 14px auto 0; max-width: 62ch; font-family: var(--f-display); font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); font-style: italic; color: #fff; }
.fp-endcta__row { justify-content: center; margin-top: 22px; }
.fp-endcta__note { margin: 18px 0 0; font-size: var(--fs-sm); color: var(--text-3); }
.fp-endcta__note .ic { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }

/* ---------- 9. Read aloud: Listen + Auto next beside the timer (markup in tablets/play.php, logic in sessions.js) ---------- */
.fp-listen { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fp-listen[hidden] { display: none; }
.fp-listen button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #fff; font: inherit; font-weight: 700; font-size: .72rem; cursor: pointer; }
.fp-listen button .ic { width: 14px; height: 14px; }
.fp-listen button:focus-visible { outline: 2px solid var(--t2); outline-offset: 2px; }
.fp-listen__btn.is-speaking { background: linear-gradient(90deg, var(--t1), var(--t2)); color: #1a0a10; border-color: transparent; }
.fp-listen__auto i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .3); transition: background .2s, box-shadow .2s; }
.fp-listen__auto[aria-pressed="true"] { border-color: var(--t2); color: var(--t2); }
.fp-listen__auto[aria-pressed="true"] i { background: var(--t2); box-shadow: 0 0 10px var(--t2); }