body { background:var(--color-background); color:var(--color-text); font-family:var(--font-body); }
header { background:var(--color-background); border-bottom:1px solid rgb(74 60 46 / .1); padding:12px 28px; } header img { width:64px; height:64px; object-fit:contain; } header h1 { text-align:left; font-size:1.65rem; color:var(--color-text); }
#primary-navigation { width:auto; padding:8px 20px; margin:0; flex-direction:row; justify-content:center; border-radius:0; box-shadow:0 2px 12px rgb(0 0 0 / .035); gap:12px; background:var(--color-background); }
#primary-navigation button { flex:1; max-width:190px; text-align:center; border-radius:12px; padding:10px; margin:0; }
#navLoggedIn { background:transparent; box-shadow:none; width:190px; padding:18px 10px; margin:0; }
#navLoggedIn button { color:var(--color-text-secondary); font-size:.88rem; border-radius:10px; padding:10px; }
#mainContainer { background:var(--color-background); } main { padding:28px; } main>section { max-width:1000px; margin:auto; }
#auth-section { max-width:650px; } #auth-section form { padding:24px; border:1px solid var(--color-border); border-radius:var(--radius-md); margin-bottom:24px; background:white; box-shadow:var(--shadow-card); }
#auth-section input,#auth-section button[type=submit] { max-width:none; } #auth-section button[type=submit] { background:var(--color-primary-hover); color:white; border:0; font-weight:600; }
.password-row { display:flex; align-items:center; gap:8px; } .password-row input { min-width:0; } .password-toggle { border:1px solid var(--color-border); border-radius:10px; background:white; padding:8px; font-size:.8rem; }
.social-hero { border:1px solid rgb(32 148 139 / .12); } .social-card { border-radius:var(--radius-md); box-shadow:var(--shadow-card); } h2,h3 { letter-spacing:-.025em; } p { line-height:1.6; }
#matching-profile-container { max-width:430px; margin:auto; position:relative; } #matchingProfileImage { width:100%; height:min(56dvh,560px); object-fit:cover; border:0; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); touch-action:pan-y; user-select:none; }
#matching-name { font-size:1.7rem; margin:0; } #matching-buttons-container { gap:30px; } #matching-buttons-container button { width:70px; height:70px; padding:10px; font-size:1rem; border:1px solid var(--color-border); box-shadow:var(--shadow-card); background:white; color:var(--color-primary-hover); } #matching-buttons-container button:last-child { color:var(--color-error); }
#matching-details { text-align:center; } #profile-detail { background:white; border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:24px; } #profileImage { width:220px; height:260px; border:0; border-radius:var(--radius-md); }
#profileList,#myMatchesList { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:20px; } .profile,.match-profile { width:100%; padding:12px; box-shadow:var(--shadow-card); border-radius:18px; } .profile img,.match-profile img { width:100%; height:180px; object-fit:cover; border:0; border-radius:12px; }
#chat-section { max-width:800px; } #chat-messages { border:1px solid var(--color-border); background:var(--color-surface-elevated); height:48dvh; padding:18px; } .chat-message-bubble { padding:12px 16px; box-shadow:none; background:var(--color-surface); } .chat-message-wrapper.me .chat-message-bubble { background:var(--color-primary-soft); } #chat-input-container { position:sticky; bottom:0; background:var(--color-background); padding:8px 0; }
.mystery { background:linear-gradient(125deg,#18594f,#4a3c2e); color:#fff; } .mystery .eyebrow { color:#d9f1e9; } .mystery-silhouette { width:80px; height:80px; display:grid; place-items:center; border-radius:50%; background:var(--color-primary-soft); font-size:2rem; }
.progress-steps { display:flex; list-style:none; padding:0; gap:8px; flex-wrap:wrap; } .progress-steps li { padding:8px 12px; border-radius:20px; background:var(--color-surface); font-size:.8rem; } .progress-steps .done { background:var(--color-primary-soft); color:var(--color-primary-hover); }
.answer-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0; } .answer-grid button.selected { background:var(--color-primary-soft); border:2px solid var(--color-primary); } .chemistry-score { font-size:2.1rem; font-weight:700; color:var(--color-primary-hover); }
.match-pictures { display:flex; gap:16px; justify-content:center; } .match-pictures img { width:110px; height:140px; object-fit:cover; border-radius:18px; } .reveal-card { animation:reveal .4s ease-out; } @keyframes reveal { from {opacity:0;transform:translateY(12px)} to {opacity:1;transform:none} }
.live-dot::before { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--color-success); margin-right:8px; } .privacy-note { font-size:.85rem; color:var(--color-text-secondary); }
@media(max-width:700px) {
 header { padding:8px 14px; } header img { width:48px; height:48px; } header h1 { font-size:1.2rem; } main { padding:16px 12px calc(100px + env(safe-area-inset-bottom)); }
 #primary-navigation { position:fixed; bottom:0; left:0; right:0; z-index:50; padding:6px 4px calc(6px + env(safe-area-inset-bottom)); border-top:1px solid var(--color-border); gap:2px; flex-wrap:nowrap!important; background:var(--color-background); box-shadow:0 -4px 24px rgb(74 60 46 / .08); }
 #primary-navigation button { font-size:.7rem; min-width:0; padding:10px 2px; min-height:54px; border-radius:10px; }
 #navLoggedIn { width:100%; flex-wrap:nowrap!important; overflow-x:auto; padding:8px 12px; gap:6px; scrollbar-width:thin; } #navLoggedIn button { white-space:nowrap; flex-shrink:0; min-height:40px; background:var(--color-surface); }
 #navLoggedOut { width:auto; } #profile-detail { padding:18px; } #profileImage { width:100%; height:340px; object-fit:cover; } #profileList,#myMatchesList { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 #chat-input-container { bottom:calc(76px + env(safe-area-inset-bottom)); } #chat-messages { height:42dvh; } .social-grid { grid-template-columns:1fr; } .answer-grid { grid-template-columns:1fr; } #auth-section form { padding:18px; }
}
/* Touch browsers keep :hover after tapping; only the active route stays highlighted. */
@media (hover:none) {
 #primary-navigation button:not(.active) { background:transparent; color:var(--color-text); }
}
#primary-navigation button.active { background:var(--color-primary-hover); color:#fff; font-weight:700; }

