/* ── Device Connection (node 246:16457) ───────────────────────────────────────── */
.dc-body { padding: 0 12px; display: flex; flex-direction: column; gap: 32px; }
.dc-sec { display: flex; flex-direction: column; gap: 8px; }
.dc-label { margin: 0; padding: 0 12px; font-family: var(--font-supreme); font-size: 16px; line-height: 1.5; letter-spacing: -0.5px; color: var(--color-neutral-700); }
.dc-list { display: flex; flex-direction: column; gap: 4px; }
.dc-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-radius: 20px; padding: 16px; }
.dc-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dc-ic { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.dc-ic img { width: 44px; height: 44px; object-fit: contain; display: block; }
.dc-name { margin: 0; font-family: var(--font-supreme-bold); font-size: 20px; line-height: 1.2; letter-spacing: -1px; color: var(--color-black); }
.dc-meta { margin: 4px 0 0; font-family: var(--font-supreme); font-size: 14px; line-height: 1.4; letter-spacing: -0.42px; color: var(--color-neutral-600); }
.dc-state { flex: none; width: 24px; height: 24px; display: block; }
.dc-check { width: 34px; height: 34px; margin: -5px; }   /* icon overflows its 24 frame (Figma inset -24%) */
/* Next button pinned to the right of the bar. */
.dc-bottom .sb-row { justify-content: flex-end; }
/* Entrance: cards slide up, staggered */
@keyframes dc-in { from { opacity: 0; transform: translateY(16px); } }
.dc-card { animation: dc-in .45s cubic-bezier(.2,.7,.2,1) both; }
.dc-card:nth-of-type(1) { animation-delay: .12s; }
.dc-card:nth-of-type(2) { animation-delay: .20s; }
.dc-list + .dc-sec .dc-card { animation-delay: .30s; }

/* ── Ready to Start (node 246:15915 / 15874) ──────────────────────────────────── */
.rts-screen { position: relative; height: 100%; overflow: hidden; background: #fff; }
/* Very subtle warm inner glow across the viewport (node 246:15874/15915) — kept faint. */
.rts-screen::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 -10px 40px -2px rgba(255,181,109,0.35), inset 0 14px 22px 0 rgba(250,48,48,0.10); }
/* Supplied red-blur gradient — full width (no scaling, so no visible box edge); it just
   eases DOWN a touch as the tap page appears. Sits below the text/foot. */
.rts-blur { position: absolute; top: 0; left: 0; width: 360px; height: 100%; z-index: 1; pointer-events: none;
  background: url('../assets/icons/start-blur.webp') center top / 100% 100% no-repeat;
  animation: rts-blur 3.6s cubic-bezier(.3,0,.2,1) both; }
@keyframes rts-blur {
  0%   { opacity: 0; transform: translateY(-72px); }
  20%  { opacity: 1; transform: translateY(-72px); }   /* Sean's Final: blur higher */
  74%  { transform: translateY(-72px); }               /* hold through the pack name */
  100% { opacity: 1; transform: translateY(0); }        /* Tap page: eases down into place */
}
.rts-screen .status-bar { position: absolute; top: 0; left: 0; z-index: 5; background: transparent; }

/* Phase 1: the pack name slides in centre; Phase 2: it clears and the foot prompt shows. */
.rts-pack { position: absolute; left: 24px; right: 24px; top: 300px; z-index: 3; text-align: center;
  font-family: var(--font-supreme-bold); font-size: 48px; line-height: 1.2; letter-spacing: -2.4px; color: var(--color-red);
  mix-blend-mode: color-burn;
  animation: rts-pack-in .7s cubic-bezier(.2,.7,.2,1) .5s both, rts-pack-out .5s ease 2.6s both; }
@keyframes rts-pack-in { from { opacity: 0; transform: translateY(24px); } }
@keyframes rts-pack-out { to { opacity: 0; transform: translateY(-16px); } }

/* Phase-2 group (foot prompt + start), fades in after the pack clears. */
.rts-final { position: absolute; inset: 0; z-index: 3; opacity: 0; animation: rts-final-in .7s cubic-bezier(.2,.7,.2,1) 3s both; }
@keyframes rts-final-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.rts-prompt { position: absolute; left: 0; right: 0; top: 128px; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.rts-prompt .s { font-family: var(--font-supreme); font-size: 14px; line-height: 1.4; letter-spacing: -0.42px; color: rgba(255,255,255,0.8); }
.rts-prompt .m { font-family: var(--font-supreme-bold); font-size: 28px; line-height: 1.2; letter-spacing: -1.5px; color: #fff; }

/* Tapping foot — above the blur at Figma x37/y230; taps the floor twice on a loop
   (plus-darker → multiply). */
.rts-foot { position: absolute; left: 24px; top: 268px; width: 336px; height: 289px; z-index: 2;
  background: url('../assets/icons/tap-foot.svg') center / contain no-repeat; mix-blend-mode: multiply;
  opacity: 0; animation: rts-final-in .7s cubic-bezier(.2,.7,.2,1) 3s both, foot-tap 2.6s ease-in-out 3.7s infinite; }
@keyframes foot-tap {                                 /* gentle, small double-dip */
  0%, 62%, 100% { transform: translateY(0); }
  14%, 40%      { transform: translateY(5px); }       /* down (soft tap) */
  27%, 53%      { transform: translateY(0); }          /* up — twice */
}
/* Tap ripple: two flat ellipses (no blur) that pulse in sync with each foot tap — the
   foot lands at 12%/40% of its 1.8s loop, so the rings flash there and ripple out.
   The outer ring is offset a touch so the two read as a sequence. */
.rts-plate, .rts-plate2 { position: absolute; left: 50%; z-index: 1; border-radius: 50%; opacity: 0;
  animation: plate-ripple 2.6s ease-out infinite; }
.rts-plate  { top: 553px; width: 293px; height: 32px; margin-left: -146px; background: rgba(250,48,48,0.10); animation-delay: 3.78s; }
.rts-plate2 { top: 561px; width: 177px; height: 16px; margin-left: -88px;  background: rgba(250,48,48,0.20); animation-delay: 3.7s; }
@keyframes plate-ripple {                                  /* faint flash, barely grows */
  0%, 62%, 100% { opacity: 0; transform: scale(.85); }
  14%           { opacity: .55; transform: scale(1); }     /* tap 1 lands */
  27%           { opacity: 0; transform: scale(1.08); }    /* soft fade out */
  40%           { opacity: .55; transform: scale(1); }     /* tap 2 lands */
  53%           { opacity: 0; transform: scale(1.08); }
}

.rts-start { position: absolute; left: 0; right: 0; bottom: 30px; text-align: center; z-index: 4;
  font-family: var(--font-supreme-medium); font-size: 16px; letter-spacing: -0.8px; color: #FE6E3C; text-decoration: none;
  animation: rts-final-in .7s cubic-bezier(.2,.7,.2,1) 3.1s both; }