/* Meet six (Me → My circle, the middle of the hive): pick what you're open to, tap yourself, six people turn to face you. Warm and calm, not a game of chance. */
.sp-page { background: #faf7f2; }
.sp-scroll { padding: 4px 16px calc(28px + env(safe-area-inset-bottom, 0px)); }
.sp-head { min-height: 52px; margin: 2px 0 10px; text-align: center; }
.sp-head b { display: block; font-size: 22px; letter-spacing: -.3px; }
.sp-head small { color: #6c6d67; font-size: 13.5px; }
.sp-vibes { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px 16px; padding: 2px 16px; scrollbar-width: none; }
.sp-vibes::-webkit-scrollbar { display: none; }
.sp-vibes .vb-chip { border: 0; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.sp-vibes .vb-chip:disabled { opacity: .55; cursor: default; }

.sp-hive { position: relative; width: min(250px, 70vw); margin: 6px auto 0; aspect-ratio: 5.196 / 5; container-type: inline-size; }
.sp-ring { position: absolute; inset: 0; }
.sp-cell, .sp-center { position: absolute; width: 31.3%; height: 37.6%; padding: 0; border: 0; transform: translate(-50%, -50%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); -webkit-tap-highlight-color: transparent; }
.sp-face { position: absolute; inset: 0; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--sp-c, #d9e5df) center / cover no-repeat; color: #fff; font-size: 11cqw; font-weight: 800; }
.sp-face .avatar-initials-glyph { font-size: 10cqw; }
/* Waiting: a warm light card with a face outline (someone is coming). */
.sp-cell.is-waiting { background: #f1e6da; }
.sp-cell.is-waiting .sp-face { inset: 5%; background: linear-gradient(160deg, #fffdf9, #fbefe3); color: #e2c9b0; }
.sp-cell.is-waiting svg { width: 46%; height: 46%; }
/* Just turned to face you: a warm glow. */
.sp-cell.is-arrive { animation: spin-arrive .7s ease-out; }
@keyframes spin-arrive { 40% { filter: drop-shadow(0 0 10px rgb(247 165 147 / .9)); } }
.sp-cell.is-person { background: linear-gradient(135deg, #f7c74b, #f7a593, #61c8e6); cursor: pointer; }
.sp-cell.is-person .sp-face { inset: 6%; }
.sp-center { left: 50%; top: 50%; z-index: 2; background: #d6d8d3; cursor: pointer; }
.sp-center:disabled { cursor: default; }
.sp-me { position: absolute; inset: 0; display: grid; place-items: center; clip-path: inherit; background: var(--sp-c, #2f5f6f) center / cover no-repeat; color: #fff; font-weight: 800; }
.sp-me .avatar-initials-glyph { font-size: 9cqw; }
.sp-center.has-spin-edge .sp-me { inset: 8%; }
.sp-center.is-done .sp-me { inset: 6%; filter: grayscale(1); opacity: .6; }
/* Press: you press down; let go: you come back up. */
.sp-center.is-press { transform: translate(-50%, -50%) scale(.84); transition: transform .14s; }
.sp-center.is-release { animation: spin-release .45s cubic-bezier(.3, 2, .5, 1); }
@keyframes spin-release { from { transform: translate(-50%, -50%) scale(.84); } }
.sp-tag { left: 50%; top: calc(50% + 18.8%); }

/* ---------- You in the middle, while you have spins (here, My circle and the Me card) ---------- */
@property --spin-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.has-spin-edge { background: conic-gradient(from var(--spin-a), #f7c74b, #f7a593, #61c8e6, #468093, #f7c74b) !important; animation: spin-edge 3s linear infinite; }
@keyframes spin-edge { to { --spin-a: 360deg; } }
.hive-cell.is-me.has-spin-edge .hive-face { inset: 8%; }
.hive.is-mini .hive-cell.is-me.has-spin-edge .hive-face { inset: 12%; }
/* You breathe: grow a little and back, slowly, while you can meet six. */
.spin-breathe { animation: spin-edge 3s linear infinite, spin-breathe 3s ease-in-out infinite; }
@keyframes spin-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.06); } }
.spin-tag { position: absolute; z-index: 3; transform: translate(-50%, -55%); padding: 3px 9px; border-radius: 99px; background: #fff; color: #171717; font-size: 11.5px; font-weight: 800; white-space: nowrap; box-shadow: 0 2px 8px rgb(0 0 0 / .12), 0 0 0 1px #f1e6da; pointer-events: none; }
.spin-tag.is-done { background: #e4e5e1; color: #6c6d67; box-shadow: none; }
.hive-spin-tag { left: 50%; top: calc(50% + var(--cell-h) / 2); }
.hive-cell.is-me.is-spin { cursor: pointer; }
/* Once, until your first spin: what tapping yourself does. */
.spin-bubble { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 4; width: 200px; padding: 10px 12px; border-radius: 16px; background: #171717; color: #fff; text-align: center; font-size: 13px; font-weight: 650; line-height: 1.3; pointer-events: none; animation: spin-bob 1.6s ease-in-out infinite; transform: translateX(-50%); }
.spin-bubble::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: #171717; }
.spin-bubble small { display: block; margin-top: 3px; color: #b9bbb5; font-size: 11.5px; font-weight: 600; }
@keyframes spin-bob { 50% { transform: translate(-50%, -6px); } }
.hive-big:has(.spin-bubble) { margin-top: 92px; }
/* The Me card: 👋 Meet six, with a blinking dot. */
.me-hive-spins { justify-self: start; display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 3px 9px; border-radius: 99px; background: #171717; color: #fff; font-size: 11.5px; font-weight: 800; }
.me-hive-spins i { width: 6px; height: 6px; border-radius: 50%; background: #f7c74b; animation: spin-blink 1.4s ease-in-out infinite; }
@keyframes spin-blink { 50% { opacity: .2; } }
/* The meet sheet: Meet six first. */
.vb-spin { position: relative; display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 12px 14px; overflow: hidden; border: 0; border-radius: 18px; background: #171717; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.vb-spin::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .16) 50%, transparent 70%); transform: translateX(-100%); animation: spin-shine 2.8s ease-in-out infinite; pointer-events: none; }
@keyframes spin-shine { 60%, 100% { transform: translateX(100%); } }
.vb-spin-mark { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #f7c74b, #f7a593); font-size: 28px; animation: spin-wave 2.8s ease-in-out infinite; }
/* The hand waves now and then. */
@keyframes spin-wave { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-14deg); } 82% { transform: rotate(12deg); } 88% { transform: rotate(-8deg); } 94% { transform: rotate(0); } }
.vb-spin b { display: block; font-size: 16px; }
.vb-spin small { color: #b9bbb5; font-size: 12.5px; }
.vb-spin em { padding: 4px 9px; border-radius: 99px; background: rgb(255 255 255 / .14); font-size: 12px; font-style: normal; font-weight: 800; white-space: nowrap; }
.vb-sheet > p.vb-or { margin: 14px 0 8px; color: #8a8d86; font-size: 11.5px; font-weight: 800; letter-spacing: .6px; }

.sp-left { margin: 14px 0 0; text-align: center; color: #6c6d67; font-size: 13px; }
.sp-dots { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: 1px; }
.sp-dots i { width: 8px; height: 8px; border-radius: 50%; background: #171717; }
.sp-dots i.is-used { background: #d6d8d3; }
.sp-note { margin: 16px 8px 0; text-align: center; color: #4a4d4a; font-size: 14px; line-height: 1.45; }

.sp-list { display: grid; gap: 6px; margin-top: 14px; }
.sp-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 6px 8px 6px 6px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #ecebe6; }
.sp-list.is-fresh .sp-row { animation: sp-row .35s ease-out both; }
@keyframes sp-row { from { opacity: 0; transform: translateY(6px); } }
.sp-row-who { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sp-row-face { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--sp-c, #d9e5df) center / cover no-repeat; color: #fff; font-weight: 800; font-size: 14px; }
.sp-row-who span { min-width: 0; }
.sp-row-who b { display: block; overflow: hidden; font-size: 14.5px; text-overflow: ellipsis; white-space: nowrap; }
.sp-row-who small { display: block; overflow: hidden; color: #6c6d67; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.sp-hi { padding: 8px 12px; border: 0; border-radius: 99px; background: #f7a593; color: #fff; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }

.sp-card { text-align: center; }
.sp-big { width: 84px; height: 84px; margin: 4px auto 8px; border-radius: 50%; display: grid; place-items: center; background: var(--sp-c, #d9e5df) center / cover no-repeat; color: #fff; font-size: 30px; font-weight: 800; box-shadow: 0 0 0 4px #fff, 0 0 0 7px #f7c74b; }
.sp-card-sub { margin: 2px 0 0; color: #6c6d67; font-size: 13.5px; }
.sp-card-why { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 12px 0 4px; }
.sp-why { padding: 7px 12px; border-radius: 99px; background: #f2f3f5; font-size: 13px; font-weight: 700; }
.sp-card-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.sp-card-btns button { height: 46px; border: 0; border-radius: 99px; background: #f2f3f5; color: inherit; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.sp-card-btns .is-go { background: #171717; color: #fff; }


html:is(.is-dark, [data-profile-theme="dark"]) .sp-page { background: #111; color: #f4f4f5; }
html:is(.is-dark, [data-profile-theme="dark"]) :is(.sp-row, .sp-why, .sp-card-btns button) { background: #1b1e24; box-shadow: 0 0 0 1px #2e323a; color: #f4f4f5; }
html:is(.is-dark, [data-profile-theme="dark"]) :is(.sp-card-btns .is-go, .spin-tag:not(.is-done), .spin-bubble, .me-hive-spins) { background: #f2f3f5; color: #111; }
html:is(.is-dark, [data-profile-theme="dark"]) .sp-cell.is-waiting { background: #3a332c; }
html:is(.is-dark, [data-profile-theme="dark"]) .sp-cell.is-waiting .sp-face { background: linear-gradient(160deg, #2a2621, #221e1a); color: #6b5d50; }
html:is(.is-dark, [data-profile-theme="dark"]) .spin-bubble::after { border-top-color: #f2f3f5; }
html:is(.is-dark, [data-profile-theme="dark"]) .spin-bubble small { color: #6c6d67; }
html:is(.is-dark, [data-profile-theme="dark"]) :is(.sp-head small, .sp-left, .sp-row-who small, .sp-card-sub, .sp-note) { color: #a1a1aa; }
@media (prefers-reduced-motion: reduce) { .sp-list.is-fresh .sp-row, .has-spin-edge, .spin-breathe, .spin-bubble, .me-hive-spins i, .vb-spin::before, .vb-spin-mark, .sp-center.is-release, .sp-cell.is-arrive { animation: none; } }