#encounter-section.game-panel{max-width:760px;margin-inline:auto;border:1px solid #cad9cd;border-radius:20px;background:#fffaf2;padding:24px;box-sizing:border-box;box-shadow:0 12px 36px #173c2515}#encounter-section.game-panel button{min-height:44px;white-space:normal}#encounter-section.game-panel .social-hero{padding:12px 0}#encounter-section.game-panel .answer-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}@media(max-width:640px){#encounter-section.game-panel{position:fixed;inset:0;z-index:110;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-radius:0;overflow:auto;padding:max(12px,env(safe-area-inset-top)) 12px max(18px,env(safe-area-inset-bottom));overscroll-behavior:contain}#encounter-section.game-panel h2{font-size:1.4rem}}
/* Persistent moment timeline; separate from presence/online status. */
#now-list{display:flex;flex-direction:column;gap:1rem;max-width:720px;margin:0 auto}#now-list .now-moment{display:flex;flex-direction:column;align-items:stretch;gap:.65rem;min-width:0}#now-list .now-moment>button:first-child{display:flex;align-items:center;gap:.7rem;align-self:flex-start}#now-list .now-moment>button:first-child img{width:44px;height:44px;border-radius:50%;object-fit:cover}#now-list time{font-size:.8rem;color:var(--muted,#666)}#now-list p{white-space:pre-wrap;overflow-wrap:anywhere}.now-photo{padding:0;border:0;overflow:hidden;border-radius:16px}.now-photo img{width:100%;max-height:560px;object-fit:contain;display:block}.now-dialog form{display:flex;flex-direction:column;gap:.75rem}.now-dialog img{max-width:100%;max-height:260px;object-fit:contain}.now-photo-dialog{max-width:95vw;max-height:95dvh}.now-photo-dialog img{max-width:100%;max-height:80dvh;object-fit:contain}.moment-focused{outline:3px solid #198979}.community-moment .moment-thumbnail{display:block;max-width:180px;max-height:130px;object-fit:cover;border-radius:10px;margin:.4rem 0}.community-moment .moment-action{font-size:.85rem;min-height:40px}@media(max-width:640px){#now-section{padding:10px}#now-list .now-moment{padding:12px}.now-dialog{width:calc(100% - 16px);max-width:none;margin:auto;padding:16px}.now-dialog button,.now-dialog select{min-height:44px}}
#now-list .now-photo{align-self:stretch;display:block;width:100%;padding:0;border:0;border-radius:14px;overflow:hidden}#now-list .now-photo img{display:block;width:100%;height:auto;max-height:560px;object-fit:contain;border-radius:0}.community-moment .moment-thumbnail{width:180px;height:120px;max-width:100%;object-fit:cover;border-radius:10px}
/* Compact Moment timeline; overrides legacy discover-card media sizing. */
#now-list{max-width:820px;gap:14px}#now-list .now-moment,.moment-detail .now-moment{display:flex;flex-direction:column;gap:10px;padding:18px;min-height:0;width:100%;box-sizing:border-box;align-items:stretch}
.moment-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.moment-header>div{min-width:0;flex:1}.moment-header .moment-author{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;text-align:left;box-shadow:none;max-width:100%;color:inherit}.moment-author strong{overflow-wrap:anywhere}.moment-header time{display:block;font-size:.8rem;margin:2px 0 0 50px;color:var(--muted,#666)}
#now-list .moment-author img,.moment-detail .moment-author img{width:40px;height:40px;min-width:40px;margin:0;border-radius:50%;object-fit:cover;order:0}.moment-header summary{min-width:44px;min-height:44px;cursor:pointer;font-size:24px;list-style:none;text-align:center}.moment-header details{position:relative}.moment-header details[open]{z-index:2}.moment-header details button{display:block;max-width:220px}.moment-text{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.moment-preview{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
#now-list .now-photo img{width:100%;height:auto;max-height:320px;object-fit:cover;margin:0;order:0;border-radius:12px}#now-list .now-photo{background:transparent;line-height:0;min-height:0}.moment-social{display:flex;flex-wrap:wrap;gap:6px}.moment-social button{min-height:44px;min-width:44px;padding:6px 10px}.moment-social button[aria-pressed=true]{background:#176c60;color:white}.moment-comment-preview{font-size:.85rem;margin:0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.now-moment>button{align-self:flex-start;margin:0;min-height:44px}.now-moment button:focus-visible,.moment-detail button:focus-visible{outline:3px solid #168574;outline-offset:2px}
.moment-detail{width:min(820px,calc(100vw - 32px));max-height:90dvh;overflow:auto;box-sizing:border-box;border:1px solid #d6d5ca;border-radius:18px;padding:18px;background:var(--card,#fffdf8);color:var(--text,#493d32)}.moment-detail::backdrop{background:#0008}.moment-detail .now-photo{width:100%;align-self:stretch}.moment-detail .now-photo img{width:100%;max-height:65dvh;object-fit:contain;display:block}.moment-detail form{display:flex;gap:8px;position:sticky;bottom:0;background:var(--card,#fffdf8);padding:10px 0}.moment-detail textarea{min-width:0;flex:1;min-height:44px}.moment-comment{border-top:1px solid #ddd;padding:10px 0;overflow-wrap:anywhere}.moment-comment>button:first-child{display:flex;align-items:center;gap:8px;border:0;background:none;padding:0}.moment-comment img{width:30px;height:30px;object-fit:cover;border-radius:50%}.moment-comment time{font-size:.75rem}.moment-comment p{white-space:pre-wrap;margin:8px 0}.moment-comment button{min-height:44px}
@media(max-width:640px){#now-list .now-moment{padding:12px;gap:7px}#now-list .now-photo img{max-height:180px;aspect-ratio:16/9;object-fit:cover}.moment-detail{width:100%;height:100dvh;max-height:100dvh;max-width:none;margin:0;border-radius:0;padding:12px}.moment-detail .now-moment{padding:0}.moment-header time{margin-left:0}.moment-social{gap:3px}.moment-social button{padding:5px 8px}}
.now-moment .moment-header{background:transparent;padding:0;color:inherit;width:100%;box-sizing:border-box;gap:8px}.now-moment .moment-author{width:auto;min-height:44px}.now-moment .moment-author img{flex-shrink:0}#now-section>.social-hero{padding:14px 18px;margin-bottom:12px}#now-section>.social-hero h2{font-size:26px;margin:4px 0}#now-section>.social-hero .eyebrow{display:none}#now-section #now-controls{margin-bottom:8px}#now-section #now-count{margin:12px 0}#now-section #now-status:empty,#now-section #now-message:empty{display:none}
.now-moment .moment-author strong{font-size:15px;line-height:1.3}.moment-detail .moment-header{border:0}.moment-detail{overscroll-behavior:contain}.moment-detail form{padding-bottom:max(10px,env(safe-area-inset-bottom))}
.moment-detail .comment-own-avatar{width:32px;height:32px;object-fit:cover;border-radius:50%;flex-shrink:0;align-self:center}.moment-detail textarea{font-size:16px}.moment-detail form button{min-height:44px}
#now-list .moment-social button,.moment-detail .moment-social button{padding:6px 8px;min-width:44px;min-height:44px;font-size:12px}.moment-comment .moment-comment-media img{width:auto;max-width:100%;height:auto;max-height:180px;border-radius:10px}.moment-comment audio{max-width:100%}
/* Detail controls must not inherit full-width auth buttons or avatar media sizes. */
dialog.moment-detail .now-photo{display:block;padding:0;border:0;margin:0;background:transparent;line-height:0}
dialog.moment-detail .now-photo img{width:100%;max-width:100%;height:auto;max-height:65dvh;margin:0;border:0;border-radius:12px;object-fit:contain}
dialog.moment-detail form{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;width:100%;box-sizing:border-box;margin:0}
dialog.moment-detail form textarea{width:100%;max-width:none;min-width:0;box-sizing:border-box;margin:0;padding:10px;border:1px solid #cbd9d1;border-radius:12px;resize:vertical;max-height:140px}
dialog.moment-detail form button{width:auto;min-width:44px;max-width:none;margin:0;padding:10px 12px;background:#176c60;color:#fff;border:0;border-radius:12px;font-size:14px;align-self:stretch}
dialog.moment-detail form button:disabled{opacity:.55}

#profile-detail #matchButtons{gap:8px;flex-wrap:wrap;justify-content:flex-start}#profile-detail #matchButtons button{flex:0 1 auto;width:auto;min-height:44px;padding:10px 16px;font-size:15px;border-radius:12px}#profile-relationship{color:#176c60;font-weight:600}

#now-list .moment-sticker img,dialog.moment-detail .moment-sticker img,.now-dialog .moment-sticker-preview img{display:block;width:180px;height:180px;max-width:100%;object-fit:contain;background:transparent;border:0;border-radius:0;margin:0}.community-moment .teaser-sticker img{display:block;width:96px;height:96px;object-fit:contain;background:transparent;border:0;border-radius:0;margin:0}.moment-sticker,.moment-sticker-preview{background:transparent;border:0}.moment-sticker-preview:empty{display:none}@media(max-width:640px){#now-list .moment-sticker img{width:140px;height:140px}}
.moment-attachments{display:flex;flex-wrap:wrap;gap:.5rem}.moment-attachments button{min-height:44px;flex:1}.moment-attachments button:focus-visible,.private-stickers:focus-visible,.community-stickers:focus-visible{outline:3px solid #176c60;outline-offset:2px}
#now-list .moment-sticker img{width:190px;height:190px}.moment-sticker.sticker-alone{align-self:center}#now-list .now-moment{position:relative;overflow:visible}.moment-social{position:relative;display:flex;align-items:center;gap:6px;min-height:32px}.moment-reaction-summary{display:flex;align-items:center;gap:8px;font-size:12px;flex:1}.moment-reaction-summary:empty{display:none}#now-list .moment-social>button,#now-list .moment-reaction-summary button{min-height:32px;padding:3px 6px;font-size:12px;border:0;background:transparent}.moment-reaction-actions{display:flex;gap:3px;align-items:center;padding:5px;background:#fffaf1;border:1px solid #d4dfd6;border-radius:14px;box-shadow:0 4px 14px #25392d22}#now-list .moment-reaction-actions{position:absolute;bottom:100%;left:0;z-index:4;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s}#now-list .moment-reaction-actions button{font-size:18px;min-width:44px;min-height:44px;padding:5px}#now-list .reactions-open .moment-reaction-actions,#now-list .now-moment:focus-within .moment-reaction-actions{opacity:1;visibility:visible;pointer-events:auto}@media(hover:hover) and (pointer:fine){#now-list .now-moment:hover .moment-reaction-actions{opacity:1;visibility:visible;pointer-events:auto}}@media(hover:none){#now-list .now-moment:focus-within:not(.reactions-open) .moment-reaction-actions{opacity:0;visibility:hidden;pointer-events:none}}@media(max-width:640px){#now-list .moment-sticker img,dialog.moment-detail .moment-sticker img{width:150px;height:150px}#now-list .moment-social>button{min-height:44px}}@media(prefers-reduced-motion:reduce){#now-list .moment-reaction-actions{transition:none}}