/* === CONNECT — Phase 1: Send/Receive panels === */
.phase-connect{flex:1;display:flex;min-height:0;overflow:hidden}
@media(min-aspect-ratio:1/1){.phase-connect{flex-direction:row}.side{flex:1;justify-content:center}}
@media(max-aspect-ratio:1/1){.phase-connect{flex-direction:column}.side{flex:1}.side-send{justify-content:flex-end;padding-bottom:16px}.side-recv{justify-content:flex-start;padding-top:16px}}
.side{display:flex;flex-direction:column;align-items:center;padding:16px;position:relative;overflow:hidden;min-height:0}
.side-send{background:var(--send);color:#fff}
.side-send::before{content:'';position:absolute;top:-15%;right:-15%;width:50%;height:50%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);pointer-events:none}
.side-recv{background:var(--recv);color:#fff}
.side-recv::before{content:'';position:absolute;bottom:-15%;left:-15%;width:50%;height:50%;background:radial-gradient(circle,rgba(255,255,255,.07) 0%,transparent 70%);pointer-events:none}
.sc{width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;z-index:1;animation:fadeU .4s ease-out both}
.side-send .sc{animation-delay:.05s}.side-recv .sc{animation-delay:.15s}
.side-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;background:rgba(255,255,255,.2);border-radius:20px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.side-title{font-size:clamp(1.3rem,4.2vmin,1.9rem);font-weight:900;line-height:1.1;text-align:center}
.side-desc{font-size:clamp(.82rem,2.2vmin,.95rem);color:rgba(255,255,255,.82);text-align:center;line-height:1.4;max-width:300px;font-weight:500}
.create-btn{padding:clamp(14px,3vmin,20px) clamp(32px,6vmin,52px);border:none;border-radius:var(--r);font-family:inherit;font-size:clamp(1rem,2.5vmin,1.15rem);font-weight:800;cursor:pointer;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.1);transition:all .2s;color:var(--send-dk)}
.create-btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.15)}
.feat-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:2px}
.feat{padding:3px 10px;background:rgba(255,255,255,.14);border-radius:20px;font-size:.68rem;font-weight:700;color:rgba(255,255,255,.85)}

/* Idle nudge */
.idle-nudge{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);pointer-events:none;z-index:5;opacity:0;animation:nudgeIn .6s ease-out 8s both}
@keyframes nudgeIn{to{opacity:1}}
.nudge-pill{background:var(--white);color:var(--text);padding:10px 18px;border-radius:22px;font-size:.84rem;font-weight:700;box-shadow:0 4px 20px rgba(0,0,0,.12);display:flex;align-items:center;gap:8px;animation:nudgeBob 2.5s ease-in-out infinite;pointer-events:auto;white-space:nowrap}
@keyframes nudgeBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.nudge-x{background:none;border:none;color:var(--text-lt);font-size:.65rem;font-weight:700;cursor:pointer;margin-left:4px;font-family:inherit;padding:2px 6px;border-radius:8px}
.nudge-x:hover{background:var(--bg);color:var(--text)}

/* Session code display */
.session-code{background:rgba(255,255,255,.18);border:2.5px solid rgba(255,255,255,.4);border-radius:var(--rl);padding:20px;text-align:center;width:100%;max-width:320px;backdrop-filter:blur(6px)}
.sc-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.6);margin-bottom:8px}
.sc-val{font-family:'IBM Plex Mono',monospace;font-size:clamp(2.4rem,9vmin,3.6rem);font-weight:700;letter-spacing:.22em;color:#fff;cursor:pointer;transition:transform .15s}
.sc-val:hover{transform:scale(1.03)}
.sc-hint{font-size:.78rem;color:rgba(255,255,255,.5);margin-top:6px;font-weight:600}
.sc-status{font-size:.75rem;font-weight:700;color:rgba(255,255,255,.7);margin-top:10px;display:flex;align-items:center;justify-content:center;gap:6px}
.wdot{width:6px;height:6px;border-radius:50%;background:#fff;animation:wdot 1.4s infinite}
.wdot:nth-child(2){animation-delay:.2s}.wdot:nth-child(3){animation-delay:.4s}
@keyframes wdot{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.share-row{display:flex;gap:8px;width:100%;max-width:320px;margin-top:6px}
.share-btn{flex:1;padding:10px 6px;border-radius:var(--rs);border:1.5px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);cursor:pointer;transition:all .15s;text-decoration:none;color:#fff;display:flex;flex-direction:column;align-items:center;gap:3px;font-family:inherit;backdrop-filter:blur(4px)}
.share-btn:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}
.share-btn .si{font-size:1.1rem}.share-btn .sl{font-size:.68rem;font-weight:700;color:rgba(255,255,255,.7)}

/* Handhold */
.hh{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.2);border-radius:var(--rs);padding:10px 14px;width:100%;max-width:320px;position:relative;animation:hhBob 3s ease-in-out infinite;text-align:left}
@keyframes hhBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.hh-text{font-size:.82rem;font-weight:700;color:rgba(255,255,255,.9);line-height:1.4}
.hh-sub{font-size:.72rem;font-weight:600;color:rgba(255,255,255,.5);margin-top:2px}
.hh-x{position:absolute;top:6px;right:8px;background:none;border:none;font-size:.65rem;color:rgba(255,255,255,.35);cursor:pointer;font-weight:700;font-family:inherit}
.hh-x:hover{color:rgba(255,255,255,.7)}

/* Code input (receiver) */
.code-row{display:flex;justify-content:center;gap:10px}
.ci{width:clamp(52px,14vmin,68px);height:clamp(62px,16vmin,80px);background:rgba(255,255,255,.14);border:2.5px solid rgba(255,255,255,.35);border-radius:14px;font-family:'IBM Plex Mono',monospace;font-size:clamp(1.8rem,5vmin,2.6rem);font-weight:700;text-align:center;color:#fff;text-transform:uppercase;outline:none;transition:all .2s;backdrop-filter:blur(4px)}
.ci:focus{border-color:#fff;background:rgba(255,255,255,.24);box-shadow:0 0 0 4px rgba(255,255,255,.12);transform:translateY(-2px)}
.ci::placeholder{color:rgba(255,255,255,.2)}
.join-btn{padding:clamp(14px,3vmin,20px) clamp(32px,6vmin,52px);border:none;border-radius:var(--r);font-family:inherit;font-size:clamp(1rem,2.5vmin,1.15rem);font-weight:800;cursor:pointer;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.1);transition:all .2s;color:var(--recv-dk)}
.join-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.15)}
.join-btn:disabled{opacity:.4;cursor:not-allowed}

@media(max-height:680px){.side{padding:12px}.sc{gap:6px}}